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: Some svg image sizes are drawn incorrectly

Browse Source
This commit is contained in:
ppchart 2022-10-19 15:03:48 +08:00
parent 6020386bbe
commit e499811571
3 changed files with 63 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -276,17 +276,7 @@ export class CanvasRenderer extends Renderer {
this.path(path); this.path(path);
this.ctx.save(); this.ctx.save();
this.ctx.clip(); this.ctx.clip();
this.ctx.drawImage( this.ctx.drawImage(image, box.left, box.top, box.width, box.height);
image,
0,
0,
container.intrinsicWidth,
container.intrinsicHeight,
box.left,
box.top,
box.width,
box.height
);
this.ctx.restore(); this.ctx.restore();
} }
} }
@ -568,8 +558,13 @@ export class CanvasRenderer extends Renderer {
this.ctx.translate(-offsetX, -offsetY); this.ctx.translate(-offsetX, -offsetY);
} }
resizeImage(image: HTMLImageElement, width: number, height: number): HTMLCanvasElement | HTMLImageElement { resizeImage(
if (image.width === width && image.height === height) { container: ElementContainer,
image: HTMLImageElement,
width: number,
height: number
): HTMLCanvasElement | HTMLImageElement {
if (container instanceof ImageElementContainer && image.width === width && image.height === height) {
return image; return image;
} }
@ -578,7 +573,7 @@ export class CanvasRenderer extends Renderer {
canvas.width = Math.max(1, width); canvas.width = Math.max(1, width);
canvas.height = Math.max(1, height); canvas.height = Math.max(1, height);
const ctx = canvas.getContext('2d') as CanvasRenderingContext2D; 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; return canvas;
} }
@ -601,7 +596,7 @@ export class CanvasRenderer extends Renderer {
image.width / image.height image.width / image.height
]); ]);
const pattern = this.ctx.createPattern( const pattern = this.ctx.createPattern(
this.resizeImage(image, width, height), this.resizeImage(container, image, width, height),
'repeat' 'repeat'
) as CanvasPattern; ) as CanvasPattern;
this.renderRepeat(path, pattern, x, y); this.renderRepeat(path, pattern, x, y);

42
tests/reftests/images/svg/background.html Normal file
View File

@ -0,0 +1,42 @@
<!DOCTYPE html>
<html>
<head>
<title>Base64 svg</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../../../test.js"></script>
<style>
body {
font-family: Arial;
}
#svg1:before {
content: '';
width: 125px;
height: 150px;
display: inline-block;
background-size: 125px 150px;
background-image: url('data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3OC4zMSA5My44MiIgc3R5bGU9ImJhY2tncm91bmQtY29sb3I6cmVkIj4NCgk8ZGVmcz4NCgkJPHN0eWxlPg0KCQkJLmNscy0xe2ZpbGw6IzEzYTNkNzt9DQoJCTwvc3R5bGU+DQoJPC9kZWZzPg0KCTx0aXRsZT4NCgkJbmV3cy1pY29uLWRqLXVwZGF0ZWQNCgk8L3RpdGxlPg0KCTxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTAsNDYuOTFWMEw1MS42NC4xM2wyLjIxLjU1YzEwLjcxLDIuNjgsMTguNTYsOS41MiwyMi40LDE5LjUxYTM0Ljc2LDM0Ljc2LDAsMCwxLDEuOTMsOC44NmwuMTMsMi4wOUg2Mi43MWwtLjEzLTFhMTYuMzksMTYuMzksMCwwLDAtMy4zMi04LjQsMTYuODIsMTYuODIsMCwwLDAtNy44My01LjQ4bC0xLjY5LS41OC0zNC0uMTJ2NjIuN0gzMS4zNFY5My44MkgwVjQ2LjkxWiIgLz4NCgk8cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik00My4xMiw4Ni4xVjc4LjMybDIuNzktLjE0QTMyLjA2LDMyLjA2LDAsMCwwLDUwLDc3LjczLDE3LjEsMTcuMSwwLDAsMCw2MC45LDY5LjE0YzEuNy0zLjQzLDEuNjQtMi44OSwxLjczLTE1LjIzbC4wOC0xMUg3OC4yN2wtLjE2LDIzLjg3TDc3LjU3LDY5QTMxLjA5LDMxLjA5LDAsMCwxLDY5LDg0LjM2LDMxLjM1LDMxLjM1LDAsMCwxLDU2LjgzLDkyYTI5LjQyLDI5LjQyLDAsMCwxLTEwLDEuNzRsLTMuNzMuMTJWODYuMVoiIC8+DQo8L3N2Zz4NCg==');
}
#svg2:before {
content: '';
width: 64px;
height: 64px;
display: inline-block;
background-size: 64px 64px;
background-image: url('data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3OC4zMSA5My44MiIgc3R5bGU9ImJhY2tncm91bmQtY29sb3I6cmVkIj4NCgk8ZGVmcz4NCgkJPHN0eWxlPg0KCQkJLmNscy0xe2ZpbGw6IzEzYTNkNzt9DQoJCTwvc3R5bGU+DQoJPC9kZWZzPg0KCTx0aXRsZT4NCgkJbmV3cy1pY29uLWRqLXVwZGF0ZWQNCgk8L3RpdGxlPg0KCTxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTAsNDYuOTFWMEw1MS42NC4xM2wyLjIxLjU1YzEwLjcxLDIuNjgsMTguNTYsOS41MiwyMi40LDE5LjUxYTM0Ljc2LDM0Ljc2LDAsMCwxLDEuOTMsOC44NmwuMTMsMi4wOUg2Mi43MWwtLjEzLTFhMTYuMzksMTYuMzksMCwwLDAtMy4zMi04LjQsMTYuODIsMTYuODIsMCwwLDAtNy44My01LjQ4bC0xLjY5LS41OC0zNC0uMTJ2NjIuN0gzMS4zNFY5My44MkgwVjQ2LjkxWiIgLz4NCgk8cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik00My4xMiw4Ni4xVjc4LjMybDIuNzktLjE0QTMyLjA2LDMyLjA2LDAsMCwwLDUwLDc3LjczLDE3LjEsMTcuMSwwLDAsMCw2MC45LDY5LjE0YzEuNy0zLjQzLDEuNjQtMi44OSwxLjczLTE1LjIzbC4wOC0xMUg3OC4yN2wtLjE2LDIzLjg3TDc3LjU3LDY5QTMxLjA5LDMxLjA5LDAsMCwxLDY5LDg0LjM2LDMxLjM1LDMxLjM1LDAsMCwxLDU2LjgzLDkyYTI5LjQyLDI5LjQyLDAsMCwxLTEwLDEuNzRsLTMuNzMuMTJWODYuMVoiIC8+DQo8L3N2Zz4NCg==');
}
</style>
</head>
<body>
<div>
Inline svg1 image(same size as fixed size): <br />
<div id="svg1"></div>
Inline svg2 image(custom size): <br />
<div id="svg2"></div>
</div>
</body>
</html>

15
tests/reftests/images/svg/base64.html
View File

@ -1,5 +1,6 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>Base64 svg</title> <title>Base64 svg</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
@ -10,9 +11,15 @@
} }
</style> </style>
</head> </head>
<body> <body>
<div> <div>
Inline svg image: <br /> Inline svg image: <br />
<img width="200" height="200" src="data:image/svg+xml;base64,PHN2ZyB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjMwNiIgaGVpZ2h0PSIyOTYiPjxkZWZzIGlkPSJkZWZzNCIgLz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTYyLjQ2OTk1LC00NzcuMjg2MykiIGlkPSJsYXllcjEiPjxwYXRoIGQ9Im0gMzE0LjE1NzQ1LDQ4MS42OTU1OCBjIC01OS4yMDA4OSwwLjUzNzc0IC0xMTQuODA5NzksMzYuNzIyMTkgLTEzNy4zMTI1LDk1LjM0Mzc1IC0yOS4zOTEyOSw3Ni41NjY5MyA4LjgzOTMyLDE2Mi40NTI0NiA4NS40MDYyNSwxOTEuODQzNzUgbCAzNC4wMzEyNSwtODguNjg3NSBjIC0yMC4wNjc4LC03LjcxMzU4IC0zNC4zMTI1LC0yNy4xNTMyNCAtMzQuMzEyNSwtNDkuOTM3NSAwLC0yOS41NDcyMyAyMy45NTI3NywtNTMuNSA1My41LC01My41IDI5LjU0NzIzLDAgNTMuNSwyMy45NTI3NyA1My41LDUzLjUgMCwyMi43ODQyNiAtMTQuMjQ0Nyw0Mi4yMjM5MiAtMzQuMzEyNSw0OS45Mzc1IGwgMzQuMDMxMjUsODguNjg3NSBjIDM5LjI5MDg1LC0xNS4wODIzNCA3MC4zMjM5LC00Ni4xMTU0IDg1LjQwNjI1LC04NS40MDYyNSAyOS4zOTEyOSwtNzYuNTY2OTMgLTguODM5MzIsLTE2Mi40ODM3MSAtODUuNDA2MjUsLTE5MS44NzUgLTE3Ljk0NTM3LC02Ljg4ODU5IC0zNi40MDg1MywtMTAuMDcwODcgLTU0LjUzMTI1LC05LjkwNjI1IHoiIGlkPSJwYXRoMjgzMCIgc3R5bGU9ImZpbGw6IzQwYWE1NDtmaWxsLW9wYWNpdHk6MTtzdHJva2U6IzIwNTUyYTtzdHJva2Utd2lkdGg6Ny45OTk5OTk1MjtzdHJva2UtbWl0ZXJsaW1pdDo0O3N0cm9rZS1vcGFjaXR5OjE7c3Ryb2tlLWRhc2hhcnJheTpub25lIiAvPjwvZz48L3N2Zz4=" /></div> <img width="200" height="200"
src="data:image/svg+xml;base64,PHN2ZyB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjMwNiIgaGVpZ2h0PSIyOTYiPjxkZWZzIGlkPSJkZWZzNCIgLz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTYyLjQ2OTk1LC00NzcuMjg2MykiIGlkPSJsYXllcjEiPjxwYXRoIGQ9Im0gMzE0LjE1NzQ1LDQ4MS42OTU1OCBjIC01OS4yMDA4OSwwLjUzNzc0IC0xMTQuODA5NzksMzYuNzIyMTkgLTEzNy4zMTI1LDk1LjM0Mzc1IC0yOS4zOTEyOSw3Ni41NjY5MyA4LjgzOTMyLDE2Mi40NTI0NiA4NS40MDYyNSwxOTEuODQzNzUgbCAzNC4wMzEyNSwtODguNjg3NSBjIC0yMC4wNjc4LC03LjcxMzU4IC0zNC4zMTI1LC0yNy4xNTMyNCAtMzQuMzEyNSwtNDkuOTM3NSAwLC0yOS41NDcyMyAyMy45NTI3NywtNTMuNSA1My41LC01My41IDI5LjU0NzIzLDAgNTMuNSwyMy45NTI3NyA1My41LDUzLjUgMCwyMi43ODQyNiAtMTQuMjQ0Nyw0Mi4yMjM5MiAtMzQuMzEyNSw0OS45Mzc1IGwgMzQuMDMxMjUsODguNjg3NSBjIDM5LjI5MDg1LC0xNS4wODIzNCA3MC4zMjM5LC00Ni4xMTU0IDg1LjQwNjI1LC04NS40MDYyNSAyOS4zOTEyOSwtNzYuNTY2OTMgLTguODM5MzIsLTE2Mi40ODM3MSAtODUuNDA2MjUsLTE5MS44NzUgLTE3Ljk0NTM3LC02Ljg4ODU5IC0zNi40MDg1MywtMTAuMDcwODcgLTU0LjUzMTI1LC05LjkwNjI1IHoiIGlkPSJwYXRoMjgzMCIgc3R5bGU9ImZpbGw6IzQwYWE1NDtmaWxsLW9wYWNpdHk6MTtzdHJva2U6IzIwNTUyYTtzdHJva2Utd2lkdGg6Ny45OTk5OTk1MjtzdHJva2UtbWl0ZXJsaW1pdDo0O3N0cm9rZS1vcGFjaXR5OjE7c3Ryb2tlLWRhc2hhcnJheTpub25lIiAvPjwvZz48L3N2Zz4=" />
<img width="200" height="200"
src="data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3OC4zMSA5My44MiIgc3R5bGU9ImJhY2tncm91bmQtY29sb3I6cmVkIj4NCgk8ZGVmcz4NCgkJPHN0eWxlPg0KCQkJLmNscy0xe2ZpbGw6IzEzYTNkNzt9DQoJCTwvc3R5bGU+DQoJPC9kZWZzPg0KCTx0aXRsZT4NCgkJbmV3cy1pY29uLWRqLXVwZGF0ZWQNCgk8L3RpdGxlPg0KCTxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTAsNDYuOTFWMEw1MS42NC4xM2wyLjIxLjU1YzEwLjcxLDIuNjgsMTguNTYsOS41MiwyMi40LDE5LjUxYTM0Ljc2LDM0Ljc2LDAsMCwxLDEuOTMsOC44NmwuMTMsMi4wOUg2Mi43MWwtLjEzLTFhMTYuMzksMTYuMzksMCwwLDAtMy4zMi04LjQsMTYuODIsMTYuODIsMCwwLDAtNy44My01LjQ4bC0xLjY5LS41OC0zNC0uMTJ2NjIuN0gzMS4zNFY5My44MkgwVjQ2LjkxWiIgLz4NCgk8cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik00My4xMiw4Ni4xVjc4LjMybDIuNzktLjE0QTMyLjA2LDMyLjA2LDAsMCwwLDUwLDc3LjczLDE3LjEsMTcuMSwwLDAsMCw2MC45LDY5LjE0YzEuNy0zLjQzLDEuNjQtMi44OSwxLjczLTE1LjIzbC4wOC0xMUg3OC4yN2wtLjE2LDIzLjg3TDc3LjU3LDY5QTMxLjA5LDMxLjA5LDAsMCwxLDY5LDg0LjM2LDMxLjM1LDMxLjM1LDAsMCwxLDU2LjgzLDkyYTI5LjQyLDI5LjQyLDAsMCwxLTEwLDEuNzRsLTMuNzMuMTJWODYuMVoiIC8+DQo8L3N2Zz4NCg==" />
</div>
</body> </body>
</html>
</html>