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

added support for background-origin: content-box, fixed background-origin related background sizes

Browse Source
This commit is contained in:
Matthias Christen 2017-12-09 00:12:29 +01:00
parent 63377d47a4
commit 850338a76a
3 changed files with 70 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
src/Renderer.js
View File

@ -27,6 +27,7 @@ import {
calculatePaddingBox,
calculatePaddingBoxPath
} from './Bounds';
import {PADDING_SIDES} from './parsing/padding';
import {FontMetrics} from './Font';
import {parseGradient} from './Gradient';
import TextContainer from './TextContainer';
@ -223,14 +224,35 @@ export default class Renderer {
if (image) {
const bounds = container.bounds;
const paddingBox = calculatePaddingBox(bounds, container.style.border);
const backgroundImageSize = calculateBackgroundSize(background, image, bounds);
// TODO support CONTENT_BOX
const backgroundPositioningArea =
container.style.background.backgroundOrigin === BACKGROUND_ORIGIN.BORDER_BOX
? bounds
: paddingBox;
let backgroundPositioningArea;
switch (container.style.background.backgroundOrigin) {
case BACKGROUND_ORIGIN.BORDER_BOX:
backgroundPositioningArea = bounds;
break;
case BACKGROUND_ORIGIN.CONTENT_BOX:
const paddingLeft = container.style.padding[PADDING_SIDES.LEFT].value;
const paddingRight = container.style.padding[PADDING_SIDES.RIGHT].value;
const paddingTop = container.style.padding[PADDING_SIDES.TOP].value;
const paddingBottom = container.style.padding[PADDING_SIDES.BOTTOM].value;
backgroundPositioningArea = new Bounds(
paddingBox.left + paddingLeft,
paddingBox.top + paddingTop,
paddingBox.width - paddingLeft - paddingRight,
paddingBox.height - paddingTop - paddingBottom
);
break;
case BACKGROUND_ORIGIN.PADDING_BOX:
default:
backgroundPositioningArea = paddingBox;
break;
}
const backgroundImageSize = calculateBackgroundSize(
background,
image,
backgroundPositioningArea
);
const position = calculateBackgroundPosition(
background.position,
backgroundImageSize,
@ -244,8 +266,8 @@ export default class Renderer {
bounds
);
const offsetX = Math.round(paddingBox.left + position.x);
const offsetY = Math.round(paddingBox.top + position.y);
const offsetX = Math.round(backgroundPositioningArea.left + position.x);
const offsetY = Math.round(backgroundPositioningArea.top + position.y);
this.target.renderRepeat(path, image, backgroundImageSize, offsetX, offsetY);
}
}

7
src/parsing/padding.js
View File

@ -2,6 +2,13 @@
'use strict';
import Length from '../Length';
export const PADDING_SIDES = {
TOP: 0,
RIGHT: 1,
BOTTOM: 2,
LEFT: 3
};
const SIDES = ['top', 'right', 'bottom', 'left'];
export type Padding = Array<Length>;

33
tests/reftests/background/origin.html Normal file
View File

@ -0,0 +1,33 @@
<!doctype html>
<html>
<head>
<style>
div {
display: inline-block;
width: 100px;
height: 100px;
border: 15px solid blue;
padding: 10px;
margin: 5px;
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAqxQTFRFAAAAAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAADAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAACAAAA01YBTwAAAOJ0Uk5TAABuRlv++VX6/GY083kXJemLAZRLGN2MhdsMWeUpZ7IDArTsKAaKywommQm29TskpOCujfda8YDSL0ntQ7hPIPiPGT2p++8EUmt7fG0Shtifg3es6xxx9P0tvWq5Yxbf9mE4yGIe2soHLsVlIcZpU0K+MLqgGyfmVJfE1+LNnoh2QSsx0V3j0xOo5zdXCM8OOkwjosxFtRXyStxWvMmSaGDOX2ynIh01w+q/t1ixBVytQHAywZybXirku342mj7ZjpAacg3wnQuBENQ/wA/Wlcc8eh9NgoSr1aazeEcRf+FzUNOe+4wAAAABYktHRACIBR1IAAAACXBIWXMAAAmoAAAJqAHjvc2aAAAEtElEQVRYw71W+19URRSfBe/KKsZKoAaBrPJSUAIJY7HAByxQqIgEyq6YroBKG0UiZqyWaJiKb9FEwwIr6WGmhVr2UgsNsoe9n+cvaR73fefqbvbp/LA7c875fufMmTPnDkL/j4SE3hl+hGAdeSf40DAA26h/jx8dDliEMUED72J/EXZgMjYySIK7o8hv9DiQZHyQBBPuicG/sTL+3jimDziQeJiYgJBjkoifnEi1SckpqQESTAGYihnS0il+2nSqzEgBuC/AGCyZAFlpeM0ZAkA2K6X7cwjZzABDSMa+D+TigdOeN4soEh9kuxEeCowgHxcQFMzGe58zBydj7rxCKZ9F0eYoV2JxSenDj0SV4fF8tt6CheWLkisWg0rMTrTy0fQq0aU6awlKWAomUsNNmtNtUztle9CyWi58+WM8/IqVej/Bi1bVcfD1uRx4w3ib0dO6GkWv0Svtax0cfGMKN9bHLcgRkqPW1PnSuNl7wiRZTdgW43myiIzD6ipCnnIgvlia+QRPi+Z1cXGNrlsWTYuVS7BenabWDc9sfHZcm7/JwmPYJGHC0jc/9/wWbzubxcgxbrXLtOmVHIKYbdT2Qk0Hmydtp/NVotkxVR3Yizs4DDuxoTlUuam7OonrbnG2QVdK0zl5XNq8R6PYS5YSt+vRJ2fxPiPDLt2cEOxnw/wq1eK19FDXmB2oLK4D2O0gC+6QUodbGxDqij8MEH8bvIPsuo3t4IiMf0lM6lG8u4Zb4nO7iX8x42qX8EXSzi3HALhXcsbx0pc9PTWzT1B/NzuTV+QAjsqOr+JLySPoVWe6iNVL6jZJMVFx7MO3nVdOJerL7GS6cklx+KTiGImPwschOCkoF1esitfkVlqi9qyXz1grr0veb4htp3G9pDml+Z70A7TTQVmxhuBNOYLqt/a+jZLekZtxTp/G8TS+drSWVrRp9C51E7RmKhVoc2pDJbVF791cyNcYivmdRSjR4hHplS1k8C6c0VoqeHh7rA5vycPa0WT0HpzVmrrcFefez9ooIuu9Xu8HO/cYOmkfMdI8V4Kti3ccEayhVJXR9QzmRcQ4QEYNAB4eAbKwL2MpGY/S3920TGJbR8fn4QKXQLxDteT065fobBeJqYDRukFo4TOspSF8iOu24COt5VIBsXzMJp8AfMon+IwSfI7QZbBtURsGJlNLP5vh3nClg58F+sK8itAXeCfLFL3zCjuhL9l0sNA0BNr8cIYsywGuDUhx+avFI74uar7CNZvBww/Rq7kSj4bx/7SvD+7rWB17OlvurlJP8+HJjSQOQSv1O4B0fUaS7ZLfbtxi4bixViLZi+OUuIZBvpE96VfnnCGGb5lfLx7mC0Z8p7Lkd3Rbw99rgkiYKYJuklm3keCIynksUw2PGZCazuURciunfeC6Ad+rXm3wvKTOu+CfcHP+whtyqqGKfeCv6vDXhjTbbaoGM/Ezj9RjGu2wvqX/YIa3RkhRulXaHwcNR+Y3IbiouPT8xFSF/bM4RZPwMxf/i+ZllTHyzK81v/3Or/vIPzhnfZb/KDSRqD/1+O6hYPD41m4KV8MLy13B4Umq/+qUDjR8f1zQcCpDl1p9vp6/p9z2CfQfyT/GmLpixQvIqwAAAGJ0RVh0Y29tbWVudABib3JkZXIgYnM6MCBiYzojMDAwMDAwIHBzOjAgcGM6I2VlZWVlZSBlczowIGVjOiMwMDAwMDAgY2s6NTAwZDAyYTRmMWYxZDc0OTczNDBjYzU4Njg5NmJmMTGEn9AAAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE3LTA0LTE4VDA5OjU0OjU4KzAwOjAwhlt+sgAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxNy0wNC0xOFQwOTo1NDo1OCswMDowMPcGxg4AAAAydEVYdExpY2Vuc2UAaHR0cDovL2VuLndpa2lwZWRpYS5vcmcvd2lraS9QdWJsaWNfZG9tYWluP/3qzwAAAE10RVh0c29mdHdhcmUASW1hZ2VNYWdpY2sgNy4wLjEtNiBRMTYgeDg2XzY0IDIwMTYtMDktMTcgaHR0cDovL3d3dy5pbWFnZW1hZ2ljay5vcmfd2aVOAAAAGHRFWHRTb3VyY2UAV2lraW1lZGlhIENvbW1vbnPSwlOaAAAANnRFWHRTb3VyY2VfVVJMAGh0dHA6Ly9jb21tb25zLndpa2ltZWRpYS5vcmcvd2lraS9NYWluX1BhZ2US/BctAAAAGHRFWHRUaHVtYjo6RG9jdW1lbnQ6OlBhZ2VzADGn/7svAAAAGHRFWHRUaHVtYjo6SW1hZ2U6OkhlaWdodAAyNTbpw0QZAAAAF3RFWHRUaHVtYjo6SW1hZ2U6OldpZHRoADI1NnoyFEQAAAAZdEVYdFRodW1iOjpNaW1ldHlwZQBpbWFnZS9wbmc/slZOAAAAF3RFWHRUaHVtYjo6TVRpbWUAMTMwNDA2NDg0MNaK6HQAAAASdEVYdFRodW1iOjpTaXplADEwLjhLQr49AxAAAABddEVYdFRodW1iOjpVUkkAZmlsZTovLy9ob21lL3d3d3Jvb3Qvc2l0ZS93d3cuZWFzeWljb24ubmV0L2Nkbi1pbWcuZWFzeWljb24uY24vc3JjLzU0MzEvNTQzMTAxLnBuZ/nLz6kAAAAASUVORK5CYII=');
}
</style>
</head>
<body>
<div style="background-repeat: no-repeat; background-origin: content-box"></div>
<div style="background-repeat: no-repeat; background-origin: padding-box"></div>
<div style="background-repeat: no-repeat; background-origin: border-box"></div>
<div style="background-repeat: no-repeat; background-origin: content-box; background-size: cover"></div>
<div style="background-repeat: no-repeat; background-origin: padding-box; background-size: cover"></div>
<div style="background-repeat: no-repeat; background-origin: border-box; background-size: cover"></div>
<div style="background-repeat: no-repeat; background-origin: content-box; background-size: contain"></div>
<div style="background-repeat: no-repeat; background-origin: padding-box; background-size: contain"></div>
<div style="background-repeat: no-repeat; background-origin: border-box; background-size: contain"></div>
<div style="background-repeat: no-repeat; background-origin: content-box; background-position: 15px 20px"></div>
<div style="background-repeat: no-repeat; background-origin: padding-box; background-position: 15px 20px"></div>
<div style="background-repeat: no-repeat; background-origin: border-box; background-position: 15px 20px"></div>
<div style="background-repeat: repeat; background-origin: content-box"></div>
<div style="background-repeat: repeat; background-origin: padding-box"></div>
<div style="background-repeat: repeat; background-origin: border-box"></div>
</body>
</html>