前端開發(fā)，需要實現把圖片復制到剪切板的功能，具體實現方式如下所示：

const copyImageToClipboard = async function(imageUrl) {
    // 創(chuàng)建一個Image對象
    const img = new Image();
    img.src = imageUrl;
    // 等待圖片加載完成
    await img.decode();
    // 創(chuàng)建一個Canvas元素
    const canvas = document.createElement('canvas');
    canvas.width = img.width;
    canvas.height = img.height;
    const ctx = canvas.getContext('2d');
    // 在Canvas上繪制圖片
    ctx.drawImage(img, 0, 0);
    // 將Canvas內容轉換為DataURL
    const dataURL = canvas.toDataURL('image/png');
    // 將DataURL復制到剪切板
    await navigator.clipboard.write([
        new ClipboardItem({
        [dataURL.match(/^data:(.+?);/)[1]]: await fetch(dataURL).then(r => r.blob())
        })
    ])
    .then(() =>{
        Message.success('圖片已復制到剪切板') 
    })
    .catch(err => console.error('復制失敗:', err));
}

注意，網絡圖片無法復制到剪切板，所以需要轉換下

html2canvas(this.$refs.codeDom,{
    backgroundColor: "#ffffff",
    logging: false,
    allowTaint: true,  //開啟跨域
    useCORS: true,
    scale:2,
    width: this.$refs.codeDom.offsetWidth,
    height: this.$refs.codeDom.offsetHeight
    }).then(canvas => {
        var context = canvas.getContext('2d');
        context.mozImageSmoothingEnabled = false;
        context.webkitImageSmoothingEnabled = false;
        context.msImageSmoothingEnabled = false;
        context.imageSmoothingEnabled = false;
        let img_png_src = canvas.toDataURL("image/png"); //將canvas保存為圖片
        let imgData = img_png_src.replace(imgType('png'), 'image/octet-stream');                               
        copyImageToClipboard(imgData); 
        let filename = '分享圖' + '.png' //下載圖片的文件名                 
        saveImage(imgData,filename)                     
});

// 把圖片轉為二進制blob再進行保存

export const saveImage = function(data, fileName){
    const userAgent = navigator.userAgent.toLowerCase(); 
    if(/micromessenger/.test(userAgent)){    
        UploadImage.success(data);  
    }else{
        let dataBlob = dataURLtoBlob(data);  
        saveFile(URL.createObjectURL(dataBlob), fileName);
    }   
}

注意： 目前測試chrome瀏覽器和微信電腦端瀏覽器是可以實現復制圖片，但是在firefox以及safari瀏覽器測試都無法復制，有啥好的解決辦法也歡迎評論下方解答