javaScript实现图片复制

场景：

点击复制按钮，复制图片，可以粘贴在别处（比如微信，钉钉）

其实就是鼠标右键图片，点击复制图片的简化操作，两步变一步。

话不多说直接上代码

copyImage(imageUrl) {
    // 创建canvas
    const canvas = document.createElement('canvas')
    const ctx = canvas.getContext('2d')

    const img = new Image()
    // 告诉浏览器在加载图片时要以匿名方式进行跨域请求
    img.crossOrigin = 'Anonymous'

    let _this = this
    img.onload = function () {
        canvas.width = img.width
        canvas.height = img.height
        ctx?.drawImage(img, 0, 0)

        canvas.toBlob(blob => {
            navigator.clipboard.write([
                new ClipboardItem({ 'image/png': blob })
            ]).then(() => {
                _this.$message.success('Copy successfully')
            }).catch(error => {
                console.log('error: ', error);
            })
        }, 'image/png')
    }
    img.src = imageUrl
}

使用方式

    const imgEl = document.querySelector('.imageEl')
    const imgUrl = imgEl.src
    copyImage(imgUrl)

注意点: navigator.clipboard 只在安全网络下可用（https），http下是undefined，需要做特殊处理

copyPhoto(photo) {
    // 完整的图片路径 image.src
    const imgUrl = config.ossPrefix + photo.filePath
    let _this = this

    if (!navigator.clipboard) {
        const textareaEl = document.createElement('textarea')
        textareaEl.value = imgUrl
        document.body.appendChild(textareaEl)

        textareaEl.select()

        document.execCommand('copy')
        document.body.removeChild(textareaEl)
        _this.$message.success('Copy successfully')
        return
    }

    // 创建canvas
    const canvas = document.createElement('canvas')
    const ctx = canvas.getContext('2d')

    const img = new Image()
    img.crossOrigin = 'Anonymous'

    img.onload = function () {
        canvas.width = img.width
        canvas.height = img.height
        ctx?.drawImage(img, 0, 0)

        canvas.toBlob(blob => {
            //@ts-ignore
            navigator.clipboard.write([
                //@ts-ignore
                new ClipboardItem({ 'image/png': blob! })
            ]).then(() => {
                _this.$message.success('Copy successfully')
            }).catch(error => {
                console.log('error: ', error);
            })
        }, 'image/png')
    }
    img.src = imgUrl
}