Navigator.clipboard与Canvas实现图片复制粘贴到微信上

前言：之前开发中使用过复制功能，那时候使用的是复制文本功能，然后有次业务需求需要用到右键事件来复制图片。

效果图：

有人说为什么不用原生右键保存图片，但是业务中右键事件不止复制图片，还有其他操作，自定义右键事件就需要阻止浏览器原生的事件。所以原生的右键点击保存图片方法不可取。

让我们先来理下思路，复制功能做过的大家都会先想到一个库clipboard.js，这是一个专门复制的库。我尝试过这个库来进行复制图片。可能是笔者姿势不对，没成功。所以笔者去查阅了原生的剪切板API——Navigator.clipboard # Clipboard。

阅读文档可以得知通过Clipboard.write()来写入图片数据到剪切板。

语法：

参数：

data

ClipboardItem包含要写入剪贴板的数据的对象数组。（如果是处理文本数据那么直接使用Clipboard.readText()和Clipboard.writeText()即可，但是如果是文件或者图片类型则需要用到这个对象。） ClipboardItem 可以让开发者更好得处理各种文件类型数据。

返回值：

Promise数据写入剪贴板后解析。如果剪贴板无法完成剪贴板访问，则该承诺将被拒绝。

通过文档说明，就有了大致思路：

代码首先创建一个新ClipboardItem对象，文本将被放置到该对象中以发送到剪贴板。传递给构造函数的对象的键ClipboardItem表示内容类型，值表示内容。内容可以是文本甚至是 Blob（例如，用于将图像复制到剪贴板）。Then同时指定一个实现函数和一个错误函数。

代码思路有了，那么再联系实际业务场景，在实际业务场景中，展示出来的图片以网络地址居多，而ClipboardItem对象需要传入的是Blob，所以我们需要先把网络图片转换为图片文件，这里笔者用到的是canvas.toBlob()。

在创建canvas的时候需要给它设定宽高，这里需要注意，创建的画布宽高是图片的自然宽度和自然高度，也就是naturalWidth和naturalHeight,它们是元素的自然宽度，它们永远不会改变。而不是渲染在页面的高宽，如果使用图片在页面的宽高，会导致图片复制不全或者偏小。

思路都差不多了，剩下就是代码了。

运行效果：

注意：new ClipboardItem()这个实例对象因为安全性质原因需要在HTTPS环境下才能使用或者开发环境也可。但是在http环境下就不行。

这篇文章分享就到了这，如果觉得对你有所帮助，能否点个赞，激励下笔者创作，感谢您的阅读。