mirror/html2canvas
1
0
Fork 0
mirror of https://github.com/niklasvh/html2canvas.git synced 2023-08-10 21:13:10 +03:00
Code Issues Projects Releases Wiki Activity

Merge 3d559c79df into 6020386bbe

Browse Source
This commit is contained in:
Yuri Papouski 2022-09-09 14:01:31 +00:00 committed by GitHub
commit 721b36b7eb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 185 additions and 24991 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24946
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

7
src/core/__mocks__/context.ts
View File

@ -9,10 +9,9 @@ export class Context {
constructor() {
this.cache = {
addImage: jest.fn().mockImplementation((src: string): Promise<void> => {
const result = Promise.resolve();
this._cache[src] = result;
return result;
addImage: jest.fn().mockImplementation((src: string): boolean => {
this._cache[src] = Promise.resolve();
return true;
})
};
}

60
src/core/__tests__/cache-storage.ts
View File

@ -125,88 +125,88 @@ describe('cache-storage', () => {
xhr.splice(0, xhr.length);
images.splice(0, images.length);
});
it('addImage adds images to cache', async () => {
it('addImage adds images to cache', () => {
const {cache} = createMockContext('http://example.com', {proxy: null});
await cache.addImage('http://example.com/test.jpg');
await cache.addImage('http://example.com/test2.jpg');
cache.addImage('http://example.com/test.jpg');
cache.addImage('http://example.com/test2.jpg');
deepStrictEqual(images.length, 2);
deepStrictEqual(images[0].src, 'http://example.com/test.jpg');
deepStrictEqual(images[1].src, 'http://example.com/test2.jpg');
});
it('addImage should not add duplicate entries', async () => {
it('addImage should not add duplicate entries', () => {
const {cache} = createMockContext('http://example.com');
await cache.addImage('http://example.com/test.jpg');
await cache.addImage('http://example.com/test.jpg');
cache.addImage('http://example.com/test.jpg');
cache.addImage('http://example.com/test.jpg');
deepStrictEqual(images.length, 1);
deepStrictEqual(images[0].src, 'http://example.com/test.jpg');
});
describe('svg', () => {
it('should add svg images correctly', async () => {
it('should add svg images correctly', () => {
const {cache} = createMockContext('http://example.com');
await cache.addImage('http://example.com/test.svg');
await cache.addImage('http://example.com/test2.svg');
cache.addImage('http://example.com/test.svg');
cache.addImage('http://example.com/test2.svg');
deepStrictEqual(images.length, 2);
deepStrictEqual(images[0].src, 'http://example.com/test.svg');
deepStrictEqual(images[1].src, 'http://example.com/test2.svg');
});
it('should omit svg images if not supported', async () => {
it('should omit svg images if not supported', () => {
setFeatures({SUPPORT_SVG_DRAWING: false});
const {cache} = createMockContext('http://example.com');
await cache.addImage('http://example.com/test.svg');
await cache.addImage('http://example.com/test2.svg');
cache.addImage('http://example.com/test.svg');
cache.addImage('http://example.com/test2.svg');
deepStrictEqual(images.length, 0);
});
});
describe('cross-origin', () => {
it('addImage should not add images it cannot load/render', async () => {
it('addImage should not add images it cannot load/render', () => {
const {cache} = createMockContext('http://example.com', {
proxy: undefined
});
await cache.addImage('http://html2canvas.hertzen.com/test.jpg');
cache.addImage('http://html2canvas.hertzen.com/test.jpg');
deepStrictEqual(images.length, 0);
});
it('addImage should add images if tainting enabled', async () => {
it('addImage should add images if tainting enabled', () => {
const {cache} = createMockContext('http://example.com', {
allowTaint: true,
proxy: undefined
});
await cache.addImage('http://html2canvas.hertzen.com/test.jpg');
cache.addImage('http://html2canvas.hertzen.com/test.jpg');
deepStrictEqual(images.length, 1);
deepStrictEqual(images[0].src, 'http://html2canvas.hertzen.com/test.jpg');
deepStrictEqual(images[0].crossOrigin, undefined);
});
it('addImage should add images if cors enabled', async () => {
it('addImage should add images if cors enabled', () => {
const {cache} = createMockContext('http://example.com', {useCORS: true});
await cache.addImage('http://html2canvas.hertzen.com/test.jpg');
cache.addImage('http://html2canvas.hertzen.com/test.jpg');
deepStrictEqual(images.length, 1);
deepStrictEqual(images[0].src, 'http://html2canvas.hertzen.com/test.jpg');
deepStrictEqual(images[0].crossOrigin, 'anonymous');
});
it('addImage should not add images if cors enabled but not supported', async () => {
it('addImage should not add images if cors enabled but not supported', () => {
setFeatures({SUPPORT_CORS_IMAGES: false});
const {cache} = createMockContext('http://example.com', {
useCORS: true,
proxy: undefined
});
await cache.addImage('http://html2canvas.hertzen.com/test.jpg');
cache.addImage('http://html2canvas.hertzen.com/test.jpg');
deepStrictEqual(images.length, 0);
});
it('addImage should not add images to proxy if cors enabled', async () => {
it('addImage should not add images to proxy if cors enabled', () => {
const {cache} = createMockContext('http://example.com', {useCORS: true});
await cache.addImage('http://html2canvas.hertzen.com/test.jpg');
cache.addImage('http://html2canvas.hertzen.com/test.jpg');
deepStrictEqual(images.length, 1);
deepStrictEqual(images[0].src, 'http://html2canvas.hertzen.com/test.jpg');
deepStrictEqual(images[0].crossOrigin, 'anonymous');
@ -214,7 +214,7 @@ describe('cache-storage', () => {
it('addImage should use proxy ', async () => {
const {cache} = createMockContext('http://example.com');
await cache.addImage('http://html2canvas.hertzen.com/test.jpg');
cache.addImage('http://html2canvas.hertzen.com/test.jpg');
deepStrictEqual(xhr.length, 1);
deepStrictEqual(
xhr[0].url,
@ -230,7 +230,7 @@ describe('cache-storage', () => {
const {cache} = createMockContext('http://example.com', {
imageTimeout: 10
});
await cache.addImage('http://html2canvas.hertzen.com/test.jpg');
cache.addImage('http://html2canvas.hertzen.com/test.jpg');
deepStrictEqual(xhr.length, 1);
deepStrictEqual(
@ -250,7 +250,7 @@ describe('cache-storage', () => {
it('match should return cache entry', async () => {
const {cache} = createMockContext('http://example.com');
await cache.addImage('http://example.com/test.jpg');
cache.addImage('http://example.com/test.jpg');
if (images[0].onload) {
images[0].onload();
@ -270,4 +270,14 @@ describe('cache-storage', () => {
fail('Expected result to timeout');
} catch (e) {}
});
it('addImage should add an inlined image', async () => {
const {cache} = createMockContext('http://example.com', {imageTimeout: 10});
const inlinedImg = `data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub/
/ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcpp
V0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7`;
cache.addImage(inlinedImg);
await cache.match(inlinedImg);
});
});

17
src/core/cache-storage.ts
View File

@ -39,20 +39,15 @@ export class Cache {
constructor(private readonly context: Context, private readonly _options: ResourceOptions) {}
addImage(src: string): Promise<void> {
const result = Promise.resolve();
if (this.has(src)) {
return result;
}
addImage(src: string): boolean {
if (this.has(src)) return true;
if (isBlobImage(src) || isRenderable(src)) {
(this._cache[src] = this.loadImage(src)).catch(() => {
// prevent unhandled rejection
});
return result;
return true;
}
return result;
return false;
}
// eslint-disable-next-line @typescript-eslint/no-explicit-any
@ -98,7 +93,9 @@ export class Cache {
img.crossOrigin = 'anonymous';
}
img.src = src;
if (img.complete === true) {
if (/^data:/.test(src)) {
resolve(img);
} else if (img.complete === true) {
// Inline XML images may fail to parse, throwing an Error later on
setTimeout(() => resolve(img), 500);
}

34
src/core/features.ts
View File

@ -1,4 +1,5 @@
import {fromCodePoint, toCodePoints} from 'css-line-break';
import {isSVGForeignObjectElement} from '../dom/node-parser';
const testRangeBounds = (document: Document) => {
const TEST_HEIGHT = 123;
@ -156,15 +157,38 @@ export const createForeignObjectSVG = (
return svg;
};
export const loadSerializedSVG = (svg: Node): Promise<HTMLImageElement> => {
return new Promise((resolve, reject) => {
export const serializeSvg = (svg: SVGSVGElement | SVGForeignObjectElement, encoding = ''): string => {
const svgPrefix = 'data:image/svg+xml';
const selializedSvg = new XMLSerializer().serializeToString(svg);
const encodedSvg = encoding === 'base64' ? btoa(selializedSvg) : encodeURIComponent(selializedSvg);
return `${svgPrefix}${encoding && `;${encoding}`},${encodedSvg}`;
};
const INLINE_BASE64 = /^data:image\/.*;base64,/i;
export const deserializeSvg = (svg: string): SVGSVGElement | SVGForeignObjectElement => {
const encodedSvg = INLINE_BASE64.test(svg) ? atob(svg) : decodeURIComponent(svg);
const domParser = new DOMParser();
const document = domParser.parseFromString(encodedSvg, 'image/svg+xml');
const parserError = document.querySelector('parsererror');
if (parserError) {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore: Expected 0-1 arguments, but got 2.
throw new Error('Deserialisation failed', {cause: parserError});
}
const {documentElement} = document;
const firstSvgChild = documentElement.firstElementChild;
return firstSvgChild && isSVGForeignObjectElement(firstSvgChild)
? (documentElement as unknown as SVGForeignObjectElement)
: (documentElement as unknown as SVGSVGElement);
};
export const loadSerializedSVG = (svg: SVGSVGElement | SVGForeignObjectElement): Promise<HTMLImageElement> =>
new Promise((resolve, reject) => {
const img = new Image();
img.onload = () => resolve(img);
img.onerror = reject;
img.src = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(new XMLSerializer().serializeToString(svg))}`;
img.src = serializeSvg(svg, 'charset=utf-8');
});
};
export const FEATURES = {
get SUPPORT_RANGE_BOUNDS(): boolean {

1
src/dom/node-parser.ts
View File

@ -122,6 +122,7 @@ export const isOLElement = (node: Element): node is HTMLOListElement => node.tag
export const isInputElement = (node: Element): node is HTMLInputElement => node.tagName === 'INPUT';
export const isHTMLElement = (node: Element): node is HTMLHtmlElement => node.tagName === 'HTML';
export const isSVGElement = (node: Element): node is SVGSVGElement => node.tagName === 'svg';
export const isSVGForeignObjectElement = (node: Element): node is SVGSVGElement => node.tagName === 'foreignObject';
export const isBodyElement = (node: Element): node is HTMLBodyElement => node.tagName === 'BODY';
export const isCanvasElement = (node: Element): node is HTMLCanvasElement => node.tagName === 'CANVAS';
export const isVideoElement = (node: Element): node is HTMLVideoElement => node.tagName === 'VIDEO';

4
src/dom/replaced-elements/iframe-element-container.ts
View File

@ -13,8 +13,8 @@ export class IFrameElementContainer extends ElementContainer {
constructor(context: Context, iframe: HTMLIFrameElement) {
super(context, iframe);
this.src = iframe.src;
this.width = parseInt(iframe.width, 10) || 0;
this.height = parseInt(iframe.height, 10) || 0;
this.width = parseInt(iframe.width, 10) || iframe.offsetWidth || 0;
this.height = parseInt(iframe.height, 10) || iframe.offsetHeight || 0;
this.backgroundColor = this.styles.backgroundColor;
try {
if (

42
src/dom/replaced-elements/image-element-container.ts
View File

@ -1,16 +1,50 @@
import {ElementContainer} from '../element-container';
import {Context} from '../../core/context';
import {serializeSvg, deserializeSvg} from '../../core/features';
export class ImageElementContainer extends ElementContainer {
src: string;
intrinsicWidth: number;
intrinsicHeight: number;
intrinsicWidth: number = 0;
intrinsicHeight: number = 0;
isSVG: boolean;
private static SVG = /\.svg(?:\?.*)?$/i;
private static INLINED_SVG = /^data:image\/svg\+xml/i;
private static IS_FIRE_FOX = /firefox/i.test(navigator?.userAgent);
constructor(context: Context, img: HTMLImageElement) {
super(context, img);
this.src = img.currentSrc || img.src;
this.intrinsicWidth = img.naturalWidth;
this.intrinsicHeight = img.naturalHeight;
this.isSVG = this.isSvg() || this.isInlinedSvg();
this.context.cache.addImage(this.src);
}
private isInlinedSvg = () => ImageElementContainer.INLINED_SVG.test(this.src);
private isSvg = () => ImageElementContainer.SVG.test(this.src);
public setup(img: HTMLImageElement) {
if (this.isSvg()) return;
if (this.isInlinedSvg()) {
const [, inlinedSvg] = this.src.split(',');
const svgElement = deserializeSvg(inlinedSvg);
const {
width: {baseVal: widthBaseVal},
height: {baseVal: heightBaseVal}
} = svgElement;
if (ImageElementContainer.IS_FIRE_FOX) {
widthBaseVal.valueAsString = widthBaseVal.value.toString();
heightBaseVal.valueAsString = heightBaseVal.value.toString();
img.src = serializeSvg(svgElement, 'base64');
}
this.intrinsicWidth = widthBaseVal.value;
this.intrinsicHeight = heightBaseVal.value;
return;
}
this.intrinsicWidth = img.naturalWidth;
this.intrinsicHeight = img.naturalHeight;
}
}

5
src/dom/replaced-elements/svg-element-container.ts
View File

@ -1,6 +1,7 @@
import {ElementContainer} from '../element-container';
import {parseBounds} from '../../css/layout/bounds';
import {Context} from '../../core/context';
import {serializeSvg} from '../../core/features';
export class SVGElementContainer extends ElementContainer {
svg: string;
@ -9,12 +10,12 @@ export class SVGElementContainer extends ElementContainer {
constructor(context: Context, img: SVGSVGElement) {
super(context, img);
const s = new XMLSerializer();
const bounds = parseBounds(context, img);
img.setAttribute('width', `${bounds.width}px`);
img.setAttribute('height', `${bounds.height}px`);
this.svg = `data:image/svg+xml,${encodeURIComponent(s.serializeToString(img))}`;
this.svg = serializeSvg(img);
this.intrinsicWidth = img.width.baseVal.value;
this.intrinsicHeight = img.height.baseVal.value;

48
src/render/canvas/canvas-renderer.ts
View File

@ -270,24 +270,35 @@ export class CanvasRenderer extends Renderer {
curves: BoundCurves,
image: HTMLImageElement | HTMLCanvasElement
): void {
if (image && container.intrinsicWidth > 0 && container.intrinsicHeight > 0) {
const box = contentBox(container);
const path = calculatePaddingBoxPath(curves);
this.path(path);
this.ctx.save();
this.ctx.clip();
this.ctx.drawImage(
image,
0,
0,
container.intrinsicWidth,
container.intrinsicHeight,
box.left,
box.top,
box.width,
box.height
);
this.ctx.restore();
if (image) {
const isContainerWSizes = container.intrinsicWidth > 0 && container.intrinsicHeight > 0;
const isSVGContainer =
container instanceof SVGElementContainer ||
(container instanceof ImageElementContainer && container.isSVG);
if (isContainerWSizes || isSVGContainer) {
const box = contentBox(container);
const path = calculatePaddingBoxPath(curves);
this.path(path);
this.ctx.save();
this.ctx.clip();
if (isContainerWSizes) {
this.ctx.drawImage(
image,
0,
0,
container.intrinsicWidth,
container.intrinsicHeight,
box.left,
box.top,
box.width,
box.height
);
} else {
// As usual it won't work in FF. https://bugzilla.mozilla.org/show_bug.cgi?id=700533
this.ctx.drawImage(image, box.left, box.top, box.width, box.height);
}
this.ctx.restore();
}
}
}
@ -303,6 +314,7 @@ export class CanvasRenderer extends Renderer {
if (container instanceof ImageElementContainer) {
try {
const image = await this.context.cache.match(container.src);
container.setup(image);
this.renderReplacedElement(container, curves, image);
} catch (e) {
this.context.logger.error(`Error loading image ${container.src}`);

12
src/render/canvas/foreignobject-renderer.ts
View File

@ -1,5 +1,5 @@
import {RenderConfigurations} from './canvas-renderer';
import {createForeignObjectSVG} from '../../core/features';
import {createForeignObjectSVG, loadSerializedSVG} from '../../core/features';
import {asString} from '../../css/types/color';
import {Renderer} from '../renderer';
import {Context} from '../../core/context';
@ -48,13 +48,3 @@ export class ForeignObjectRenderer extends Renderer {
}
}
export const loadSerializedSVG = (svg: Node): Promise<HTMLImageElement> =>
new Promise((resolve, reject) => {
const img = new Image();
img.onload = () => {
resolve(img);
};
img.onerror = reject;
img.src = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(new XMLSerializer().serializeToString(svg))}`;
});