火箭 (^▽^)在vue中使用clipboard.js API 点击复制,把一张图片复制到粘贴板中,然后复制到微信对话框中
此功能可以使用在vue项目中,通过点击触发copy一张图片到粘贴板中,并能够复制到微信对话中
1.#安装clipboard
npm install clipboard --save
正常模式下,clipboard只可以能复制文本
有人提出可以把图片使用canvas生成一遍,然后再转成base64的格式,然后复制base64
这样是一个方式,但是,经过实践,确实不能达到要求
其中有这么介绍
是可以使用iamges的类型进行粘贴复制的
但是文档对使用images的介绍却这样说:
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 的函数会找不到
<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到微信的对话中
通过 Chrome 浏览器测试 ( Windows )
通过 搜狗 浏览器测试 ( Windows )
通过 IE 11 浏览器测试 ( Windows )
同样的方式也可以使用原生Jquery来实现
这里附带源码地址