有没有办法使用纯javascript而不需要库将图像复制到剪贴板？

Question

我尝试过使用 document.execCommand('copy') 像 this site 但它不起作用（尽管 console.log 说它成功了，但没有任何内容复制到我的剪贴板）。我还使用了 navigator.clipboard API，但这对我的 jpg 图像不起作用，这是它的代码：

navigator.clipboard.write(
[
    new ClipboardItem({
        'image/jpeg': new Blob( ['media/anime_0.jpg'],{type:'image/jpeg'} )
    })
])
.then(e=>{console.log('Copied to clipboard')})
.catch(e=>{console.log(e)})

上面的代码产生以下错误：

DOMException: Sanitized MIME type image/jpeg not supported on write.

有人知道我是否做错了什么，或者是否可以在不使用外部库的情况下将图像复制到剪贴板？

Answer 1

感谢 Keith 提供以下链接：使用 javascript 将图像转换为 blob

这是我在应用程序中使用的解决方案（它只会将图像保存为 png，因为 jpeg/jpg 文件不断给我带来 DOMException 错误。

const img = new Image
const c = document.createElement('canvas')
const ctx = c.getContext('2d')

function setCanvasImage(path,func){
    img.onload = function(){
        c.width = this.naturalWidth
        c.height = this.naturalHeight
        ctx.drawImage(this,0,0)
        c.toBlob(blob=>{
            func(blob)
        },'image/png')
    }
    img.src = path
}

setCanvasImage('media/anime_0.jpg',(imgBlob)=>{
    console.log('doing it!')
    navigator.clipboard.write(
        [
            new ClipboardItem({'image/png': imgBlob})
        ]
    )
    .then(e=>{console.log('Image copied to clipboard')})
    .catch(e=>{console.log(e)})
})

Answer 2

我知道上面的答案已被接受，但尽管如此，这是我使用 ant design 在 Vue 3 SFC 中的版本

<template>
  <Card title="Copy Image" size="small" class="my-card">
    <img :src="imageSrc" alt="Non Coi Male" />
    <Button size="small" type="dashed" @click="copyImageToClipboard(imageSrc)"
    >Copy</Button>
  </Card>
</template>
<script setup lang="ts">
import { Card, message, Button } from 'ant-design-vue';

const imageSrc = 'https://some-image-url/mockimage.jpeg';

const copyImageToClipboard= async (src: string) => {
  const covertedPngImage = new Image();
  covertedPngImage.src = src;
  covertedPngImage.onload = () => {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    canvas.width = covertedPngImage.width;
    canvas.height = covertedPngImage.height;
    ctx?.drawImage(covertedPngImage, 0, 0);
    canvas.toBlob((blob) => {
      if (blob) {
        const item = new ClipboardItem({ 'image/png': blob });
        navigator.clipboard.write([item]);
        message.success('Copied image to clipboard');
      } else {
        message.error('Failed to copy image to clipboard');
      }
    })
  }
}
</script>