From 75c3ea4e51b5014ca4fa14816a465282289c3b25 Mon Sep 17 00:00:00 2001 From: zhbhun Date: Sun, 6 Aug 2023 23:54:44 +0800 Subject: [PATCH 1/3] fix: background images should not be blurry in export --- src/render/canvas/canvas-renderer.ts | 23 ++++++++++++++++++----- 1 file changed, 18 insertions(+), 5 deletions(-) diff --git a/src/render/canvas/canvas-renderer.ts b/src/render/canvas/canvas-renderer.ts index 6efb648..efd8a5a 100644 --- a/src/render/canvas/canvas-renderer.ts +++ b/src/render/canvas/canvas-renderer.ts @@ -600,11 +600,24 @@ export class CanvasRenderer extends Renderer { image.height, image.width / image.height ]); - const pattern = this.ctx.createPattern( - this.resizeImage(image, width, height), - 'repeat' - ) as CanvasPattern; - this.renderRepeat(path, pattern, x, y); + // const pattern = this.ctx.createPattern( + // this.resizeImage(image, width, height), + // 'repeat' + // ) as CanvasPattern; + // this.renderRepeat(path, pattern, x, y); + const scaleX = width / image.naturalWidth; + const scaleY = height / image.naturalHeight; + const pattern = this.ctx.createPattern(image, "repeat") as CanvasPattern; + const scaledPath = (path as Vector[]).map((item) => { + item.x = item.x / scaleX; + item.y = item.y / scaleY; + return item; + }); + const scaledOffsetX = x / scaleX; + const scaledOffsetY = y / scaleY; + this.ctx.scale(scaleX, scaleY); + this.renderRepeat(scaledPath, pattern, scaledOffsetX, scaledOffsetY); + this.ctx.scale(1 / scaleX, 1 / scaleY); } } else if (isLinearGradient(backgroundImage)) { const [path, x, y, width, height] = calculateBackgroundRendering(container, index, [null, null, null]); From b6dc446f7d9a5ce14eb6974749391b9eb101a764 Mon Sep 17 00:00:00 2001 From: zhbhun Date: Sun, 6 Aug 2023 23:57:38 +0800 Subject: [PATCH 2/3] style: format js --- src/render/canvas/canvas-renderer.ts | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/src/render/canvas/canvas-renderer.ts b/src/render/canvas/canvas-renderer.ts index efd8a5a..f6c0326 100644 --- a/src/render/canvas/canvas-renderer.ts +++ b/src/render/canvas/canvas-renderer.ts @@ -600,14 +600,9 @@ export class CanvasRenderer extends Renderer { image.height, image.width / image.height ]); - // const pattern = this.ctx.createPattern( - // this.resizeImage(image, width, height), - // 'repeat' - // ) as CanvasPattern; - // this.renderRepeat(path, pattern, x, y); const scaleX = width / image.naturalWidth; const scaleY = height / image.naturalHeight; - const pattern = this.ctx.createPattern(image, "repeat") as CanvasPattern; + const pattern = this.ctx.createPattern(image, 'repeat') as CanvasPattern; const scaledPath = (path as Vector[]).map((item) => { item.x = item.x / scaleX; item.y = item.y / scaleY; From 6879fdc8fcd1314652dcb8ac03cde862f4c9a530 Mon Sep 17 00:00:00 2001 From: zhbhun Date: Mon, 7 Aug 2023 10:06:57 +0800 Subject: [PATCH 3/3] fix: using save and restore --- src/render/canvas/canvas-renderer.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/render/canvas/canvas-renderer.ts b/src/render/canvas/canvas-renderer.ts index f6c0326..481a3ad 100644 --- a/src/render/canvas/canvas-renderer.ts +++ b/src/render/canvas/canvas-renderer.ts @@ -610,9 +610,10 @@ export class CanvasRenderer extends Renderer { }); const scaledOffsetX = x / scaleX; const scaledOffsetY = y / scaleY; + this.ctx.save(); this.ctx.scale(scaleX, scaleY); this.renderRepeat(scaledPath, pattern, scaledOffsetX, scaledOffsetY); - this.ctx.scale(1 / scaleX, 1 / scaleY); + this.ctx.restore(); } } else if (isLinearGradient(backgroundImage)) { const [path, x, y, width, height] = calculateBackgroundRendering(container, index, [null, null, null]);