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
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>;