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

Merge 13f75e8fb0 into 6020386bbe

Browse Source
This commit is contained in:
TreehouseNorris 2022-12-08 17:11:57 +00:00 committed by GitHub
commit ef2df6bdbc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 34 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -584,6 +584,7 @@ export class CanvasRenderer extends Renderer {
async renderBackgroundImage(container: ElementContainer): Promise<void> {
let index = container.styles.backgroundImage.length - 1;
const repeatTypes = ['repeat', 'no-repeat', 'repeat-x', 'repeat-y'];
for (const backgroundImage of container.styles.backgroundImage.slice(0).reverse()) {
if (backgroundImage.type === CSSImageType.URL) {
let image;
@ -602,7 +603,7 @@ export class CanvasRenderer extends Renderer {
]);
const pattern = this.ctx.createPattern(
this.resizeImage(image, width, height),
'repeat'
repeatTypes[+container.styles.backgroundRepeat || 0]
) as CanvasPattern;
this.renderRepeat(path, pattern, x, y);
}
@ -623,7 +624,10 @@ export class CanvasRenderer extends Renderer {
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, width, height);
if (width > 0 && height > 0) {
const pattern = this.ctx.createPattern(canvas, 'repeat') as CanvasPattern;
const pattern = this.ctx.createPattern(
canvas,
repeatTypes[+container.styles.backgroundRepeat || 0]
) as CanvasPattern;
this.renderRepeat(path, pattern, x, y);
}
} else if (isRadialGradient(backgroundImage)) {

BIN
tests/assets/edges.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.9 KiB

28
tests/reftests/background/repeat.html
View File

@ -35,6 +35,26 @@
display:block;
}
.shared-area {
text-align: center;
border: solid .5em #0d47a1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
background-color: white;
}
.edges {
width: 80%;
height: 50%;
background-size: contain;
background-position: center center;
background-image: url('../../assets/edges.png');
background-color: white;
background-repeat: no-repeat;
}
</style>
</head>
@ -45,12 +65,20 @@
<div style="background:url(../../assets/image.jpg) repeat-x;"></div>
<div style="background:url(../../assets/image.jpg) repeat-y;"></div>
<div style="background:url(../../assets/image.jpg) no-repeat;"></div>
<div class="shared-area">
<p class="edges"></p>
<p class="caption">Edges</p>
</div>
</div>
<div class="small">
<div style="background:url(../../assets/image.jpg);"></div>
<div style="background:url(../../assets/image.jpg) repeat-x;"></div>
<div style="background:url(../../assets/image.jpg) repeat-y;"></div>
<div style="background:url(../../assets/image.jpg) no-repeat;"></div>
<div class="shared-area">
<p class="edges"></p>
<p class="caption">Edges</p>
</div>
</div>
</body>