js实现复制图片到剪切板

前端开发，需要实现把图片复制到剪切板的功能，具体实现方式如下所示：


const copyImageToClipboard = async function(imageUrl) {
    // 创建一个Image对象
    const img = new Image();
    img.src = imageUrl;
    // 等待图片加载完成
    await img.decode();
    // 创建一个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浏览器测试都无法复制，有啥好的解决办法也欢迎评论下方解答

最后编辑于：2024.06.13 18:36:38