1. 首先将图片链接地址通过canvas转为Base64的格式
convertImgToBase64(url, callback, outputFormat){
var canvas = document.createElement('CANVAS'),
ctx = canvas.getContext('2d'),
img = new Image
img.crossOrigin = 'Anonymous'
img.onload = function(){
canvas.height = img.height
canvas.width = img.width
ctx.drawImage(img,0,0)
var dataURL = canvas.toDataURL(outputFormat || 'image/png')
callback.call(this, dataURL)
canvas = null
}
img.src = url
}
2. 通过navigator.clipboard来实现复制功能
copy(row, index) {
console.log('object', row, index);
let url = '图片链接地址'
this.convertImgToBase64(url, async (base64Img) => {
const data = await fetch(base64Img);
const blob = await data.blob();
if (navigator.clipboard == undefined) {
this.$message.error("请在https协议下操作");
} else {
this.$message({
message: "复制成功",
type: "success",
});
}
await navigator.clipboard.write([
new ClipboardItem({
[blob.type]: blob,
}),
]);
})
}
参考链接
# js 把图片url转化成base64
# 如何将html生成图片并复制到剪切板