niklasvh / html2canvas

Screenshots with JavaScript
https://html2canvas.hertzen.com/
MIT License
30.1k stars 4.75k forks source link

html2canvas "Error loading image" #3082

Open B-MNSN opened 1 year ago

B-MNSN commented 1 year ago

It can download but the image in the downloaded image doesn't the image.

image image

ER-Tiylor commented 1 year ago

Take a look at this issue :https://github.com/niklasvh/html2canvas/issues/2609

zhuliminl commented 3 months ago

this.context.logger.debug("Added image " + key.substring(0, 256)); return [4 /yield/, new Promise(function (resolve, reject) { var img = new Image(); img.onload = function () { return resolve(img); }; img.onerror = reject; //ios safari 10.3 taints canvas with data urls unless crossOrigin is set to anonymous if (isInlineBase64Image(src) || useCORS) { img.crossOrigin = 'anonymous'; }

                            // img.src = src;
                            // ----------------------------------------------------------------------------
                            // 禁用缓存。否则浏览器会默认从内存去取,导致触发同源策略

                            img.src = src + `?date=${Date.now()}`
                           // ----------------------------------------------------------------------------
                            if (img.complete === true) {
                                // Inline XML images may fail to parse, throwing an Error later on
                                setTimeout(function () { return resolve(img); }, 500);
                            }
                            if (_this._options.imageTimeout > 0) {
                                setTimeout(function () { return reject("Timed out (" + _this._options.imageTimeout + "ms) loading image"); }, _this._options.imageTimeout);
                            }
                        })];
zhuliminl commented 3 months ago

just change img.src = src; to img.src = src + ?date=${Date.now()}. cause browser cache trigger CORS even cors enabled. you could found out by disable cache of your browser.

Macrohoo commented 3 months ago

you can first load img turn to base64 at correct life cycle, then use ref data on img tag

you can around this problem