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

prevent image resolution loss

Browse Source 
render and copy images at the current scale, instead of downscaling, losing resolution, then rescaling them
This commit is contained in:
thesved 2021-10-05 16:52:29 +02:00 committed by GitHub
parent eeda86bd5e
commit 0e4c1c78a7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 14 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -596,16 +596,29 @@ export class CanvasRenderer extends Renderer {
} }
if (image) { if (image) {
const [path, x, y, width, height] = calculateBackgroundRendering(container, index, [ let [path, x, y, width, height] = calculateBackgroundRendering(container, index, [
image.width, image.width,
image.height, image.height,
image.width / image.height image.width / image.height
]); ]);
// prevent image resolution loss: render and copy img at current scale, instead of downscaling then rescaling
// recalculate for null transformation
path = path.map(function(v){v.x = (v.x-this.options.x)*this.options.scale; v.y = (v.y-this.options.y)*this.options.scale; return v});
x = (x - this.options.x) * this.options.scale;
y = (y - this.options.y) * this.options.scale;
width *= this.options.scale;
height *= this.options.scale;
// backup context and change to null transform
this.ctx.save();
this.ctx.setTransform(1, 0, 0, 1, 0, 0);
// draw
const pattern = this.ctx.createPattern( const pattern = this.ctx.createPattern(
this.resizeImage(image, width, height), this.resizeImage(image, width, height),
'repeat' 'repeat'
) as CanvasPattern; ) as CanvasPattern;
this.renderRepeat(path, pattern, x, y); this.renderRepeat(path, pattern, x, y);
// restore context
this.ctx.restore();
} }
} else if (isLinearGradient(backgroundImage)) { } else if (isLinearGradient(backgroundImage)) {
const [path, x, y, width, height] = calculateBackgroundRendering(container, index, [null, null, null]); const [path, x, y, width, height] = calculateBackgroundRendering(container, index, [null, null, null]);