最近在写一个小工具,用来生成指定宽高与颜色的图片:传送门.我想给它添加可以一键复制图片到剪切板的功能,所以才有了这篇文章。

作为一名前(面)端(向)高(谷)级(歌)开发人员,基本素养还是要具备的。前车之鉴,后事之师。不仅要汲取前人的经验,还需要注意避开前人踩过的坑。

实现类似功能的第三库包有很多,但是我只是做了一个小工具,就一个html文件而已。如果为了这么一个功能去引用一个第三方包就有点多余。所以还是决定自己写简单的函数。

目前相关的文章讲解关于 JS复制图片到剪切板 的技术方案有两种:

  • document.execCommand('copy')
  • navigator.clipboard.write()

但是 document.execCommand('copy') 再部分场景下会失效,秉持着高(偷)效(懒)得原则,果断选择了 navigator.clipboard.write() 的方案来实现图片复制。

源码

// 复制图片到剪切板
function clipboard() {
    navigator.permissions.query({ name: 'clipboard-write' }).then(result => {
        if (result.state === 'granted') {
            var imageType = getImageType();
            canvas.toBlob(function deal(blob) {
                var clipboardItem = new ClipboardItem({[`image/${suffix}`]: blob});
                navigator.clipboard.write([clipboardItem]).then(() => {
                    alert('复制成功');
                });
            }, imageType);
        }
    });
}

参考

  1. 记js复制图片到剪贴板的坑.
  2. canvas API中文网 - 中文文档 - HTMLCanvasElement.toBlob().
  3. javascript - TypeError: Failed to construct 'ClipboardItem': Failed to convert value to 'Blob' - Stack Overflow.