html需要引入 html2canvas.js 和jspdf.debug.js
<script src="static/libs/jsPDF-master/dist/jspdf.min.js"></script> <script src="static/libs/jsPDF-master/dist/html2canvas.js"></script> js 代码片段
html2pdf() { var element = $('#audi') // 这个dom要导出元素pdf的div容器 var w = element.width() // 获得容器的宽度 var h = element.height() // 高容器 var offsetTop = element.offset().top // 从容器到文档顶部的距离 var offsetLeft = element.offset().left // 从容器到文档最左的距离 var canvas = document.createElement('canvas') var abs = 0 var win_i = $(window).width() // 获得当前可视窗口的宽度(不包括滚动条) var win_o = window.innerWidth // 获得当前窗口的宽度（包含滚动条） if (win_o > win_i) { abs = (win_o - win_i) / 2 // 滚动条长度的一半 } canvas.width = w * 2 // 将画布宽&&高放大两倍 canvas.height = h * 2 var context = canvas.getContext('2d') context.scale(2, 2) context.translate(-offsetLeft - abs, -offsetTop) // 这里默认没有横向滚动条，因为offset.left()滚动条是否存在差异，因此 // translate的时候，去掉这个差值 html2canvas(element, { useCORS: true }).then(function(canvas) { var contentWidth = canvas.width var contentHeight = canvas.height //一页pdf显示html页面生成的canvas高度; var pageHeight = (contentWidth / 592.28) * 841.89 //未生成pdf的html页面高度 var leftHeight = contentHeight ///页面偏移 var position = 0 //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图宽高 var imgWidth = 595.28 var imgHeight = (592.28 / contentWidth) * contentHeight var pageData = canvas.toDataURL('image/jpeg', 1.0) var pdf = new jsPDF('', 'pt', 'a4') //有两个高度需要区分，一个是html页面的实际高度和生成pdf页面高度(841.89) //当内容未超过时pdf一页显示的范围，无需分页 if (leftHeight < pageHeight) { pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight) } else { // 分页 while (leftHeight > 0) { pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight) leftHeight -= pageHeight position -= 841.89 //避免添加空白页 if (leftHeight > 0) { pdf.addPage() } } } pdf.save('audi.pdf') var pdfData = pdf.output('datauristring/获得base64 的pdf console.log(pdfData) }) }传给后台
/** * 传输后台 */ function generatePdf() { $.ajax({ url : BASE_URL '/after/ex/billClient/uploadBillClient', type : "POST", data : { fileName : pdfData } }).success(function(result) { $scope.$apply(function() { if(result.success) { layer.msg(result.msg); } else { layer.msg(result.msg); } }) }) } 需要 下载html2canvas.js和jspdf.debug.js
特别说明 html2canvas 如果图片跨域需要解决图片跨域问题，页面中的图片需要同源
解决html2canvas 跨域图片问题
修改html2canvas 源码两处
var imageLoadHandler = function imageLoadHandler(supportsDataImages) { return new Promise(function (resolve, reject) { var img = new Image(); img.onload = function () { return resolve(img); }; //ios safari 10.3 taints canvas with data urls unless crossOrigin is set to anonymous if (!supportsDataImages || useCORS) { // img.crossOrigin = 'anonymous'; // ！supportsDataImages || useCORS) { // img.crossOrigin = 'anonymous'; // ！！！此处修改 img.crossOrigin = ''; } img.onerror = reject; // img.src = src; // ！！！！此处修改 if(src.indexOf('data:image')>-1){ // 图片地址后加时间 base64图片不变 // base64 图片操作 img.src = src; }else{ //path 图片操作 img.src = src "?" new Date().getTime(); } if (img.complete === true) { // Inline XML images may fail to parse, throwing an Error later on setTimeout(function () { resolve(img); }, 500); } if (_this4.options.imageTimeout) { var timeout = _this4.options.imageTimeout; setTimeout(function () { return reject( true ? 'Timed out (' timeout 'ms) fetching ' src.substring(0, 256) : ''); }, timeout); } });
};
useCORS: true 允许加载跨域图片资源
html2canvas(element, { useCORS: true }).then(function(canvas) {})/*!
* 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
});
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 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 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';
/***/ }),
/* 4 */
/***/ (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 !== 'none') {
results.push({
prefix: prefix,
method: method,
args: args
});
}
}
args = [];
method = definition = '';
};
image.split('').forEach(function (c) {
if (mode === 0 && whitespace.test(c)) {
return;
}
switch (c) {
case '"':
if (!quote) {
quote = c;
} else if (quote === c) {
quote = null;
}
break;
case '(':
if (quote) {
break;
} else if (mode === 0) {
mode = 1;
return;
} else {
numParen++;
}
break;
case ')':
if (quote) {
break;
} else if (mode === 1) {
if (numParen === 0) {
mode = 0;
appendResult();
return;
} else {
numParen--;
}
}
break;
case ',':
if (quote) {
break;
} else if (mode === 0) {
appendResult();
return;
} else if (mode === 1) {
if (numParen === 0 && !method.match(/^url$/i)) {
args.push(definition.trim());
definition = '';
return;
}
}
break;
}
if (mode === 0) {
method += c;
} else {
definition += c;
}
});
appendResult();
return results;
};
/***/ }),
/* 5 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var PATH = exports.PATH = {
VECTOR: 0,
BEZIER_CURVE: 1,
CIRCLE: 2
};
/***/ }),
/* 6 */
/***/ (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__(3);
var _background = __webpack_require__(4);
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;
};
/***/ }),
/* 7 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _Path = __webpack_require__(5);
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
var Vector = function Vector(x, y) {
_classCallCheck(this, Vector);
this.type = _Path.PATH.VECTOR;
this.x = x;
this.y = y;
if (true) {
if (isNaN(x)) {
console.error('Invalid x value given for Vector');
}
if (isNaN(y)) {
console.error('Invalid y value given for Vector');
}
}
};
exports.default = Vector;
/***/ }),
/* 8 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.parseListStyle = exports.parseListStyleType = exports.LIST_STYLE_TYPE = exports.LIST_STYLE_POSITION = undefined;
var _background = __webpack_require__(4);
var LIST_STYLE_POSITION = exports.LIST_STYLE_POSITION = {
INSIDE: 0,
OUTSIDE: 1
};
var LIST_STYLE_TYPE = exports.LIST_STYLE_TYPE = {
NONE: -1,
DISC: 0,
CIRCLE: 1,
SQUARE: 2,
DECIMAL: 3,
CJK_DECIMAL: 4,
DECIMAL_LEADING_ZERO: 5,
LOWER_ROMAN: 6,
UPPER_ROMAN: 7,
LOWER_GREEK: 8,
LOWER_ALPHA: 9,
UPPER_ALPHA: 10,
ARABIC_INDIC: 11,
ARMENIAN: 12,
BENGALI: 13,
CAMBODIAN: 14,
CJK_EARTHLY_BRANCH: 15,
CJK_HEAVENLY_STEM: 16,
CJK_IDEOGRAPHIC: 17,
DEVANAGARI: 18,
ETHIOPIC_NUMERIC: 19,
GEORGIAN: 20,
GUJARATI: 21,
GURMUKHI: 22,
HEBREW: 22,
HIRAGANA: 23,
HIRAGANA_IROHA: 24,
JAPANESE_FORMAL: 25,
JAPANESE_INFORMAL: 26,
KANNADA: 27,
KATAKANA: 28,
KATAKANA_IROHA: 29,
KHMER: 30,
KOREAN_HANGUL_FORMAL: 31,
KOREAN_HANJA_FORMAL: 32,
KOREAN_HANJA_INFORMAL: 33,
LAO: 34,
LOWER_ARMENIAN: 35,
MALAYALAM: 36,
MONGOLIAN: 37,
MYANMAR: 38,
ORIYA: 39,
PERSIAN: 40,
SIMP_CHINESE_FORMAL: 41,
SIMP_CHINESE_INFORMAL: 42,
TAMIL: 43,
TELUGU: 44,
THAI: 45,
TIBETAN: 46,
TRAD_CHINESE_FORMAL: 47,
TRAD_CHINESE_INFORMAL: 48,
UPPER_ARMENIAN: 49,
DISCLOSURE_OPEN: 50,
DISCLOSURE_CLOSED: 51
};
var parseListStyleType = exports.parseListStyleType = function parseListStyleType(type) {
switch (type) {
case 'disc':
return LIST_STYLE_TYPE.DISC;
case 'circle':
return LIST_STYLE_TYPE.CIRCLE;
case 'square':
return LIST_STYLE_TYPE.SQUARE;
case 'decimal':
return LIST_STYLE_TYPE.DECIMAL;
case 'cjk-decimal':
return LIST_STYLE_TYPE.CJK_DECIMAL;
case 'decimal-leading-zero':
return LIST_STYLE_TYPE.DECIMAL_LEADING_ZERO;
case 'lower-roman':
return LIST_STYLE_TYPE.LOWER_ROMAN;
case 'upper-roman':
return LIST_STYLE_TYPE.UPPER_ROMAN;
case 'lower-greek':
return LIST_STYLE_TYPE.LOWER_GREEK;
case 'lower-alpha':
return LIST_STYLE_TYPE.LOWER_ALPHA;
case 'upper-alpha':
return LIST_STYLE_TYPE.UPPER_ALPHA;
case 'arabic-indic':
return LIST_STYLE_TYPE.ARABIC_INDIC;
case 'armenian':
return LIST_STYLE_TYPE.ARMENIAN;
case 'bengali':
return LIST_STYLE_TYPE.BENGALI;
case 'cambodian':
return LIST_STYLE_TYPE.CAMBODIAN;
case 'cjk-earthly-branch':
return LIST_STYLE_TYPE.CJK_EARTHLY_BRANCH;
case 'cjk-heavenly-stem':
return LIST_STYLE_TYPE.CJK_HEAVENLY_STEM;
case 'cjk-ideographic':
return LIST_STYLE_TYPE.CJK_IDEOGRAPHIC;
case 'devanagari':
return LIST_STYLE_TYPE.DEVANAGARI;
case 'ethiopic-numeric':
return LIST_STYLE_TYPE.ETHIOPIC_NUMERIC;
case 'georgian':
return LIST_STYLE_TYPE.GEORGIAN;
case 'gujarati':
return LIST_STYLE_TYPE.GUJARATI;
case 'gurmukhi':
return LIST_STYLE_TYPE.GURMUKHI;
case 'hebrew':
return LIST_STYLE_TYPE.HEBREW;
case 'hiragana':
return LIST_STYLE_TYPE.HIRAGANA;
case 'hiragana-iroha':
return LIST_STYLE_TYPE.HIRAGANA_IROHA;
case 'japanese-formal':
return LIST_STYLE_TYPE.JAPANESE_FORMAL;
case 'japanese-informal':
return LIST_STYLE_TYPE.JAPANESE_INFORMAL;
case 'kannada':
return LIST_STYLE_TYPE.KANNADA;
case 'katakana':
return LIST_STYLE_TYPE.KATAKANA;
case 'katakana-iroha':
return LIST_STYLE_TYPE.KATAKANA_IROHA;
case 'khmer':
return LIST_STYLE_TYPE.KHMER;
case 'korean-hangul-formal':
return LIST_STYLE_TYPE.KOREAN_HANGUL_FORMAL;
case 'korean-hanja-formal':
return LIST_STYLE_TYPE.KOREAN_HANJA_FORMAL;
case 'korean-hanja-informal':
return LIST_STYLE_TYPE.KOREAN_HANJA_INFORMAL;
case 'lao':
return LIST_STYLE_TYPE.LAO;
case 'lower-armenian':
return LIST_STYLE_TYPE.LOWER_ARMENIAN;
case 'malayalam':
return LIST_STYLE_TYPE.MALAYALAM;
case 'mongolian':
return LIST_STYLE_TYPE.MONGOLIAN;
case 'myanmar':
return LIST_STYLE_TYPE.MYANMAR;
case 'oriya':
return LIST_STYLE_TYPE.ORIYA;
case 'persian':
return LIST_STYLE_TYPE.PERSIAN;
case 'simp-chinese-formal':
return LIST_STYLE_TYPE.SIMP_CHINESE_FORMAL;
case 'simp-chinese-informal':
return LIST_STYLE_TYPE.SIMP_CHINESE_INFORMAL;
case 'tamil':
return LIST_STYLE_TYPE.TAMIL;
case 'telugu':
return LIST_STYLE_TYPE.TELUGU;
case 'thai':
return LIST_STYLE_TYPE.THAI;
case 'tibetan':
return LIST_STYLE_TYPE.TIBETAN;
case 'trad-chinese-formal':
return LIST_STYLE_TYPE.TRAD_CHINESE_FORMAL;
case 'trad-chinese-informal':
return LIST_STYLE_TYPE.TRAD_CHINESE_INFORMAL;
case 'upper-armenian':
return LIST_STYLE_TYPE.UPPER_ARMENIAN;
case 'disclosure-open':
return LIST_STYLE_TYPE.DISCLOSURE_OPEN;
case 'disclosure-closed':
return LIST_STYLE_TYPE.DISCLOSURE_CLOSED;
case 'none':
default:
return LIST_STYLE_TYPE.NONE;
}
};
var parseListStyle = exports.parseListStyle = function parseListStyle(style) {
var listStyleImage = (0, _background.parseBackgroundImage)(style.getPropertyValue('list-style-image'));
return {
listStyleType: parseListStyleType(style.getPropertyValue('list-style-type')),
listStyleImage: listStyleImage.length ? listStyleImage[0] : null,
listStylePosition: parseListStylePosition(style.getPropertyValue('list-style-position'))
};
};
var parseListStylePosition = function parseListStylePosition(position) {
switch (position) {
case 'inside':
return LIST_STYLE_POSITION.INSIDE;
case 'outside':
default:
return LIST_STYLE_POSITION.OUTSIDE;
}
}