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.
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.
Share Improve this question edited Feb 25, 2020 at 18:51 Cybernetic asked Feb 25, 2020 at 17:54 CyberneticCybernetic 13.4k16 gold badges105 silver badges152 bronze badges 3-
Have you tried explicitly giving focus to the document
window.focus();? – Andre Nuechter Commented Feb 25, 2020 at 18:04 - Where would this go? I tried calling it right before (as well as focusing the actual image element) and it doesn't make a difference. – Cybernetic Commented Feb 25, 2020 at 18:05
- I would put it before the line where you try to write to the clipboard. It was worth a shot... – Andre Nuechter Commented Feb 25, 2020 at 18:08
2 Answers
Reset to default 4If 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>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();
};
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744284686a4566737.html
评论列表（0条）