最近在写一个小工具，用来生成指定宽高与颜色的图片：传送门.我想给它添加可以一键复制图片到剪切板的功能，所以才有了这篇文章。
作为一名前(面)端(向)高(谷)级(歌)开发人员，基本素养还是要具备的。前车之鉴，后事之师。不仅要汲取前人的经验，还需要注意避开前人踩过的坑。
实现类似功能的第三库包有很多，但是我只是做了一个小工具，就一个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);
}
});
}
