1.首先檢查服務器端返回的圖片是否允許跨域

2.img標簽設置crossorigin="anonymous" 屬性

場景：長按保存圖片

貼代碼：

<!-- canvas -->
<div id="share_canvas"></div>
<a id="saveImg"></a>

別忘了引入(這里使用了html2canvas插件喝检，這兩個js可以在網(wǎng)上下載）

<script src="js/jquery-3.5.1.js"></script>
<script src="js/html2canvas.js"></script>

// 長按保存圖片
            var timeout;
            $("#share_code").on({
                touchstart: function(e) {
                    timeout = setTimeout(function() {
                        var url = "https://uoss.wujicat.com/image/2021/02/c8945bc442ed42a624c3a11c0ad36258.jpg";
                        var canvas = document.createElement('canvas'),
                            ctx = canvas.getContext('2d'),
                            img = new Image();
                        img.crossOrigin = 'Anonymous'; // 設置image對象可跨域請求
                        img.src = url + "?timeStamp=" + new Date().getTime(); //解決緩存引起訪問失敗需要添加時間戳

                        img.onload = function() {
                            canvas.height = img.height;
                            canvas.width = img.width;
                            ctx.drawImage(img, 0, 0);
                            var dataURL = canvas.toDataURL('image/jpeg');

                            console.log(dataURL)
                            $("#img1").attr("src", dataURL)

                            // 賦值完成，生成圖片
                            var myDate = new Date();
                            new html2canvas(document.getElementById('share_canvas'), {
                                allowTaint: true,
                                useCORS: true
                            }).then(canvas => {
                                var triggerDownload = $("#saveImg").attr("href", dataURL).attr("download", dateFtt(
                                        "yyyy-MM-dd hh:mm:ss", myDate) +
                                    '.png');
                                console.log(triggerDownload)
                                triggerDownload[0].click(); //模擬點擊！
                            });
                        };
                    }, 2000);
                },
                touchmove: function() {
                    clearTimeout(timeout);
                },
                touchend: function(e) {
                    clearTimeout(timeout);
                },
            });
        });

        //日期格式轉(zhuǎn)化
        function dateFtt(fmt, date) { //author: meizz   
            var o = {
                "M+": date.getMonth() + 1, //月份   
                "d+": date.getDate(), //日   
                "h+": date.getHours(), //小時   
                "m+": date.getMinutes(), //分   
                "s+": date.getSeconds(), //秒   
                "q+": Math.floor((date.getMonth() + 3) / 3), //季度   
                "S": date.getMilliseconds() //毫秒   
            };
            if (/(y+)/.test(fmt))
                fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
            for (var k in o)
                if (new RegExp("(" + k + ")").test(fmt))
                    fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
            return fmt;
        }