使用JavaScript将图像复制到剪贴板

Question

使用JavaScript将图像复制到剪贴板

3

我正在尝试使用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"

我也尝试了将图像数据URI转换为Blob并使用：

...连同CORS警告一起。

navigator.clipboard.write([
    new ClipboardItem({
        'image/png': blob
    })
])

但这也会导致以下错误：

…

Uncaught (in promise) DOMException: Document is not focused

请注意，我只需要处理客户端上传的本地图片（源代码为数据URI）。因此，所有内容都在同一服务器上，不需要后端。

- Cybernetic

你尝试过显式地将焦点赋予文档 window.focus(); 吗？ - Andre Nuechter

这个应该放在哪里？我试过在之前调用它（以及将焦点放在实际的图像元素上），但没有任何区别。 - Cybernetic

我会把它放在你尝试写入剪贴板的那行代码之前。这样做也值得一试... - Andre Nuechter

2个回答

0

其实，你的代码是100%正确的，但出于安全原因，用户必须专注于文档以复制任何内容。你可以添加一个点击事件来复制文本。

button.onclick = ()=>{
    copyImage();
};

- Sarthak Pokharel

不起作用。在这里查看Fiddle https://jsfiddle.net/CyberneticSean/02d7tn9j/2/ - Cybernetic

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Zeal · Accepted Answer

如果您正在尝试从您无法控制的域名获取图像，则需要实现一些服务器端代码来将图像获取到您的域名上，以避免跨域问题。如果您将从您自己控制的域名获取图像，则需要使用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>