prevent image resolution loss

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

View File

@ -596,16 +596,29 @@ export class CanvasRenderer extends Renderer {
}
if (image) {
const [path, x, y, width, height] = calculateBackgroundRendering(container, index, [
let [path, x, y, width, height] = calculateBackgroundRendering(container, index, [
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(
this.resizeImage(image, width, height),
'repeat'
) as CanvasPattern;
this.renderRepeat(path, pattern, x, y);
// restore context
this.ctx.restore();
}
} else if (isLinearGradient(backgroundImage)) {
const [path, x, y, width, height] = calculateBackgroundRendering(container, index, [null, null, null]);