From e4998115713518744781e83fc9a59741e560c438 Mon Sep 17 00:00:00 2001 From: ppchart Date: Wed, 19 Oct 2022 15:03:48 +0800 Subject: [PATCH] fix: Some svg image sizes are drawn incorrectly --- src/render/canvas/canvas-renderer.ts | 25 ++++++-------- tests/reftests/images/svg/background.html | 42 +++++++++++++++++++++++ tests/reftests/images/svg/base64.html | 15 +++++--- 3 files changed, 63 insertions(+), 19 deletions(-) create mode 100644 tests/reftests/images/svg/background.html diff --git a/src/render/canvas/canvas-renderer.ts b/src/render/canvas/canvas-renderer.ts index 6efb648..197d290 100644 --- a/src/render/canvas/canvas-renderer.ts +++ b/src/render/canvas/canvas-renderer.ts @@ -276,17 +276,7 @@ export class CanvasRenderer extends Renderer { 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.drawImage(image, box.left, box.top, box.width, box.height); this.ctx.restore(); } } @@ -568,8 +558,13 @@ export class CanvasRenderer extends Renderer { this.ctx.translate(-offsetX, -offsetY); } - resizeImage(image: HTMLImageElement, width: number, height: number): HTMLCanvasElement | HTMLImageElement { - if (image.width === width && image.height === height) { + resizeImage( + container: ElementContainer, + image: HTMLImageElement, + width: number, + height: number + ): HTMLCanvasElement | HTMLImageElement { + if (container instanceof ImageElementContainer && image.width === width && image.height === height) { return image; } @@ -578,7 +573,7 @@ export class CanvasRenderer extends Renderer { canvas.width = Math.max(1, width); canvas.height = Math.max(1, height); const ctx = canvas.getContext('2d') as CanvasRenderingContext2D; - ctx.drawImage(image, 0, 0, image.width, image.height, 0, 0, width, height); + ctx.drawImage(image, 0, 0, width, height); return canvas; } @@ -601,7 +596,7 @@ export class CanvasRenderer extends Renderer { image.width / image.height ]); const pattern = this.ctx.createPattern( - this.resizeImage(image, width, height), + this.resizeImage(container, image, width, height), 'repeat' ) as CanvasPattern; this.renderRepeat(path, pattern, x, y); diff --git a/tests/reftests/images/svg/background.html b/tests/reftests/images/svg/background.html new file mode 100644 index 0000000..88cb1a8 --- /dev/null +++ b/tests/reftests/images/svg/background.html @@ -0,0 +1,42 @@ + + + + + Base64 svg + + + + + + +
+ Inline svg1 image(same size as fixed size):
+
+ + Inline svg2 image(custom size):
+
+
+ + + \ No newline at end of file diff --git a/tests/reftests/images/svg/base64.html b/tests/reftests/images/svg/base64.html index c8f9af6..f9036fd 100644 --- a/tests/reftests/images/svg/base64.html +++ b/tests/reftests/images/svg/base64.html @@ -1,5 +1,6 @@ + Base64 svg @@ -10,9 +11,15 @@ } + -
- Inline svg image:
-
+
+ Inline svg image:
+ + +
- + + \ No newline at end of file