From 1acdc827a4e05933c2f7c9558405c66b7cd82f58 Mon Sep 17 00:00:00 2001 From: Niklas von Hertzen Date: Wed, 14 Jul 2021 20:21:57 +0800 Subject: [PATCH] fix: image blob rendering --- src/core/cache-storage.ts | 10 ++++- src/dom/document-cloner.ts | 68 +------------------------------ src/index.ts | 2 +- tests/reftests/images/images.html | 14 +++++++ 4 files changed, 25 insertions(+), 69 deletions(-) diff --git a/src/core/cache-storage.ts b/src/core/cache-storage.ts index 45895f6..82e1dc0 100644 --- a/src/core/cache-storage.ts +++ b/src/core/cache-storage.ts @@ -108,10 +108,18 @@ export class Cache { const useProxy = !isInlineImage(key) && !isSameOrigin && + !isBlobImage(key) && typeof this._options.proxy === 'string' && FEATURES.SUPPORT_CORS_XHR && !useCORS; - if (!isSameOrigin && this._options.allowTaint === false && !isInlineImage(key) && !useProxy && !useCORS) { + if ( + !isSameOrigin && + this._options.allowTaint === false && + !isInlineImage(key) && + !isBlobImage(key) && + !useProxy && + !useCORS + ) { return; } diff --git a/src/dom/document-cloner.ts b/src/dom/document-cloner.ts index 2bf940d..779ad4b 100644 --- a/src/dom/document-cloner.ts +++ b/src/dom/document-cloner.ts @@ -124,11 +124,7 @@ export class DocumentCloner { if (isCanvasElement(node)) { return this.createCanvasClone(node); } - /* - if (isIFrameElement(node)) { - return this.createIFrameClone(node); - } -*/ + if (isStyleElement(node)) { return this.createStyleClone(node); } @@ -195,67 +191,7 @@ export class DocumentCloner { return clonedCanvas; } - /* - createIFrameClone(iframe: HTMLIFrameElement) { - const tempIframe = iframe.cloneNode(false); - const iframeKey = generateIframeKey(); - tempIframe.setAttribute('data-html2canvas-internal-iframe-key', iframeKey); - const {width, height} = parseBounds(iframe); - - this.resourceLoader.cache[iframeKey] = getIframeDocumentElement(iframe, this.options) - .then(documentElement => { - return this.renderer( - documentElement, - { - allowTaint: this.options.allowTaint, - backgroundColor: '#ffffff', - canvas: null, - imageTimeout: this.options.imageTimeout, - logging: this.options.logging, - proxy: this.options.proxy, - removeContainer: this.options.removeContainer, - scale: this.options.scale, - foreignObjectRendering: this.options.foreignObjectRendering, - useCORS: this.options.useCORS, - target: new CanvasRenderer(), - width, - height, - x: 0, - y: 0, - windowWidth: documentElement.ownerDocument.defaultView.innerWidth, - windowHeight: documentElement.ownerDocument.defaultView.innerHeight, - scrollX: documentElement.ownerDocument.defaultView.pageXOffset, - scrollY: documentElement.ownerDocument.defaultView.pageYOffset - }, - ); - }) - .then( - (canvas: HTMLCanvasElement) => - new Promise((resolve, reject) => { - const iframeCanvas = document.createElement('img'); - iframeCanvas.onload = () => resolve(canvas); - iframeCanvas.onerror = (event) => { - // Empty iframes may result in empty "data:," URLs, which are invalid from the 's point of view - // and instead of `onload` cause `onerror` and unhandled rejection warnings - // https://github.com/niklasvh/html2canvas/issues/1502 - iframeCanvas.src == 'data:,' ? resolve(canvas) : reject(event); - }; - iframeCanvas.src = canvas.toDataURL(); - if (tempIframe.parentNode && iframe.ownerDocument && iframe.ownerDocument.defaultView) { - tempIframe.parentNode.replaceChild( - copyCSSStyles( - iframe.ownerDocument.defaultView.getComputedStyle(iframe), - iframeCanvas - ), - tempIframe - ); - } - }) - ); - return tempIframe; - } -*/ cloneNode(node: Node): Node { if (isTextNode(node)) { return document.createTextNode(node.data); @@ -312,8 +248,6 @@ export class DocumentCloner { copyCSSStyles(style, clone); } - //this.inlineAllImages(clone); - if (node.scrollTop !== 0 || node.scrollLeft !== 0) { this.scrolledElements.push([clone, node.scrollLeft, node.scrollTop]); } diff --git a/src/index.ts b/src/index.ts index 5b5fc8a..c6eb7b0 100644 --- a/src/index.ts +++ b/src/index.ts @@ -32,7 +32,7 @@ if (typeof window !== 'undefined') { let instanceCount = 1; const renderElement = async (element: HTMLElement, opts: Partial): Promise => { - if (typeof element !== 'object') { + if (!element || typeof element !== 'object') { return Promise.reject('Invalid element provided as first argument'); } const ownerDocument = element.ownerDocument; diff --git a/tests/reftests/images/images.html b/tests/reftests/images/images.html index 7456448..e478316 100644 --- a/tests/reftests/images/images.html +++ b/tests/reftests/images/images.html @@ -24,5 +24,19 @@ +