fix: image blob rendering

This commit is contained in:
Niklas von Hertzen
2021-07-14 20:21:57 +08:00
committed by GitHub
parent acb4cd24b8
commit 1acdc827a4
4 changed files with 25 additions and 69 deletions

View File

@ -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;
}

View File

@ -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 = <HTMLIFrameElement>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 <img>'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]);
}

View File

@ -32,7 +32,7 @@ if (typeof window !== 'undefined') {
let instanceCount = 1;
const renderElement = async (element: HTMLElement, opts: Partial<Options>): Promise<HTMLCanvasElement> => {
if (typeof element !== 'object') {
if (!element || typeof element !== 'object') {
return Promise.reject('Invalid element provided as first argument');
}
const ownerDocument = element.ownerDocument;