Copy image to clipboard using JavaScript
Question
I am trying to copy an image to clipboard using JavaScript. I have tried these solutions but get the error:
Uncaught (in promise) DOMException: Document is not focused.
There is this article which shows:
try {
const imgURL = '/images/generic/file.png';
const data = await fetch(imgURL);
const blob = await data.blob();
await navigator.clipboard.write([
new ClipboardItem({
[blob.type]: blob
})
]);
console.log('Image copied.');
} catch(e) {
console.error(e, e.message);
}
But this gives the error:
VM2303:12 TypeError: Failed to fetch "Failed to fetch"
...along with CORS warning.
I have also tried converting an image data URI into a blob and using:
navigator.clipboard.write([
new ClipboardItem({
'image/png': blob
})
])
...but this also gives the following error:
Uncaught (in promise) DOMException: Document is not focused
Note that I only need to do this with local images uploaded client-side (has a data URI as source). So everything is on the same server and requires no back-end.
2 answers
solution1
1 ACCPTED 2020-02-25 18:34:08
If you are trying to fetch an image from a domain you don't control, you will need to implement some server-side code to fetch the image to your domain to avoid cross-origin issues. If you will be fetching the image from a domain you control, you need to serve the images with the CORS header. Access-Control-Allow-Origin: * or Access-Control-Allow-Origin: https://domain-you-are-fetching-from.example .
Edit: If you are using existing data URIs, you can convert them to blobs without using fetch. See Blob from DataURL?
You could also load the data URI in an image element, write that image to a canvas, and use the canvas.toBlob() method to produce a blob.
const image = document.getElementsByTagName('img')[0] image.addEventListener('click', e => { const canvas = document.createElement('canvas') canvas.width = image.naturalWidth canvas.height = image.naturalHeight const context = canvas.getContext('2d') context.drawImage(image, 0, 0) canvas.toBlob(blob => { navigator.clipboard.write([ new ClipboardItem({ [blob.type]: blob }) ]).then(() => { console.log('Copied') }) }) })
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z/C/HgAGgwJ/lK3Q6wAAAABJRU5ErkJggg==" width="20" alt=""> </body> </html>
solution2
0 2020-02-25 18:11:20
Actually, your code is 100% correct, but due to security reasons, user must focus on document to copy anything. You can add a click event to copy test.
button.onclick = ()=>{
copyImage();
};
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.