js JavaScript 复制图片到剪贴板（非图片链接）

问题描述

在前端页面中，需要将图片复制到剪贴板，效果是前往微信、QQ 等应用，粘贴图片，能够直接粘贴出图片本身，而不是图片链接。

解决方法

// 复制图片，支持jpg，png，传入图片url即可
function copyJpgToClipboard(url) {
    var canvas = document.createElement('canvas')
    let image = new Image()
    image.setAttribute("crossOrigin", 'Anonymous')
    image.src = url
    image.onload = () => {
        canvas.width = image.width
        canvas.height = image.height 
        canvas.getContext('2d').drawImage(image, 0, 0);
        let url = canvas.toDataURL("image/png") // 转换图片为dataURL，格式为png
        copyImageToClipboardCallback(url)
    }
}

// 从url下载并复制图片，如果是png格式的图片直接调用此方法就能复制成功
async function copyImageToClipboardCallback(url) {
    try {
        const data = await fetch(url);
        const blob = await data.blob();
        await navigator.clipboard.write([
            new window.ClipboardItem({
                [blob.type]: blob
            })
        ]);
        Swal.fire({
            title: '图片复制成功',
            icon: 'success',
            confirmButtonText: '确定',
            timer: 1000
        });
    } catch (err) {
        console.error(err.name, err.message);
        Swal.fire({
            title: '图片复制失败',
            text: err.message,
            icon: 'error',
            confirmButtonText: '确定',
            timer: 1000
        });
    }
}

其中，第二个函数如果传入的是 png 格式的图片，直接调用即可。如果不是，那么要用第一个函数套一层娃。