UNPKG

html2canvas

Version:
1,190 lines (997 loc) 331 kB
/*! * html2canvas 1.0.0-alpha.12 <https://html2canvas.hertzen.com> * Copyright (c) 2018 Niklas von Hertzen <https://hertzen.com> * Released under MIT License */ (function webpackUniversalModuleDefinition(root, factory) { if(typeof exports === 'object' && typeof module === 'object') module.exports = factory(); else if(typeof define === 'function' && define.amd) define([], factory); else if(typeof exports === 'object') exports["html2canvas"] = factory(); else root["html2canvas"] = factory(); })(this, function() { return /******/ (function(modules) { // webpackBootstrap /******/ // The module cache /******/ var installedModules = {}; /******/ /******/ // The require function /******/ function __webpack_require__(moduleId) { /******/ /******/ // Check if module is in cache /******/ if(installedModules[moduleId]) { /******/ return installedModules[moduleId].exports; /******/ } /******/ // Create a new module (and put it into the cache) /******/ var module = installedModules[moduleId] = { /******/ i: moduleId, /******/ l: false, /******/ exports: {} /******/ }; /******/ /******/ // Execute the module function /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); /******/ /******/ // Flag the module as loaded /******/ module.l = true; /******/ /******/ // Return the exports of the module /******/ return module.exports; /******/ } /******/ /******/ /******/ // expose the modules object (__webpack_modules__) /******/ __webpack_require__.m = modules; /******/ /******/ // expose the module cache /******/ __webpack_require__.c = installedModules; /******/ /******/ // define getter function for harmony exports /******/ __webpack_require__.d = function(exports, name, getter) { /******/ if(!__webpack_require__.o(exports, name)) { /******/ Object.defineProperty(exports, name, { /******/ configurable: false, /******/ enumerable: true, /******/ get: getter /******/ }); /******/ } /******/ }; /******/ /******/ // getDefaultExport function for compatibility with non-harmony modules /******/ __webpack_require__.n = function(module) { /******/ var getter = module && module.__esModule ? /******/ function getDefault() { return module['default']; } : /******/ function getModuleExports() { return module; }; /******/ __webpack_require__.d(getter, 'a', getter); /******/ return getter; /******/ }; /******/ /******/ // Object.prototype.hasOwnProperty.call /******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; /******/ /******/ // __webpack_public_path__ /******/ __webpack_require__.p = ""; /******/ /******/ // Load entry module and return exports /******/ return __webpack_require__(__webpack_require__.s = 27); /******/ }) /************************************************************************/ /******/ ([ /* 0 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; // http://dev.w3.org/csswg/css-color/ Object.defineProperty(exports, "__esModule", { value: true }); var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }(); var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } var HEX3 = /^#([a-f0-9]{3})$/i; var hex3 = function hex3(value) { var match = value.match(HEX3); if (match) { return [parseInt(match[1][0] + match[1][0], 16), parseInt(match[1][1] + match[1][1], 16), parseInt(match[1][2] + match[1][2], 16), null]; } return false; }; var HEX6 = /^#([a-f0-9]{6})$/i; var hex6 = function hex6(value) { var match = value.match(HEX6); if (match) { return [parseInt(match[1].substring(0, 2), 16), parseInt(match[1].substring(2, 4), 16), parseInt(match[1].substring(4, 6), 16), null]; } return false; }; var RGB = /^rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)$/; var rgb = function rgb(value) { var match = value.match(RGB); if (match) { return [Number(match[1]), Number(match[2]), Number(match[3]), null]; } return false; }; var RGBA = /^rgba\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d?\.?\d+)\s*\)$/; var rgba = function rgba(value) { var match = value.match(RGBA); if (match && match.length > 4) { return [Number(match[1]), Number(match[2]), Number(match[3]), Number(match[4])]; } return false; }; var fromArray = function fromArray(array) { return [Math.min(array[0], 255), Math.min(array[1], 255), Math.min(array[2], 255), array.length > 3 ? array[3] : null]; }; var namedColor = function namedColor(name) { var color = NAMED_COLORS[name.toLowerCase()]; return color ? color : false; }; var Color = function () { function Color(value) { _classCallCheck(this, Color); var _ref = Array.isArray(value) ? fromArray(value) : hex3(value) || rgb(value) || rgba(value) || namedColor(value) || hex6(value) || [0, 0, 0, null], _ref2 = _slicedToArray(_ref, 4), r = _ref2[0], g = _ref2[1], b = _ref2[2], a = _ref2[3]; this.r = r; this.g = g; this.b = b; this.a = a; } _createClass(Color, [{ key: 'isTransparent', value: function isTransparent() { return this.a === 0; } }, { key: 'toString', value: function toString() { return this.a !== null && this.a !== 1 ? 'rgba(' + this.r + ',' + this.g + ',' + this.b + ',' + this.a + ')' : 'rgb(' + this.r + ',' + this.g + ',' + this.b + ')'; } }]); return Color; }(); exports.default = Color; var NAMED_COLORS = { transparent: [0, 0, 0, 0], aliceblue: [240, 248, 255, null], antiquewhite: [250, 235, 215, null], aqua: [0, 255, 255, null], aquamarine: [127, 255, 212, null], azure: [240, 255, 255, null], beige: [245, 245, 220, null], bisque: [255, 228, 196, null], black: [0, 0, 0, null], blanchedalmond: [255, 235, 205, null], blue: [0, 0, 255, null], blueviolet: [138, 43, 226, null], brown: [165, 42, 42, null], burlywood: [222, 184, 135, null], cadetblue: [95, 158, 160, null], chartreuse: [127, 255, 0, null], chocolate: [210, 105, 30, null], coral: [255, 127, 80, null], cornflowerblue: [100, 149, 237, null], cornsilk: [255, 248, 220, null], crimson: [220, 20, 60, null], cyan: [0, 255, 255, null], darkblue: [0, 0, 139, null], darkcyan: [0, 139, 139, null], darkgoldenrod: [184, 134, 11, null], darkgray: [169, 169, 169, null], darkgreen: [0, 100, 0, null], darkgrey: [169, 169, 169, null], darkkhaki: [189, 183, 107, null], darkmagenta: [139, 0, 139, null], darkolivegreen: [85, 107, 47, null], darkorange: [255, 140, 0, null], darkorchid: [153, 50, 204, null], darkred: [139, 0, 0, null], darksalmon: [233, 150, 122, null], darkseagreen: [143, 188, 143, null], darkslateblue: [72, 61, 139, null], darkslategray: [47, 79, 79, null], darkslategrey: [47, 79, 79, null], darkturquoise: [0, 206, 209, null], darkviolet: [148, 0, 211, null], deeppink: [255, 20, 147, null], deepskyblue: [0, 191, 255, null], dimgray: [105, 105, 105, null], dimgrey: [105, 105, 105, null], dodgerblue: [30, 144, 255, null], firebrick: [178, 34, 34, null], floralwhite: [255, 250, 240, null], forestgreen: [34, 139, 34, null], fuchsia: [255, 0, 255, null], gainsboro: [220, 220, 220, null], ghostwhite: [248, 248, 255, null], gold: [255, 215, 0, null], goldenrod: [218, 165, 32, null], gray: [128, 128, 128, null], green: [0, 128, 0, null], greenyellow: [173, 255, 47, null], grey: [128, 128, 128, null], honeydew: [240, 255, 240, null], hotpink: [255, 105, 180, null], indianred: [205, 92, 92, null], indigo: [75, 0, 130, null], ivory: [255, 255, 240, null], khaki: [240, 230, 140, null], lavender: [230, 230, 250, null], lavenderblush: [255, 240, 245, null], lawngreen: [124, 252, 0, null], lemonchiffon: [255, 250, 205, null], lightblue: [173, 216, 230, null], lightcoral: [240, 128, 128, null], lightcyan: [224, 255, 255, null], lightgoldenrodyellow: [250, 250, 210, null], lightgray: [211, 211, 211, null], lightgreen: [144, 238, 144, null], lightgrey: [211, 211, 211, null], lightpink: [255, 182, 193, null], lightsalmon: [255, 160, 122, null], lightseagreen: [32, 178, 170, null], lightskyblue: [135, 206, 250, null], lightslategray: [119, 136, 153, null], lightslategrey: [119, 136, 153, null], lightsteelblue: [176, 196, 222, null], lightyellow: [255, 255, 224, null], lime: [0, 255, 0, null], limegreen: [50, 205, 50, null], linen: [250, 240, 230, null], magenta: [255, 0, 255, null], maroon: [128, 0, 0, null], mediumaquamarine: [102, 205, 170, null], mediumblue: [0, 0, 205, null], mediumorchid: [186, 85, 211, null], mediumpurple: [147, 112, 219, null], mediumseagreen: [60, 179, 113, null], mediumslateblue: [123, 104, 238, null], mediumspringgreen: [0, 250, 154, null], mediumturquoise: [72, 209, 204, null], mediumvioletred: [199, 21, 133, null], midnightblue: [25, 25, 112, null], mintcream: [245, 255, 250, null], mistyrose: [255, 228, 225, null], moccasin: [255, 228, 181, null], navajowhite: [255, 222, 173, null], navy: [0, 0, 128, null], oldlace: [253, 245, 230, null], olive: [128, 128, 0, null], olivedrab: [107, 142, 35, null], orange: [255, 165, 0, null], orangered: [255, 69, 0, null], orchid: [218, 112, 214, null], palegoldenrod: [238, 232, 170, null], palegreen: [152, 251, 152, null], paleturquoise: [175, 238, 238, null], palevioletred: [219, 112, 147, null], papayawhip: [255, 239, 213, null], peachpuff: [255, 218, 185, null], peru: [205, 133, 63, null], pink: [255, 192, 203, null], plum: [221, 160, 221, null], powderblue: [176, 224, 230, null], purple: [128, 0, 128, null], rebeccapurple: [102, 51, 153, null], red: [255, 0, 0, null], rosybrown: [188, 143, 143, null], royalblue: [65, 105, 225, null], saddlebrown: [139, 69, 19, null], salmon: [250, 128, 114, null], sandybrown: [244, 164, 96, null], seagreen: [46, 139, 87, null], seashell: [255, 245, 238, null], sienna: [160, 82, 45, null], silver: [192, 192, 192, null], skyblue: [135, 206, 235, null], slateblue: [106, 90, 205, null], slategray: [112, 128, 144, null], slategrey: [112, 128, 144, null], snow: [255, 250, 250, null], springgreen: [0, 255, 127, null], steelblue: [70, 130, 180, null], tan: [210, 180, 140, null], teal: [0, 128, 128, null], thistle: [216, 191, 216, null], tomato: [255, 99, 71, null], turquoise: [64, 224, 208, null], violet: [238, 130, 238, null], wheat: [245, 222, 179, null], white: [255, 255, 255, null], whitesmoke: [245, 245, 245, null], yellow: [255, 255, 0, null], yellowgreen: [154, 205, 50, null] }; var TRANSPARENT = exports.TRANSPARENT = new Color([0, 0, 0, 0]); /***/ }), /* 1 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports.calculateLengthFromValueWithUnit = exports.LENGTH_TYPE = undefined; var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); var _NodeContainer = __webpack_require__(3); var _NodeContainer2 = _interopRequireDefault(_NodeContainer); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } var LENGTH_WITH_UNIT = /([\d.]+)(px|r?em|%)/i; var LENGTH_TYPE = exports.LENGTH_TYPE = { PX: 0, PERCENTAGE: 1 }; var Length = function () { function Length(value) { _classCallCheck(this, Length); this.type = value.substr(value.length - 1) === '%' ? LENGTH_TYPE.PERCENTAGE : LENGTH_TYPE.PX; var parsedValue = parseFloat(value); if (true && isNaN(parsedValue)) { console.error('Invalid value given for Length: "' + value + '"'); } this.value = isNaN(parsedValue) ? 0 : parsedValue; } _createClass(Length, [{ key: 'isPercentage', value: function isPercentage() { return this.type === LENGTH_TYPE.PERCENTAGE; } }, { key: 'getAbsoluteValue', value: function getAbsoluteValue(parentLength) { return this.isPercentage() ? parentLength * (this.value / 100) : this.value; } }], [{ key: 'create', value: function create(v) { return new Length(v); } }]); return Length; }(); exports.default = Length; var getRootFontSize = function getRootFontSize(container) { var parent = container.parent; return parent ? getRootFontSize(parent) : parseFloat(container.style.font.fontSize); }; var calculateLengthFromValueWithUnit = exports.calculateLengthFromValueWithUnit = function calculateLengthFromValueWithUnit(container, value, unit) { switch (unit) { case 'px': case '%': return new Length(value + unit); case 'em': case 'rem': var length = new Length(value); length.value *= unit === 'em' ? parseFloat(container.style.font.fontSize) : getRootFontSize(container); return length; default: // TODO: handle correctly if unknown unit is used return new Length('0'); } }; /***/ }), /* 2 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports.parseBoundCurves = exports.calculatePaddingBoxPath = exports.calculateBorderBoxPath = exports.parsePathForBorder = exports.parseDocumentSize = exports.calculateContentBox = exports.calculatePaddingBox = exports.parseBounds = exports.Bounds = undefined; var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); var _Vector = __webpack_require__(7); var _Vector2 = _interopRequireDefault(_Vector); var _BezierCurve = __webpack_require__(32); var _BezierCurve2 = _interopRequireDefault(_BezierCurve); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } var TOP = 0; var RIGHT = 1; var BOTTOM = 2; var LEFT = 3; var H = 0; var V = 1; var Bounds = exports.Bounds = function () { function Bounds(x, y, w, h) { _classCallCheck(this, Bounds); this.left = x; this.top = y; this.width = w; this.height = h; } _createClass(Bounds, null, [{ key: 'fromClientRect', value: function fromClientRect(clientRect, scrollX, scrollY) { return new Bounds(clientRect.left + scrollX, clientRect.top + scrollY, clientRect.width, clientRect.height); } }]); return Bounds; }(); var parseBounds = exports.parseBounds = function parseBounds(node, scrollX, scrollY) { return Bounds.fromClientRect(node.getBoundingClientRect(), scrollX, scrollY); }; var calculatePaddingBox = exports.calculatePaddingBox = function calculatePaddingBox(bounds, borders) { return new Bounds(bounds.left + borders[LEFT].borderWidth, bounds.top + borders[TOP].borderWidth, bounds.width - (borders[RIGHT].borderWidth + borders[LEFT].borderWidth), bounds.height - (borders[TOP].borderWidth + borders[BOTTOM].borderWidth)); }; var calculateContentBox = exports.calculateContentBox = function calculateContentBox(bounds, padding, borders) { // TODO support percentage paddings var paddingTop = padding[TOP].value; var paddingRight = padding[RIGHT].value; var paddingBottom = padding[BOTTOM].value; var paddingLeft = padding[LEFT].value; return new Bounds(bounds.left + paddingLeft + borders[LEFT].borderWidth, bounds.top + paddingTop + borders[TOP].borderWidth, bounds.width - (borders[RIGHT].borderWidth + borders[LEFT].borderWidth + paddingLeft + paddingRight), bounds.height - (borders[TOP].borderWidth + borders[BOTTOM].borderWidth + paddingTop + paddingBottom)); }; var parseDocumentSize = exports.parseDocumentSize = function parseDocumentSize(document) { var body = document.body; var documentElement = document.documentElement; if (!body || !documentElement) { throw new Error( true ? 'Unable to get document size' : ''); } var width = Math.max(Math.max(body.scrollWidth, documentElement.scrollWidth), Math.max(body.offsetWidth, documentElement.offsetWidth), Math.max(body.clientWidth, documentElement.clientWidth)); var height = Math.max(Math.max(body.scrollHeight, documentElement.scrollHeight), Math.max(body.offsetHeight, documentElement.offsetHeight), Math.max(body.clientHeight, documentElement.clientHeight)); return new Bounds(0, 0, width, height); }; var parsePathForBorder = exports.parsePathForBorder = function parsePathForBorder(curves, borderSide) { switch (borderSide) { case TOP: return createPathFromCurves(curves.topLeftOuter, curves.topLeftInner, curves.topRightOuter, curves.topRightInner); case RIGHT: return createPathFromCurves(curves.topRightOuter, curves.topRightInner, curves.bottomRightOuter, curves.bottomRightInner); case BOTTOM: return createPathFromCurves(curves.bottomRightOuter, curves.bottomRightInner, curves.bottomLeftOuter, curves.bottomLeftInner); case LEFT: default: return createPathFromCurves(curves.bottomLeftOuter, curves.bottomLeftInner, curves.topLeftOuter, curves.topLeftInner); } }; var createPathFromCurves = function createPathFromCurves(outer1, inner1, outer2, inner2) { var path = []; if (outer1 instanceof _BezierCurve2.default) { path.push(outer1.subdivide(0.5, false)); } else { path.push(outer1); } if (outer2 instanceof _BezierCurve2.default) { path.push(outer2.subdivide(0.5, true)); } else { path.push(outer2); } if (inner2 instanceof _BezierCurve2.default) { path.push(inner2.subdivide(0.5, true).reverse()); } else { path.push(inner2); } if (inner1 instanceof _BezierCurve2.default) { path.push(inner1.subdivide(0.5, false).reverse()); } else { path.push(inner1); } return path; }; var calculateBorderBoxPath = exports.calculateBorderBoxPath = function calculateBorderBoxPath(curves) { return [curves.topLeftOuter, curves.topRightOuter, curves.bottomRightOuter, curves.bottomLeftOuter]; }; var calculatePaddingBoxPath = exports.calculatePaddingBoxPath = function calculatePaddingBoxPath(curves) { return [curves.topLeftInner, curves.topRightInner, curves.bottomRightInner, curves.bottomLeftInner]; }; var parseBoundCurves = exports.parseBoundCurves = function parseBoundCurves(bounds, borders, borderRadius) { var tlh = borderRadius[CORNER.TOP_LEFT][H].getAbsoluteValue(bounds.width); var tlv = borderRadius[CORNER.TOP_LEFT][V].getAbsoluteValue(bounds.height); var trh = borderRadius[CORNER.TOP_RIGHT][H].getAbsoluteValue(bounds.width); var trv = borderRadius[CORNER.TOP_RIGHT][V].getAbsoluteValue(bounds.height); var brh = borderRadius[CORNER.BOTTOM_RIGHT][H].getAbsoluteValue(bounds.width); var brv = borderRadius[CORNER.BOTTOM_RIGHT][V].getAbsoluteValue(bounds.height); var blh = borderRadius[CORNER.BOTTOM_LEFT][H].getAbsoluteValue(bounds.width); var blv = borderRadius[CORNER.BOTTOM_LEFT][V].getAbsoluteValue(bounds.height); var factors = []; factors.push((tlh + trh) / bounds.width); factors.push((blh + brh) / bounds.width); factors.push((tlv + blv) / bounds.height); factors.push((trv + brv) / bounds.height); var maxFactor = Math.max.apply(Math, factors); if (maxFactor > 1) { tlh /= maxFactor; tlv /= maxFactor; trh /= maxFactor; trv /= maxFactor; brh /= maxFactor; brv /= maxFactor; blh /= maxFactor; blv /= maxFactor; } var topWidth = bounds.width - trh; var rightHeight = bounds.height - brv; var bottomWidth = bounds.width - brh; var leftHeight = bounds.height - blv; return { topLeftOuter: tlh > 0 || tlv > 0 ? getCurvePoints(bounds.left, bounds.top, tlh, tlv, CORNER.TOP_LEFT) : new _Vector2.default(bounds.left, bounds.top), topLeftInner: tlh > 0 || tlv > 0 ? getCurvePoints(bounds.left + borders[LEFT].borderWidth, bounds.top + borders[TOP].borderWidth, Math.max(0, tlh - borders[LEFT].borderWidth), Math.max(0, tlv - borders[TOP].borderWidth), CORNER.TOP_LEFT) : new _Vector2.default(bounds.left + borders[LEFT].borderWidth, bounds.top + borders[TOP].borderWidth), topRightOuter: trh > 0 || trv > 0 ? getCurvePoints(bounds.left + topWidth, bounds.top, trh, trv, CORNER.TOP_RIGHT) : new _Vector2.default(bounds.left + bounds.width, bounds.top), topRightInner: trh > 0 || trv > 0 ? getCurvePoints(bounds.left + Math.min(topWidth, bounds.width + borders[LEFT].borderWidth), bounds.top + borders[TOP].borderWidth, topWidth > bounds.width + borders[LEFT].borderWidth ? 0 : trh - borders[LEFT].borderWidth, trv - borders[TOP].borderWidth, CORNER.TOP_RIGHT) : new _Vector2.default(bounds.left + bounds.width - borders[RIGHT].borderWidth, bounds.top + borders[TOP].borderWidth), bottomRightOuter: brh > 0 || brv > 0 ? getCurvePoints(bounds.left + bottomWidth, bounds.top + rightHeight, brh, brv, CORNER.BOTTOM_RIGHT) : new _Vector2.default(bounds.left + bounds.width, bounds.top + bounds.height), bottomRightInner: brh > 0 || brv > 0 ? getCurvePoints(bounds.left + Math.min(bottomWidth, bounds.width - borders[LEFT].borderWidth), bounds.top + Math.min(rightHeight, bounds.height + borders[TOP].borderWidth), Math.max(0, brh - borders[RIGHT].borderWidth), brv - borders[BOTTOM].borderWidth, CORNER.BOTTOM_RIGHT) : new _Vector2.default(bounds.left + bounds.width - borders[RIGHT].borderWidth, bounds.top + bounds.height - borders[BOTTOM].borderWidth), bottomLeftOuter: blh > 0 || blv > 0 ? getCurvePoints(bounds.left, bounds.top + leftHeight, blh, blv, CORNER.BOTTOM_LEFT) : new _Vector2.default(bounds.left, bounds.top + bounds.height), bottomLeftInner: blh > 0 || blv > 0 ? getCurvePoints(bounds.left + borders[LEFT].borderWidth, bounds.top + leftHeight, Math.max(0, blh - borders[LEFT].borderWidth), blv - borders[BOTTOM].borderWidth, CORNER.BOTTOM_LEFT) : new _Vector2.default(bounds.left + borders[LEFT].borderWidth, bounds.top + bounds.height - borders[BOTTOM].borderWidth) }; }; var CORNER = { TOP_LEFT: 0, TOP_RIGHT: 1, BOTTOM_RIGHT: 2, BOTTOM_LEFT: 3 }; var getCurvePoints = function getCurvePoints(x, y, r1, r2, position) { var kappa = 4 * ((Math.sqrt(2) - 1) / 3); var ox = r1 * kappa; // control point offset horizontal var oy = r2 * kappa; // control point offset vertical var xm = x + r1; // x-middle var ym = y + r2; // y-middle switch (position) { case CORNER.TOP_LEFT: return new _BezierCurve2.default(new _Vector2.default(x, ym), new _Vector2.default(x, ym - oy), new _Vector2.default(xm - ox, y), new _Vector2.default(xm, y)); case CORNER.TOP_RIGHT: return new _BezierCurve2.default(new _Vector2.default(x, y), new _Vector2.default(x + ox, y), new _Vector2.default(xm, ym - oy), new _Vector2.default(xm, ym)); case CORNER.BOTTOM_RIGHT: return new _BezierCurve2.default(new _Vector2.default(xm, y), new _Vector2.default(xm, y + oy), new _Vector2.default(x + ox, ym), new _Vector2.default(x, ym)); case CORNER.BOTTOM_LEFT: default: return new _BezierCurve2.default(new _Vector2.default(xm, ym), new _Vector2.default(xm - ox, ym), new _Vector2.default(x, y + oy), new _Vector2.default(x, y)); } }; /***/ }), /* 3 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); var _Color = __webpack_require__(0); var _Color2 = _interopRequireDefault(_Color); var _Util = __webpack_require__(4); var _background = __webpack_require__(5); var _border = __webpack_require__(12); var _borderRadius = __webpack_require__(33); var _display = __webpack_require__(34); var _float = __webpack_require__(35); var _font = __webpack_require__(36); var _letterSpacing = __webpack_require__(37); var _lineBreak = __webpack_require__(38); var _listStyle = __webpack_require__(8); var _margin = __webpack_require__(39); var _overflow = __webpack_require__(40); var _overflowWrap = __webpack_require__(18); var _padding = __webpack_require__(17); var _position = __webpack_require__(19); var _textDecoration = __webpack_require__(11); var _textShadow = __webpack_require__(41); var _textTransform = __webpack_require__(20); var _transform = __webpack_require__(42); var _visibility = __webpack_require__(43); var _wordBreak = __webpack_require__(44); var _zIndex = __webpack_require__(45); var _Bounds = __webpack_require__(2); var _Input = __webpack_require__(21); var _ListItem = __webpack_require__(14); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } var INPUT_TAGS = ['INPUT', 'TEXTAREA', 'SELECT']; var NodeContainer = function () { function NodeContainer(node, parent, resourceLoader, index) { var _this = this; _classCallCheck(this, NodeContainer); this.parent = parent; this.tagName = node.tagName; this.index = index; this.childNodes = []; this.listItems = []; if (typeof node.start === 'number') { this.listStart = node.start; } var defaultView = node.ownerDocument.defaultView; var scrollX = defaultView.pageXOffset; var scrollY = defaultView.pageYOffset; var style = defaultView.getComputedStyle(node, null); var display = (0, _display.parseDisplay)(style.display); var IS_INPUT = node.type === 'radio' || node.type === 'checkbox'; var position = (0, _position.parsePosition)(style.position); this.style = { background: IS_INPUT ? _Input.INPUT_BACKGROUND : (0, _background.parseBackground)(style, resourceLoader), border: IS_INPUT ? _Input.INPUT_BORDERS : (0, _border.parseBorder)(style), borderRadius: (node instanceof defaultView.HTMLInputElement || node instanceof HTMLInputElement) && IS_INPUT ? (0, _Input.getInputBorderRadius)(node) : (0, _borderRadius.parseBorderRadius)(style), color: IS_INPUT ? _Input.INPUT_COLOR : new _Color2.default(style.color), display: display, float: (0, _float.parseCSSFloat)(style.float), font: (0, _font.parseFont)(style), letterSpacing: (0, _letterSpacing.parseLetterSpacing)(style.letterSpacing), listStyle: display === _display.DISPLAY.LIST_ITEM ? (0, _listStyle.parseListStyle)(style) : null, lineBreak: (0, _lineBreak.parseLineBreak)(style.lineBreak), margin: (0, _margin.parseMargin)(style), opacity: parseFloat(style.opacity), overflow: INPUT_TAGS.indexOf(node.tagName) === -1 ? (0, _overflow.parseOverflow)(style.overflow) : _overflow.OVERFLOW.HIDDEN, overflowWrap: (0, _overflowWrap.parseOverflowWrap)(style.overflowWrap ? style.overflowWrap : style.wordWrap), padding: (0, _padding.parsePadding)(style), position: position, textDecoration: (0, _textDecoration.parseTextDecoration)(style), textShadow: (0, _textShadow.parseTextShadow)(style.textShadow), textTransform: (0, _textTransform.parseTextTransform)(style.textTransform), transform: (0, _transform.parseTransform)(style), visibility: (0, _visibility.parseVisibility)(style.visibility), wordBreak: (0, _wordBreak.parseWordBreak)(style.wordBreak), zIndex: (0, _zIndex.parseZIndex)(position !== _position.POSITION.STATIC ? style.zIndex : 'auto') }; if (this.isTransformed()) { // getBoundingClientRect provides values post-transform, we want them without the transformation node.style.transform = 'matrix(1,0,0,1,0,0)'; } if (display === _display.DISPLAY.LIST_ITEM) { var listOwner = (0, _ListItem.getListOwner)(this); if (listOwner) { var listIndex = listOwner.listItems.length; listOwner.listItems.push(this); this.listIndex = node.hasAttribute('value') && typeof node.value === 'number' ? node.value : listIndex === 0 ? typeof listOwner.listStart === 'number' ? listOwner.listStart : 1 : listOwner.listItems[listIndex - 1].listIndex + 1; } } // TODO move bound retrieval for all nodes to a later stage? if (node.tagName === 'IMG') { node.addEventListener('load', function () { _this.bounds = (0, _Bounds.parseBounds)(node, scrollX, scrollY); _this.curvedBounds = (0, _Bounds.parseBoundCurves)(_this.bounds, _this.style.border, _this.style.borderRadius); }); } this.image = getImage(node, resourceLoader); this.bounds = IS_INPUT ? (0, _Input.reformatInputBounds)((0, _Bounds.parseBounds)(node, scrollX, scrollY)) : (0, _Bounds.parseBounds)(node, scrollX, scrollY); this.curvedBounds = (0, _Bounds.parseBoundCurves)(this.bounds, this.style.border, this.style.borderRadius); if (true) { this.name = '' + node.tagName.toLowerCase() + (node.id ? '#' + node.id : '') + node.className.toString().split(' ').map(function (s) { return s.length ? '.' + s : ''; }).join(''); } } _createClass(NodeContainer, [{ key: 'getClipPaths', value: function getClipPaths() { var parentClips = this.parent ? this.parent.getClipPaths() : []; var isClipped = this.style.overflow !== _overflow.OVERFLOW.VISIBLE; return isClipped ? parentClips.concat([(0, _Bounds.calculatePaddingBoxPath)(this.curvedBounds)]) : parentClips; } }, { key: 'isInFlow', value: function isInFlow() { return this.isRootElement() && !this.isFloating() && !this.isAbsolutelyPositioned(); } }, { key: 'isVisible', value: function isVisible() { return !(0, _Util.contains)(this.style.display, _display.DISPLAY.NONE) && this.style.opacity > 0 && this.style.visibility === _visibility.VISIBILITY.VISIBLE; } }, { key: 'isAbsolutelyPositioned', value: function isAbsolutelyPositioned() { return this.style.position !== _position.POSITION.STATIC && this.style.position !== _position.POSITION.RELATIVE; } }, { key: 'isPositioned', value: function isPositioned() { return this.style.position !== _position.POSITION.STATIC; } }, { key: 'isFloating', value: function isFloating() { return this.style.float !== _float.FLOAT.NONE; } }, { key: 'isRootElement', value: function isRootElement() { return this.parent === null; } }, { key: 'isTransformed', value: function isTransformed() { return this.style.transform !== null; } }, { key: 'isPositionedWithZIndex', value: function isPositionedWithZIndex() { return this.isPositioned() && !this.style.zIndex.auto; } }, { key: 'isInlineLevel', value: function isInlineLevel() { return (0, _Util.contains)(this.style.display, _display.DISPLAY.INLINE) || (0, _Util.contains)(this.style.display, _display.DISPLAY.INLINE_BLOCK) || (0, _Util.contains)(this.style.display, _display.DISPLAY.INLINE_FLEX) || (0, _Util.contains)(this.style.display, _display.DISPLAY.INLINE_GRID) || (0, _Util.contains)(this.style.display, _display.DISPLAY.INLINE_LIST_ITEM) || (0, _Util.contains)(this.style.display, _display.DISPLAY.INLINE_TABLE); } }, { key: 'isInlineBlockOrInlineTable', value: function isInlineBlockOrInlineTable() { return (0, _Util.contains)(this.style.display, _display.DISPLAY.INLINE_BLOCK) || (0, _Util.contains)(this.style.display, _display.DISPLAY.INLINE_TABLE); } }]); return NodeContainer; }(); exports.default = NodeContainer; var getImage = function getImage(node, resourceLoader) { if (node instanceof node.ownerDocument.defaultView.SVGSVGElement || node instanceof SVGSVGElement) { var s = new XMLSerializer(); return resourceLoader.loadImage('data:image/svg+xml,' + encodeURIComponent(s.serializeToString(node))); } switch (node.tagName) { case 'IMG': // $FlowFixMe var img = node; return resourceLoader.loadImage(img.currentSrc || img.src); case 'CANVAS': // $FlowFixMe var canvas = node; return resourceLoader.loadCanvas(canvas); case 'IFRAME': var iframeKey = node.getAttribute('data-html2canvas-internal-iframe-key'); if (iframeKey) { return iframeKey; } break; } return null; }; /***/ }), /* 4 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var contains = exports.contains = function contains(bit, value) { return (bit & value) !== 0; }; var distance = exports.distance = function distance(a, b) { return Math.sqrt(a * a + b * b); }; var copyCSSStyles = exports.copyCSSStyles = function copyCSSStyles(style, target) { // Edge does not provide value for cssText for (var i = style.length - 1; i >= 0; i--) { var property = style.item(i); // Safari shows pseudoelements if content is set if (property !== 'content') { target.style.setProperty(property, style.getPropertyValue(property)); } } return target; }; var SMALL_IMAGE = exports.SMALL_IMAGE = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'; /***/ }), /* 5 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports.parseBackgroundImage = exports.parseBackground = exports.calculateBackgroundRepeatPath = exports.calculateBackgroundPosition = exports.calculateBackgroungPositioningArea = exports.calculateBackgroungPaintingArea = exports.calculateGradientBackgroundSize = exports.calculateBackgroundSize = exports.BACKGROUND_ORIGIN = exports.BACKGROUND_CLIP = exports.BACKGROUND_SIZE = exports.BACKGROUND_REPEAT = undefined; var _Color = __webpack_require__(0); var _Color2 = _interopRequireDefault(_Color); var _Length = __webpack_require__(1); var _Length2 = _interopRequireDefault(_Length); var _Size = __webpack_require__(31); var _Size2 = _interopRequireDefault(_Size); var _Vector = __webpack_require__(7); var _Vector2 = _interopRequireDefault(_Vector); var _Bounds = __webpack_require__(2); var _padding = __webpack_require__(17); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } var BACKGROUND_REPEAT = exports.BACKGROUND_REPEAT = { REPEAT: 0, NO_REPEAT: 1, REPEAT_X: 2, REPEAT_Y: 3 }; var BACKGROUND_SIZE = exports.BACKGROUND_SIZE = { AUTO: 0, CONTAIN: 1, COVER: 2, LENGTH: 3 }; var BACKGROUND_CLIP = exports.BACKGROUND_CLIP = { BORDER_BOX: 0, PADDING_BOX: 1, CONTENT_BOX: 2 }; var BACKGROUND_ORIGIN = exports.BACKGROUND_ORIGIN = BACKGROUND_CLIP; var AUTO = 'auto'; var BackgroundSize = function BackgroundSize(size) { _classCallCheck(this, BackgroundSize); switch (size) { case 'contain': this.size = BACKGROUND_SIZE.CONTAIN; break; case 'cover': this.size = BACKGROUND_SIZE.COVER; break; case 'auto': this.size = BACKGROUND_SIZE.AUTO; break; default: this.value = new _Length2.default(size); } }; var calculateBackgroundSize = exports.calculateBackgroundSize = function calculateBackgroundSize(backgroundImage, image, bounds) { var width = 0; var height = 0; var size = backgroundImage.size; if (size[0].size === BACKGROUND_SIZE.CONTAIN || size[0].size === BACKGROUND_SIZE.COVER) { var targetRatio = bounds.width / bounds.height; var currentRatio = image.width / image.height; return targetRatio < currentRatio !== (size[0].size === BACKGROUND_SIZE.COVER) ? new _Size2.default(bounds.width, bounds.width / currentRatio) : new _Size2.default(bounds.height * currentRatio, bounds.height); } if (size[0].value) { width = size[0].value.getAbsoluteValue(bounds.width); } if (size[0].size === BACKGROUND_SIZE.AUTO && size[1].size === BACKGROUND_SIZE.AUTO) { height = image.height; } else if (size[1].size === BACKGROUND_SIZE.AUTO) { height = width / image.width * image.height; } else if (size[1].value) { height = size[1].value.getAbsoluteValue(bounds.height); } if (size[0].size === BACKGROUND_SIZE.AUTO) { width = height / image.height * image.width; } return new _Size2.default(width, height); }; var calculateGradientBackgroundSize = exports.calculateGradientBackgroundSize = function calculateGradientBackgroundSize(backgroundImage, bounds) { var size = backgroundImage.size; var width = size[0].value ? size[0].value.getAbsoluteValue(bounds.width) : bounds.width; var height = size[1].value ? size[1].value.getAbsoluteValue(bounds.height) : size[0].value ? width : bounds.height; return new _Size2.default(width, height); }; var AUTO_SIZE = new BackgroundSize(AUTO); var calculateBackgroungPaintingArea = exports.calculateBackgroungPaintingArea = function calculateBackgroungPaintingArea(curves, clip) { switch (clip) { case BACKGROUND_CLIP.BORDER_BOX: return (0, _Bounds.calculateBorderBoxPath)(curves); case BACKGROUND_CLIP.PADDING_BOX: default: return (0, _Bounds.calculatePaddingBoxPath)(curves); } }; var calculateBackgroungPositioningArea = exports.calculateBackgroungPositioningArea = function calculateBackgroungPositioningArea(backgroundOrigin, bounds, padding, border) { var paddingBox = (0, _Bounds.calculatePaddingBox)(bounds, border); switch (backgroundOrigin) { case BACKGROUND_ORIGIN.BORDER_BOX: return bounds; case BACKGROUND_ORIGIN.CONTENT_BOX: var paddingLeft = padding[_padding.PADDING_SIDES.LEFT].getAbsoluteValue(bounds.width); var paddingRight = padding[_padding.PADDING_SIDES.RIGHT].getAbsoluteValue(bounds.width); var paddingTop = padding[_padding.PADDING_SIDES.TOP].getAbsoluteValue(bounds.width); var paddingBottom = padding[_padding.PADDING_SIDES.BOTTOM].getAbsoluteValue(bounds.width); return new _Bounds.Bounds(paddingBox.left + paddingLeft, paddingBox.top + paddingTop, paddingBox.width - paddingLeft - paddingRight, paddingBox.height - paddingTop - paddingBottom); case BACKGROUND_ORIGIN.PADDING_BOX: default: return paddingBox; } }; var calculateBackgroundPosition = exports.calculateBackgroundPosition = function calculateBackgroundPosition(position, size, bounds) { return new _Vector2.default(position[0].getAbsoluteValue(bounds.width - size.width), position[1].getAbsoluteValue(bounds.height - size.height)); }; var calculateBackgroundRepeatPath = exports.calculateBackgroundRepeatPath = function calculateBackgroundRepeatPath(background, position, size, backgroundPositioningArea, bounds) { var repeat = background.repeat; switch (repeat) { case BACKGROUND_REPEAT.REPEAT_X: return [new _Vector2.default(Math.round(bounds.left), Math.round(backgroundPositioningArea.top + position.y)), new _Vector2.default(Math.round(bounds.left + bounds.width), Math.round(backgroundPositioningArea.top + position.y)), new _Vector2.default(Math.round(bounds.left + bounds.width), Math.round(size.height + backgroundPositioningArea.top + position.y)), new _Vector2.default(Math.round(bounds.left), Math.round(size.height + backgroundPositioningArea.top + position.y))]; case BACKGROUND_REPEAT.REPEAT_Y: return [new _Vector2.default(Math.round(backgroundPositioningArea.left + position.x), Math.round(bounds.top)), new _Vector2.default(Math.round(backgroundPositioningArea.left + position.x + size.width), Math.round(bounds.top)), new _Vector2.default(Math.round(backgroundPositioningArea.left + position.x + size.width), Math.round(bounds.height + bounds.top)), new _Vector2.default(Math.round(backgroundPositioningArea.left + position.x), Math.round(bounds.height + bounds.top))]; case BACKGROUND_REPEAT.NO_REPEAT: return [new _Vector2.default(Math.round(backgroundPositioningArea.left + position.x), Math.round(backgroundPositioningArea.top + position.y)), new _Vector2.default(Math.round(backgroundPositioningArea.left + position.x + size.width), Math.round(backgroundPositioningArea.top + position.y)), new _Vector2.default(Math.round(backgroundPositioningArea.left + position.x + size.width), Math.round(backgroundPositioningArea.top + position.y + size.height)), new _Vector2.default(Math.round(backgroundPositioningArea.left + position.x), Math.round(backgroundPositioningArea.top + position.y + size.height))]; default: return [new _Vector2.default(Math.round(bounds.left), Math.round(bounds.top)), new _Vector2.default(Math.round(bounds.left + bounds.width), Math.round(bounds.top)), new _Vector2.default(Math.round(bounds.left + bounds.width), Math.round(bounds.height + bounds.top)), new _Vector2.default(Math.round(bounds.left), Math.round(bounds.height + bounds.top))]; } }; var parseBackground = exports.parseBackground = function parseBackground(style, resourceLoader) { return { backgroundColor: new _Color2.default(style.backgroundColor), backgroundImage: parseBackgroundImages(style, resourceLoader), backgroundClip: parseBackgroundClip(style.backgroundClip), backgroundOrigin: parseBackgroundOrigin(style.backgroundOrigin) }; }; var parseBackgroundClip = function parseBackgroundClip(backgroundClip) { switch (backgroundClip) { case 'padding-box': return BACKGROUND_CLIP.PADDING_BOX; case 'content-box': return BACKGROUND_CLIP.CONTENT_BOX; } return BACKGROUND_CLIP.BORDER_BOX; }; var parseBackgroundOrigin = function parseBackgroundOrigin(backgroundOrigin) { switch (backgroundOrigin) { case 'padding-box': return BACKGROUND_ORIGIN.PADDING_BOX; case 'content-box': return BACKGROUND_ORIGIN.CONTENT_BOX; } return BACKGROUND_ORIGIN.BORDER_BOX; }; var parseBackgroundRepeat = function parseBackgroundRepeat(backgroundRepeat) { switch (backgroundRepeat.trim()) { case 'no-repeat': return BACKGROUND_REPEAT.NO_REPEAT; case 'repeat-x': case 'repeat no-repeat': return BACKGROUND_REPEAT.REPEAT_X; case 'repeat-y': case 'no-repeat repeat': return BACKGROUND_REPEAT.REPEAT_Y; case 'repeat': return BACKGROUND_REPEAT.REPEAT; } if (true) { console.error('Invalid background-repeat value "' + backgroundRepeat + '"'); } return BACKGROUND_REPEAT.REPEAT; }; var parseBackgroundImages = function parseBackgroundImages(style, resourceLoader) { var sources = parseBackgroundImage(style.backgroundImage).map(function (backgroundImage) { if (backgroundImage.method === 'url') { var key = resourceLoader.loadImage(backgroundImage.args[0]); backgroundImage.args = key ? [key] : []; } return backgroundImage; }); var positions = style.backgroundPosition.split(','); var repeats = style.backgroundRepeat.split(','); var sizes = style.backgroundSize.split(','); return sources.map(function (source, index) { var size = (sizes[index] || AUTO).trim().split(' ').map(parseBackgroundSize); var position = (positions[index] || AUTO).trim().split(' ').map(parseBackgoundPosition); return { source: source, repeat: parseBackgroundRepeat(typeof repeats[index] === 'string' ? repeats[index] : repeats[0]), size: size.length < 2 ? [size[0], AUTO_SIZE] : [size[0], size[1]], position: position.length < 2 ? [position[0], position[0]] : [position[0], position[1]] }; }); }; var parseBackgroundSize = function parseBackgroundSize(size) { return size === 'auto' ? AUTO_SIZE : new BackgroundSize(size); }; var parseBackgoundPosition = function parseBackgoundPosition(position) { switch (position) { case 'bottom': case 'right': return new _Length2.default('100%'); case 'left': case 'top': return new _Length2.default('0%'); case 'auto': return new _Length2.default('0'); } return new _Length2.default(position); }; var parseBackgroundImage = exports.parseBackgroundImage = function parseBackgroundImage(image) { var whitespace = /^\s$/; var results = []; var args = []; var method = ''; var quote = null; var definition = ''; var mode = 0; var numParen = 0; var appendResult = function appendResult() { var prefix = ''; if (method) { if (definition.substr(0, 1) === '"') { definition = definition.substr(1, definition.length - 2); } if (definition) { args.push(definition.trim()); } var prefix_i = method.indexOf('-', 1) + 1; if (method.substr(0, 1) === '-' && prefix_i > 0) { prefix = method.substr(0, prefix_i).toLowerCase(); method = method.substr(prefix_i); } method = method.toLowerCase(); if (method !== 'n