1.调用方法
javascript
<span
@click="copyHandleImg('https://gxxxxyun.com/181bdef14fa.jpg')"
v-if="!!company_info_sub.sub_company_name"
class="copyText"
>复制
</span>
2.封装方法
javascript
//传输图片的url
copyHandleImg(url) {
var canvas = document.createElement("canvas"); // 创建一个画板
let image = new Image();
image.setAttribute("crossOrigin", "Anonymous"); //可能会有跨越问题
image.src = url;
image.onload = () => {
// img加载完成事件
canvas.width = image.width; //设置画板宽度
canvas.height = image.height; //设置画板高度
canvas.getContext("2d").drawImage(image, 0, 0); //加载img到画板
let url = canvas.toDataURL("image/png"); // 转换图片为dataURL,格式为png
this.clipboardImg(url); // 调用复制方法
};
},
// 从url下载并复制图片,如果是png格式的图片直接调用此方法就能复制成功
async clipboardImg(url) {
try {
const data = await fetch(url);
const blob = await data.blob();
await navigator.clipboard.write([
new window.ClipboardItem({
[blob.type]: blob,
}),
]);
alert("复制成功");
} catch (err) {
alert("复制失败");
}
},