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

Fix photos and linear gradient for retina

Browse Source
This commit is contained in:
Maxim Gavrilov 2021-04-30 16:20:15 +03:00
parent 7222aba1b4
commit c57ffcb05f
1 changed files with 13 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -525,12 +525,19 @@ export class CanvasRenderer {
renderRepeat(path: Path[], pattern: CanvasPattern | CanvasGradient, offsetX: number, offsetY: number) { renderRepeat(path: Path[], pattern: CanvasPattern | CanvasGradient, offsetX: number, offsetY: number) {
this.path(path); this.path(path);
this.ctx.fillStyle = pattern; this.ctx.fillStyle = pattern;
this.ctx.save();
this.ctx.translate(offsetX, offsetY); this.ctx.translate(offsetX, offsetY);
if (this.options.scale) {
this.ctx.scale(1 / this.options.scale, 1 / this.options.scale);
}
this.ctx.fill(); this.ctx.fill();
this.ctx.translate(-offsetX, -offsetY); this.ctx.restore();
} }
resizeImage(image: HTMLImageElement, width: number, height: number): HTMLCanvasElement | HTMLImageElement { resizeImage(image: HTMLImageElement, width: number, height: number): HTMLCanvasElement | HTMLImageElement {
width *= this.options.scale || 1;
height *= this.options.scale || 1;
if (image.width === width && image.height === height) { if (image.width === width && image.height === height) {
return image; return image;
} }
@ -568,13 +575,17 @@ export class CanvasRenderer {
this.renderRepeat(path, pattern, x, y); this.renderRepeat(path, pattern, x, y);
} }
} else if (isLinearGradient(backgroundImage)) { } else if (isLinearGradient(backgroundImage)) {
const [path, x, y, width, height] = calculateBackgroundRendering(container, index, [null, null, null]); let [path, x, y, width, height] = calculateBackgroundRendering(container, index, [null, null, null]);
const [lineLength, x0, x1, y0, y1] = calculateGradientDirection(backgroundImage.angle, width, height); const [lineLength, x0, x1, y0, y1] = calculateGradientDirection(backgroundImage.angle, width, height);
width *= this.options.scale || 1;
height *= this.options.scale || 1;
const canvas = document.createElement('canvas'); const canvas = document.createElement('canvas');
canvas.width = width; canvas.width = width;
canvas.height = height; canvas.height = height;
const ctx = canvas.getContext('2d') as CanvasRenderingContext2D; const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
ctx.scale(this.options.scale || 1, this.options.scale || 1);
const gradient = ctx.createLinearGradient(x0, y0, x1, y1); const gradient = ctx.createLinearGradient(x0, y0, x1, y1);
processColorStops(backgroundImage.stops, lineLength).forEach(colorStop => processColorStops(backgroundImage.stops, lineLength).forEach(colorStop =>