[英]Copy image to clipboard using JavaScript
我正在尝试使用 JavaScript将图像复制到剪贴板。 我已经尝试过这些解决方案，但出现错误：
Uncaught (in promise) DOMException: Document is not focused.
有这篇文章显示：
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);
}
但这给出了错误：
VM2303:12 TypeError: Failed to fetch "Failed to fetch"
...以及CORS警告。
我还尝试将图像数据 URI 转换为 blob并使用：
navigator.clipboard.write([
new ClipboardItem({
'image/png': blob
})
])
...但这也给出了以下错误：
Uncaught (in promise) DOMException: Document is not focused
请注意，我只需要使用客户端上传的本地图像（具有数据 URI 作为源）来执行此操作。 所以一切都在同一台服务器上，不需要后端。
如果您尝试从您无法控制的域中获取图像，则需要实现一些服务器端代码来将图像获取到您的域中，以避免跨域问题。 如果您将从您控制的域中获取图像，则需要使用 CORS 标头提供图像。 Access-Control-Allow-Origin: *或Access-Control-Allow-Origin: https://domain-you-are-fetching-from.example 。
编辑：如果您使用现有的数据 URI，则可以将它们转换为 blob，而无需使用 fetch。 从 DataURL看到Blob？
您还可以在图像元素中加载数据 URI，将该图像写入画布，然后使用canvas.toBlob()方法生成一个 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>
实际上，您的代码是 100% 正确的，但出于安全原因，用户必须专注于文档才能复制任何内容。 您可以添加一个点击事件来复制测试。
button.onclick = ()=>{
copyImage();
};
如何以编程方式使用 Javascript 将画布作为图像复制到剪贴板
[英]How To Copy Canvas As Image To Clipboard Using Javascript Programmatically
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.