Clipboard 通过按钮一键复制图片和文本

找了很多资料，发现通过 Clipboard 插件复制图片时，只支持 png 图片。下面给出解决办法，可以复制jpg、jpeg等类型的图片。

步骤

• 后端传过来的是jpeg图片的url, （其中 url 需要是完整的格式，如http://xxx.jpeg）拿到后新建一个画布canvas把img加载到画布。
• 将 url 转成 png 格式，然后图文写入剪切板

关键点

• img加载也要使用 async 函数和 await 关键字（不用的话，转换格式会发生在你写入剪切板之后，导致复制失败）
  

下面给出源码（注释写的有点多QAQ,方便自己理解）

async copy(url,msg) {try {if (url) {this.imgUrl = this.picServer+urlvar canvas = document.createElement('canvas')  //创建画布let img = new Image()  //创建一个 Image 对象img.setAttribute("crossOrigin", 'Anonymous') //跨越问题解决img.src = this.imgUrl //将 url 赋值给 img.src,相当于给浏览器缓存了一张图片img.onload = async () => {  // img加载完成canvas.width = img.width  canvas.height = img.height canvas.getContext('2d').drawImage(img, 0, 0) //加载img到画布this.imgUrl = canvas.toDataURL('image/png')  //转换图片，格式为png//写入剪切板const image = await fetch(this.imgUrl)const blob = await image.blob()const text = new Blob([msg], { type: 'text/plain' })const item = new ClipboardItem({'text/plain': text,'image/png': blob})await navigator.clipboard.write([item])this.$message.success('复制成功')}} else {const text = new Blob([msg], { type: 'text/plain' })const item = new ClipboardItem({'text/plain': text})await navigator.clipboard.write([item])this.$message.success('复制成功')}} catch (e) {this.$message.error('浏览器版本过低不支持，请升级浏览器')}},

如果看不懂，建议先参考下面这一篇大神的博客，再来看就好理解了。
剪贴板操作 Clipboard API 教程

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！