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: Ensure resizeImage's canvas has at least 1px of width and height (#2409)

Browse Source 
* ensure resizeImage canvas has > 0 width, height

* add tests for sliver background images
This commit is contained in:
Chang Wang 2021-07-04 01:40:25 -04:00 committed by GitHub
parent b09ee30dae
commit bb9237155c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 9 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -541,8 +541,8 @@ export class CanvasRenderer {
} }
const canvas = (this.canvas.ownerDocument as Document).createElement('canvas'); const canvas = (this.canvas.ownerDocument as Document).createElement('canvas');
canvas.width = width; canvas.width = Math.max(1, width);
canvas.height = 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, image.width, image.height, 0, 0, width, height);
return canvas; return canvas;

BIN
tests/assets/bg-sliver.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 190 B

7
tests/reftests/background/size.html
View File

@ -9,6 +9,10 @@
display: block; display: block;
background:url("../../assets/image.jpg") center center; background:url("../../assets/image.jpg") center center;
} }
.sliver div {
background:url("../../assets/bg-sliver.png") center center;
background-size: 650px auto;
}
.vertical { .vertical {
float: right; float: right;
@ -57,5 +61,8 @@
<div style='background-size: auto;'></div> <div style='background-size: auto;'></div>
</div> </div>
<div class="container" style="padding: 10px; background-size: contain; background-origin: content-box; background-clip: content-box"></div> <div class="container" style="padding: 10px; background-size: contain; background-origin: content-box; background-clip: content-box"></div>
<div class="sliver">
<div></div>
</div>
</body> </body>
</html> </html>