<html lang="en">
<head>
<meta charset="UTF-8">
<title>复制</title>
</head>
<body>
<img id="img" width="200" height="200" src="https://img2.baidu.com/it/u=668613382,2066490799&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1659114000&t=05de12239d16f24652090b5d1df4bbfe" alt="">
<div class="copy" onclick="copyHandle()">点我复制图片</div>
<script>
// 复制图片，支持jpg，png
function copyHandle() {
let oImg =document.getElementById('img')
let url = oImg.src;
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 function 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('复制失败')
}
}
</script>
</body>
</html>
标签：canvas,url,image,js,点击,复制,blob,图片 From： https://www.cnblogs.com/xiaoliu66007/p/17184062.html