JS复制图片功能 canvas.toBlob img clipboard

        $(".btn-copy-qrcode-image").click(function(e) {
            //复制图片功能
            var img = $('#' + $(this).data('target'))[0]   //tag: img
            var canvas = document.createElement('canvas')
            canvas.width = img.naturalWidth
            canvas.height = img.naturalHeight
            var ctx = canvas.getContext('2d');
            ctx.drawImage(img, 0, 0)
            canvas.toBlob(async blob => {
                const data = [
                    new ClipboardItem({
                        [blob.type]: blob,
                    }),
                ];
                await navigator.clipboard.write(data)
                    .then(
                        () => {
                            simpleDialog({
                                msg: '复制成功'
                            })
                        },
                        () => {
                            simpleDialog({
                                msg: '复制失败，请右键选择【复制图像】'
                            })
                        }
                    );
            });
        })

toBlob报错
图片跨域问题，img元素加上这个属性 crossorigin="anonymous"

Failed to execute 'toBlob' on 'HTMLCanvasElement': Tainted canvases may not be exported...

版权属于：Joyber

本文链接：https://blog.qqvbc.com/default/1072.html

转载时须注明出处及本声明