Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: Use callback for toBlob in clipboard write example #33000

Merged
merged 6 commits into from
May 3, 2024
Merged

fix: Use callback for toBlob in clipboard write example #33000

Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
63749f5
fix: Use callback for toBlob in clipboard write example
bsmth Apr 8, 2024
57d0387
Update files/en-us/web/api/clipboard/write/index.md
Josh-Cena Apr 8, 2024
67719a4
Update files/en-us/web/api/clipboard/write/index.md
Josh-Cena Apr 8, 2024
6f8f5ac
fix: Changes following reviewer feedback, avoid floating promises
bsmth Apr 9, 2024
15d7089
Merge branch 'main' into 32385-canvas-blob
bsmth May 3, 2024
fad482e
feat: add paste event listener to read from clipboard, convert to liv…
bsmth May 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
71 changes: 62 additions & 9 deletions files/en-us/web/api/clipboard/write/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,23 +73,76 @@ A `try..catch` block could be used to catch any errors writing the data.

### Write canvas contents to the clipboard

This example writes the canvas to a blob, using the default MIME type of `image/png`, and then writes the blob to the clipboard.
This example draws a blue rectangle to the canvas and writes the canvas to a blob in the clipboard when you click the canvas.
An event listener is triggered on [`paste` events](/en-US/docs/Web/API/Element/paste_event) in an element where we want to display the clipboard contents as an image.

The [FileReader API](/en-US/docs/Web/API/FileReader) allows us to read the blob using the [`readAsDataUrl`](/en-US/docs/Web/API/FileReader/readAsDataURL) method and create an `<img>` element with the canvas contents:

```js
// Get canvas can add an event handler for the click event.
const target = document.getElementById("target");
const canvas = document.getElementById("canvas");

// Set up canvas
const ctx = canvas.getContext("2d");
ctx.fillStyle = "cornflowerblue";
ctx.fillRect(0, 0, 100, 100);

canvas.addEventListener("click", copyCanvasContentsToClipboard);

async function copyCanvasContentsToClipboard() {
// Copy canvas to blob
const blob = await canvas.toBlob();
// Create ClipboardItem with blob and it's type, and add to an array
const data = [new ClipboardItem({ [blob.type]: blob })];
// Write the data to the clipboard
await navigator.clipboard.write(data);
function copyCanvasContentsToClipboard() {
return new Promise((resolve, reject) => {
// Copy canvas to blob
canvas.toBlob(async (blob) => {
try {
// Create ClipboardItem with blob and its type, and add to an array
const data = [new ClipboardItem({ [blob.type]: blob })];
// Write the data to the clipboard
await navigator.clipboard.write(data);
resolve();
} catch (e) {
reject(e);
}
});
});
}

target.addEventListener("paste", (event) => {
const items = (event.clipboardData || window.clipboardData).items;
const blob = items[0].getAsFile();
const reader = new FileReader();

reader.addEventListener("load", (event) => {
const img = new Image();
img.src = event.target.result;
target.appendChild(img);
});

reader.readAsDataURL(blob);
});
```

```css hidden
body {
font-family: sans-serif;
}
#target {
border: 2px solid;
padding: 1rem;
height: 150px;
}
img {
margin: 0.5rem;
}
```

```html
<canvas id="canvas" width="100" height="100"></canvas>

<div id="target">Paste here.</div>
```

{{embedlivesample("write_canvas_contents_to_the_clipboard", "", "300")}}

## Specifications

{{Specifications}}
Expand Down