js实现图片复制,可以粘贴到微信聊天框

1,417 阅读1分钟
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>
        <!-- img标签需要添加 crossorigin="anonymous" ,否则会导致js取到没有开启跨域的<img>标签图片缓存导致canvas绘画失败-->
        <img id="copyPicImgId" crossorigin="anonymous" alt="" srcset="">
        <button onclick="copyImg()">复制图片</button>
    </div>
    <script>

        copyImg = function () {
            getImageBase64Data(url).then(async res => {
                console.log(res)
                const data = await fetch(res);
                const blob = await data.blob();
                await navigator.clipboard.write([
                    new ClipboardItem({
                        [blob.type]: blob,
                    }),
                ])
            })
        }

        getImageBase64Data = function (imgSrc) {
            function getBase64(img) {
                var canvas = document.createElement("canvas");
                canvas.width = img.width;
                canvas.height = img.height;

                var ctx = canvas.getContext("2d");
                //默认png背景透明,添加背景白色
                ctx.fillStyle = "#ffffff";
                ctx.fillRect(0, 0, canvas.width, canvas.height);
                ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
                var dataURL = canvas.toDataURL('image/png');
                return dataURL;
            }

            var p = new Promise(function (resolve, reject) {
                var image = new Image();
                // 图片服务器需要允许跨域
                image.crossOrigin = 'Anonymous';
                image.src = imgSrc;

                image.onload = function () {

                    var imageBase64Data = getBase64(image);

                    resolve(imageBase64Data);
                }
            });
            return p;
        }
        var url = 'https://tse1-mm.cn.bing.net/th/id/OIP-C.4F-Geq1Q55-JtLFffSTzLwHaEK?w=331&h=187&c=7&o=5&pid=1.7'
        document.getElementById("copyPicImgId").src = url;
    </script>
</body>

</html>