console
const handleCopyImg =(imgSrc, callback, imgWidth = '100', imgHeight = '100') => {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const img = new Image();
canvas.width = imgWidth;
canvas.height = imgHeight;
img.crossOrigin = 'Anonymous';
img.src = imgSrc;
img.onload = () => {
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
ctx.drawImage(img, 0, 0, imgWidth, imgHeight);
canvas.toBlob(async (blob) => {
console.log(blob);
const data = [
new ClipboardItem({
[blob.type]: blob,
}),
];
await navigator.clipboard.write(data)
.then(
() => {
console.log('Copied to clipboard successfully!');
callback();
},
() => {
console.error('Unable to write to clipboard.');
}
);
});
};
};
$("#copy").click(function(){
console.log(111)
handleCopyImg("https://s1.ax1x.com/2022/05/11/OduIds.png",function(res){
console.log(123)
})
})
<html>
<body>
<div id="iimg">
<img src="https://s1.ax1x.com/2022/05/11/OduIds.png" alt=""></div>
<button id="copy" class="copy" >复制</button>
</body>
</html>
#iimg{
width: 100px;
height: 60px;
}
#iimg img{
width: 100%;
}