<html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta Name ="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div> -- img tag needs crossorigin="anonymous" <img id="copyPicImgId" crossorigin="anonymous" Alt ="" srcset=""> <button </button> </div> <script> copyImg = function () {getImageBase64Data(url). Then (async res => { console.log(res) const data = await fetch(res); const blob = await data.blob(); await navigator.clipboard.write([ new ClipboardItem({ [blob.type]: blob, }), ]) }) } getImageBase64Data = function (imgSrc) { function getBase64(img) { var canvas = document.createElement("canvas"); canvas.width = img.width; canvas.height = img.height; var ctx = canvas.getContext("2d"); // Add background white ctx.fillStyle = "# FFFFFF "; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.drawImage(img, 0, 0, canvas.width, canvas.height); var dataURL = canvas.toDataURL('image/png'); return dataURL; } var p = new Promise(function (resolve, reject) { var image = new Image(); // Image server needs to allow cross-domain image.crossOrigin = 'Anonymous'; image.src = imgSrc; image.onload = function () { var imageBase64Data = getBase64(image); resolve(imageBase64Data); }}); return p; } var url = 'https://tse1-mm.cn.bing.net/th/id/OIP-C.4F-Geq1Q55-JtLFffSTzLwHaEK?w=331&h=187&c=7&o=5&pid=1.7' document.getElementById("copyPicImgId").src = url; </script> </body> </html>Copy the code