火箭 (*^▽^*)在vue中使用clipboard.js

火箭 (^▽^)在vue中使用clipboard.js API 点击复制，把一张图片复制到粘贴板中，然后复制到微信对话框中
此功能可以使用在vue项目中，通过点击触发copy一张图片到粘贴板中，并能够复制到微信对话中

1.#安装clipboard

npm install clipboard --save
正常模式下，clipboard只可以能复制文本
有人提出可以把图片使用canvas生成一遍，然后再转成base64的格式，然后复制base64
这样是一个方式，但是，经过实践，确实不能达到要求 1.查看clipboard API

clipboard API

其中有这么介绍

To prevent malicious image data from being placed on the clipboard, the image data may be transcoded to produce a safe version of the image.

意思大概就是，要保证安全模式下进行复制图片（ (＃￣～￣＃)，对如何复制图片是一点都没有讲解，我去看了github 上的issues，有人确认提出如何copy img，结果到了最后，竟然发现都是在讨论，在复制图片的时候如何保证安全性，通过浏览器的认证）

我就想默默，如果是存在服务器的图片，应该是已经经过安全校验单的吧0.0

看看源码吧，还是有方法的，这里确认通过另一种方式实现的

import Clipboard from 'clipboard';
不要问为什么不在全局，因为我测试在全局的时候，会发现new 的函数会找不到
2.2vue中

<div class="globalSearchBtn posterDivRightBtn btn" @click="clickCopy_b" id="aaa"> <a class="globalSearchBtn_a">复制</a> </div> <div class="posterDivRight_text" id="bar">复制图片到剪切板可直接粘贴发送微信群</div> <div id="wechat-copy-main"> <img class='' src='//dev-api.yy.ibetwo.com/upload/2019/05/09/15573952783104.png' style='width:50px;' > </div>
这里的讲解:

aaa id 是必须存在的，因为要通过这个id触发函数，虽然这里不是JQuery 0.0

复制的元素的是img，这个img的标签必须被一个div标签包裹着，需要通过，外部元素的id找到里面的Img的内容

wechat-copy-main id 也是必须存在的，这里会通过getElementById，找到img

img的地址，一定要去掉 http:

clickCopy_b(){ var a = document.getElementById("wechat-copy-main"); console.log(a); this.copyFunction(a, "#aaa"); }, copyFunction(t, a){ let _this = this; var e = new Clipboard(a, { target: function () { return console.log(t, a), t } }); e.on("success", function (t) { _this.$message({ message: '复制成功', type: 'success' }); t.clearSelection() }), e.on("error", function (t) { // console.log('复制失败'); _this.$message({ message: '复制失败', type: 'error' }); t.clearSelection() }) },
这样就轻松实现了，在pc端，通过一键点击就可以复制一张图片到粘贴板上
并能直接copy到微信的对话中
2.3测试

通过 Chrome 浏览器测试 （ Windows ）

通过 搜狗 浏览器测试 （ Windows ）

通过 IE 11 浏览器测试 （ Windows ）

同样的方式也可以使用原生Jquery来实现

这里附带源码地址

clipboard.js