关于 用 js 实现 快照功能
1.前言
前段时间有个需求，想要 打印一个小票凭证 ，实现这个功能，我首先想到了快照，
就是将数据内容排版好，然后截图或者用其他方式将内容 制作成图片 ，然后下载下来打印即可。
2.探讨
为何不直接以文件的形式打印呢？原因是用文件排版【包含文字和图片内容】，太复杂了，效果和稳定性不确定，还不如用快照，简单省事，效果也好。
3.效果
【图一】输入动态数据
【图二】js排版，放在一个div里面
【图三】触发生成快照并网页本地下载 ，【如果是要分享，则将图片上传服务器，存储后，获取访问该图片的网址路径，将路径分享即可】
【图四】本地下载的图片文件
【图五】
效果如何？我觉得挺好的，二维码是我后台生成的，用路径获取即可
4.实现原理
其实这都多亏了html2canvas库 ，这是一个js版本操作画布canvas的一个集成库，调用api设置参数即可自定义内容，
问题是，直接使用html2canvas 会导致内容模糊、字迹不清晰等问题，还需要其他的辅助算法才可以制作清晰的快照。
/*
html2canvas 0.5.0-beta3 http://html2canvas.hertzen.com
Copyright (c) 2016 Niklas von Hertzen
Released under License
*/
!function (e) {
if ("object" == typeof exports && "undefined" != typeof module) module.exports = e(); else if ("function" == typeof define && define.amd) define([], e); else {
var n;
"undefined" != typeof window ? n = window : "undefined" != typeof global ? n = global : "undefined" != typeof self && (n = self), n.html2canvas = e()
}
}(function () {
var e;
return function n(e, f, o) {
function d(t, l) {
if (!f[t]) {
if (!e[t]) {
var s = "function" == typeof require && require;
if (!l && s) return s(t, !0);
if (i) return i(t, !0);
var u = new Error("Cannot find module '" + t + "'");
throw u.code = "MODULE_NOT_FOUND", u
}
var a = f[t] = {exports: {}};
e[t][0].call(a.exports, function (n) {
var f = e[t][1][n];
return d(f ? f : n)
}, a, a.exports, n, e, f, o)
}
return f[t].exports
}
for (var i = "function" == typeof require && require, t = 0; t < o.length; t++) d(o\[t\]);
return d
}({
1: \[function (n, f, o) {
(function (n) {
!function (d) {
function i(e) {
throw RangeError(I\[e\])
}
function t(e, n) {
for (var f = e.length; f--;) e\[f\] = n(e\[f\]);
return e
}
function l(e, n) {
return t(e.split(H), n).join(".")
}
function s(e) {
for (var n, f, o = \[\], d = 0, i = e.length; i > d;) n = e.charCodeAt(d++), n >= 55296 && 56319 >= n && i > d ? (f = e.charCodeAt(d++), 56320 == (64512 & f) ? o.push(((1023 & n) << 10) + (1023 & f) + 65536) : (o.push(n), d--)) : o.push(n);
return o
}
function u(e) {
return t(e, function (e) {
var n = "";
return e > 65535 && (e -= 65536, n += L(e >>> 10 & 1023 | 55296), e = 56320 | 1023 & e), n += L(e)
}).join("")
}
function a(e) {
return 10 > e - 48 ? e - 22 : 26 > e - 65 ? e - 65 : 26 > e - 97 ? e - 97 : k
}
function p(e, n) {
return e + 22 + 75 \* (26 > e) - ((0 != n) << 5)
}
function c(e, n, f) {
var o = 0;
for (e = f ? K(e / B) : e >> 1, e += K(e / n); e > J \* z >> 1; o += k) e = K(e / J);
return K(o + (J + 1) \* e / (e + A))
}
function y(e) {
var n, f, o, d, t, l, s, p, y, m, r = \[\], v = e.length, w = 0, b = D, g = C;
for (f = e.lastIndexOf(E), 0 > f && (f = 0), o = 0; f > o; ++o) e.charCodeAt(o) >= 128 && i("not-basic"), r.push(e.charCodeAt(o));
for (d = f > 0 ? f + 1 : 0; v > d;) {
for (t = w, l = 1, s = k; d >= v && i("invalid-input"), p = a(e.charCodeAt(d++)), (p >= k || p > K((j - w) / l)) && i("overflow"), w += p \* l, y = g >= s ? q : s >= g + z ? z : s - g, !(y > p); s += k) m = k - y, l > K(j / m) && i("overflow"), l \*= m;
n = r.length + 1, g = c(w - t, n, 0 == t), K(w / n) > j - b && i("overflow"), b += K(w / n), w %= n, r.splice(w++, 0, b)
}
return u(r)
}
function m(e) {
var n, f, o, d, t, l, u, a, y, m, r, v, w, b, g, h = \[\];
for (e = s(e), v = e.length, n = D, f = 0, t = C, l = 0; v > l; ++l) r = e\[l\], 128 > r && h.push(L(r));
for (o = d = h.length, d && h.push(E); v > o;) {
for (u = j, l = 0; v > l; ++l) r = e\[l\], r >= n && u > r && (u = r);
for (w = o + 1, u - n > K((j - f) / w) && i("overflow"), f += (u - n) \* w, n = u, l = 0; v > l; ++l) if (r = e\[l\], n > r && ++f > j && i("overflow"), r == n) {
for (a = f, y = k; m = t >= y ? q : y >= t + z ? z : y - t, !(m > a); y += k) g = a - m, b = k - m, h.push(L(p(m + g % b, 0))), a = K(g / b);
h.push(L(p(a, 0))), t = c(f, w, o == d), f = 0, ++o
}
++f, ++n
}
return h.join("")
}
function r(e) {
return l(e, function (e) {
return F.test(e) ? y(e.slice(4).toLowerCase()) : e
})
}
function v(e) {
return l(e, function (e) {
return G.test(e) ? "xn--" + m(e) : e
})
}
var w = "object" == typeof o && o, b = "object" == typeof f && f && f.exports == w && f,
g = "object" == typeof n && n;
(g.global === g || g.window === g) && (d = g);
var h, x, j = 2147483647, k = 36, q = 1, z = 26, A = 38, B = 700, C = 72, D = 128, E = "-",
F = /^xn--/, G = /\[^ -~\]/, H = /\\x2E|\\u3002|\\uFF0E|\\uFF61/g, I = {
overflow: "Overflow: input needs wider integers to process",
"not-basic": "Illegal input >= 0x80 (not a basic code point)",
"invalid-input": "Invalid input"
}, J = k - q, K = Math.floor, L = String.fromCharCode;
if (h = {
version: "1.2.4",
ucs2: {decode: s, encode: u},
decode: y,
encode: m,
toASCII: v,
toUnicode: r
}, "function" == typeof e && "object" == typeof e.amd && e.amd) e("punycode", function () {
return h
}); else if (w && !w.nodeType) if (b) b.exports = h; else for (x in h) h.hasOwnProperty(x) && (w\[x\] = h\[x\]); else d.punycode = h
}(this)
}).call(this, "undefined" != typeof global ? global : "undefined" != typeof self ? self : "undefined" != typeof window ? window : {})
}, {}\], 2: \[function (e, n) {
function f(e, n, f) {
!e.defaultView || n === e.defaultView.pageXOffset && f === e.defaultView.pageYOffset || e.defaultView.scrollTo(n, f)
}
function o(e, n) {
try {
n && (n.width = e.width, n.height = e.height, n.getContext("2d").putImageData(e.getContext("2d").getImageData(0, 0, e.width, e.height), 0, 0))
} catch (f) {
t("Unable to copy canvas content from", e, f)
}
}
function d(e, n) {
for (var f = 3 === e.nodeType ? document.createTextNode(e.nodeValue) : e.cloneNode(!1), i = e.firstChild; i;) (n === !0 || 1 !== i.nodeType || "SCRIPT" !== i.nodeName) && f.appendChild(d(i, n)), i = i.nextSibling;
return 1 === e.nodeType && (f.\_scrollTop = e.scrollTop, f.\_scrollLeft = e.scrollLeft, "CANVAS" === e.nodeName ? o(e, f) : ("TEXTAREA" === e.nodeName || "SELECT" === e.nodeName) && (f.value = e.value)), f
}
function i(e) {
if (1 === e.nodeType) {
e.scrollTop = e.\_scrollTop, e.scrollLeft = e.\_scrollLeft;
for (var n = e.firstChild; n;) i(n), n = n.nextSibling
}
}
var t = e("./log");
n.exports = function (e, n, o, t, l, s, u) {
var a = d(e.documentElement, l.javascriptEnabled), p = n.createElement("iframe");
return p.className = "html2canvas-container", p.style.visibility = "hidden", p.style.position = "fixed", p.style.left = "-10000px", p.style.top = "0px", p.style.border = "0", p.width = o, p.height = t, p.scrolling = "no", n.body.appendChild(p), new Promise(function (n) {
var o = p.contentWindow.document;
p.contentWindow.onload = p.onload = function () {
var e = setInterval(function () {
o.body.childNodes.length > 0 && (i(o.documentElement), clearInterval(e), "view" === l.type && (p.contentWindow.scrollTo(s, u), !/(iPad|iPhone|iPod)/g.test(navigator.userAgent) || p.contentWindow.scrollY === u && p.contentWindow.scrollX === s || (o.documentElement.style.top = -u + "px", o.documentElement.style.left = -s + "px", o.documentElement.style.position = "absolute")), n(p))
}, 50)
}, o.open(), o.write("<!DOCTYPE html><html></html>"), f(e, s, u), o.replaceChild(o.adoptNode(a), o.documentElement), o.close()
})
}
}, {"./log": 13}\], 3: \[function (e, n) {
function f(e) {
this.r = 0, this.g = 0, this.b = 0, this.a = null;
this.fromArray(e) || this.namedColor(e) || this.rgb(e) || this.rgba(e) || this.hex6(e) || this.hex3(e)
}
f.prototype.darken = function (e) {
var n = 1 - e;
return new f(\[Math.round(this.r \* n), Math.round(this.g \* n), Math.round(this.b \* n), this.a\])
}, f.prototype.isTransparent = function () {
return 0 === this.a
}, f.prototype.isBlack = function () {
return 0 === this.r && 0 === this.g && 0 === this.b
}, f.prototype.fromArray = function (e) {
return Array.isArray(e) && (this.r = Math.min(e\[0\], 255), this.g = Math.min(e\[1\], 255), this.b = Math.min(e\[2\], 255), e.length > 3 && (this.a = e\[3\])), Array.isArray(e)
};
var o = /^#(\[a-f0-9\]{3})$/i;
f.prototype.hex3 = function (e) {
var n = null;
return null !== (n = e.match(o)) && (this.r = parseInt(n\[1\]\[0\] + n\[1\]\[0\], 16), this.g = parseInt(n\[1\]\[1\] + n\[1\]\[1\], 16), this.b = parseInt(n\[1\]\[2\] + n\[1\]\[2\], 16)), null !== n
};
var d = /^#(\[a-f0-9\]{6})$/i;
f.prototype.hex6 = function (e) {
var n = null;
return null !== (n = e.match(d)) && (this.r = parseInt(n\[1\].substring(0, 2), 16), this.g = parseInt(n\[1\].substring(2, 4), 16), this.b = parseInt(n\[1\].substring(4, 6), 16)), null !== n
};
var i = /^rgb\\(\\s\*(\\d{1,3})\\s\*,\\s\*(\\d{1,3})\\s\*,\\s\*(\\d{1,3})\\s\*\\)$/;
f.prototype.rgb = function (e) {
var n = null;
return null !== (n = e.match(i)) && (this.r = Number(n\[1\]), this.g = Number(n\[2\]), this.b = Number(n\[3\])), null !== n
};
var t = /^rgba\\(\\s\*(\\d{1,3})\\s\*,\\s\*(\\d{1,3})\\s\*,\\s\*(\\d{1,3})\\s\*,\\s\*(\\d?\\.?\\d+)\\s\*\\)$/;
f.prototype.rgba = function (e) {
var n = null;
return null !== (n = e.match(t)) && (this.r = Number(n\[1\]), this.g = Number(n\[2\]), this.b = Number(n\[3\]), this.a = Number(n\[4\])), null !== n
}, f.prototype.toString = function () {
return null !== this.a && 1 !== this.a ? "rgba(" + \[this.r, this.g, this.b, this.a\].join(",") + ")" : "rgb(" + \[this.r, this.g, this.b\].join(",") + ")"
}, f.prototype.namedColor = function (e) {
e = e.toLowerCase();
var n = l\[e\];
if (n) this.r = n\[0\], this.g = n\[1\], this.b = n\[2\]; else if ("transparent" === e) return this.r = this.g = this.b = this.a = 0, !0;
return !!n
}, f.prototype.isColor = !0;
var l = {
aliceblue: \[240, 248, 255\],
antiquewhite: \[250, 235, 215\],
aqua: \[0, 255, 255\],
aquamarine: \[127, 255, 212\],
azure: \[240, 255, 255\],
beige: \[245, 245, 220\],
bisque: \[255, 228, 196\],
black: \[0, 0, 0\],
blanchedalmond: \[255, 235, 205\],
blue: \[0, 0, 255\],
blueviolet: \[138, 43, 226\],
brown: \[165, 42, 42\],
burlywood: \[222, 184, 135\],
cadetblue: \[95, 158, 160\],
chartreuse: \[127, 255, 0\],
chocolate: \[210, 105, 30\],
coral: \[255, 127, 80\],
cornflowerblue: \[100, 149, 237\],
cornsilk: \[255, 248, 220\],
crimson: \[220, 20, 60\],
cyan: \[0, 255, 255\],
darkblue: \[0, 0, 139\],
darkcyan: \[0, 139, 139\],
darkgoldenrod: \[184, 134, 11\],
darkgray: \[169, 169, 169\],
darkgreen: \[0, 100, 0\],
darkgrey: \[169, 169, 169\],
darkkhaki: \[189, 183, 107\],
darkmagenta: \[139, 0, 139\],
darkolivegreen: \[85, 107, 47\],
darkorange: \[255, 140, 0\],
darkorchid: \[153, 50, 204\],
darkred: \[139, 0, 0\],
darksalmon: \[233, 150, 122\],
darkseagreen: \[143, 188, 143\],
darkslateblue: \[72, 61, 139\],
darkslategray: \[47, 79, 79\],
darkslategrey: \[47, 79, 79\],
darkturquoise: \[0, 206, 209\],
darkviolet: \[148, 0, 211\],
deeppink: \[255, 20, 147\],
deepskyblue: \[0, 191, 255\],
dimgray: \[105, 105, 105\],
dimgrey: \[105, 105, 105\],
dodgerblue: \[30, 144, 255\],
firebrick: \[178, 34, 34\],
floralwhite: \[255, 250, 240\],
forestgreen: \[34, 139, 34\],
fuchsia: \[255, 0, 255\],
gainsboro: \[220, 220, 220\],
ghostwhite: \[248, 248, 255\],
gold: \[255, 215, 0\],
goldenrod: \[218, 165, 32\],
gray: \[128, 128, 128\],
green: \[0, 128, 0\],
greenyellow: \[173, 255, 47\],
grey: \[128, 128, 128\],
honeydew: \[240, 255, 240\],
hotpink: \[255, 105, 180\],
indianred: \[205, 92, 92\],
indigo: \[75, 0, 130\],
ivory: \[255, 255, 240\],
khaki: \[240, 230, 140\],
lavender: \[230, 230, 250\],
lavenderblush: \[255, 240, 245\],
lawngreen: \[124, 252, 0\],
lemonchiffon: \[255, 250, 205\],
lightblue: \[173, 216, 230\],
lightcoral: \[240, 128, 128\],
lightcyan: \[224, 255, 255\],
lightgoldenrodyellow: \[250, 250, 210\],
lightgray: \[211, 211, 211\],
lightgreen: \[144, 238, 144\],
lightgrey: \[211, 211, 211\],
lightpink: \[255, 182, 193\],
lightsalmon: \[255, 160, 122\],
lightseagreen: \[32, 178, 170\],
lightskyblue: \[135, 206, 250\],
lightslategray: \[119, 136, 153\],
lightslategrey: \[119, 136, 153\],
lightsteelblue: \[176, 196, 222\],
lightyellow: \[255, 255, 224\],
lime: \[0, 255, 0\],
limegreen: \[50, 205, 50\],
linen: \[250, 240, 230\],
magenta: \[255, 0, 255\],
maroon: \[128, 0, 0\],
mediumaquamarine: \[102, 205, 170\],
mediumblue: \[0, 0, 205\],
mediumorchid: \[186, 85, 211\],
mediumpurple: \[147, 112, 219\],
mediumseagreen: \[60, 179, 113\],
mediumslateblue: \[123, 104, 238\],
mediumspringgreen: \[0, 250, 154\],
mediumturquoise: \[72, 209, 204\],
mediumvioletred: \[199, 21, 133\],
midnightblue: \[25, 25, 112\],
mintcream: \[245, 255, 250\],
mistyrose: \[255, 228, 225\],
moccasin: \[255, 228, 181\],
navajowhite: \[255, 222, 173\],
navy: \[0, 0, 128\],
oldlace: \[253, 245, 230\],
olive: \[128, 128, 0\],
olivedrab: \[107, 142, 35\],
orange: \[255, 165, 0\],
orangered: \[255, 69, 0\],
orchid: \[218, 112, 214\],
palegoldenrod: \[238, 232, 170\],
palegreen: \[152, 251, 152\],
paleturquoise: \[175, 238, 238\],
palevioletred: \[219, 112, 147\],
papayawhip: \[255, 239, 213\],
peachpuff: \[255, 218, 185\],
peru: \[205, 133, 63\],
pink: \[255, 192, 203\],
plum: \[221, 160, 221\],
powderblue: \[176, 224, 230\],
purple: \[128, 0, 128\],
rebeccapurple: \[102, 51, 153\],
red: \[255, 0, 0\],
rosybrown: \[188, 143, 143\],
royalblue: \[65, 105, 225\],
saddlebrown: \[139, 69, 19\],
salmon: \[250, 128, 114\],
sandybrown: \[244, 164, 96\],
seagreen: \[46, 139, 87\],
seashell: \[255, 245, 238\],
sienna: \[160, 82, 45\],
silver: \[192, 192, 192\],
skyblue: \[135, 206, 235\],
slateblue: \[106, 90, 205\],
slategray: \[112, 128, 144\],
slategrey: \[112, 128, 144\],
snow: \[255, 250, 250\],
springgreen: \[0, 255, 127\],
steelblue: \[70, 130, 180\],
tan: \[210, 180, 140\],
teal: \[0, 128, 128\],
thistle: \[216, 191, 216\],
tomato: \[255, 99, 71\],
turquoise: \[64, 224, 208\],
violet: \[238, 130, 238\],
wheat: \[245, 222, 179\],
white: \[255, 255, 255\],
whitesmoke: \[245, 245, 245\],
yellow: \[255, 255, 0\],
yellowgreen: \[154, 205, 50\]
};
n.exports = f
}, {}\], 4: \[function (n, f) {
function o(e, n) {
var f = j++;
if (n = n || {}, n.logging && (v.options.logging = !0, v.options.start = Date.now()), n.async = "undefined" == typeof n.async ? !0 : n.async, n.allowTaint = "undefined" == typeof n.allowTaint ? !1 : n.allowTaint, n.removeContainer = "undefined" == typeof n.removeContainer ? !0 : n.removeContainer, n.javascriptEnabled = "undefined" == typeof n.javascriptEnabled ? !1 : n.javascriptEnabled, n.imageTimeout = "undefined" == typeof n.imageTimeout ? 1e4 : n.imageTimeout, n.renderer = "function" == typeof n.renderer ? n.renderer : c, n.strict = !!n.strict, "string" == typeof e) {
if ("string" != typeof n.proxy) return Promise.reject("Proxy must be used when rendering url");
var o = null != n.width ? n.width : window.innerWidth,
t = null != n.height ? n.height : window.innerHeight;
return g(a(e), n.proxy, document, o, t, n).then(function (e) {
return i(e.contentWindow.document.documentElement, e, n, o, t)
})
}
var l = (void 0 === e ? \[document.documentElement\] : e.length ? e : \[e\])\[0\];
return l.setAttribute(x + f, f), d(l.ownerDocument, n, l.ownerDocument.defaultView.innerWidth, l.ownerDocument.defaultView.innerHeight, f).then(function (e) {
return "function" == typeof n.onrendered && (v("options.onrendered is deprecated, html2canvas returns a Promise containing the canvas"), n.onrendered(e)), e
})
}
function d(e, n, f, o, d) {
return b(e, e, f, o, n, e.defaultView.pageXOffset, e.defaultView.pageYOffset).then(function (t) {
v("Document cloned");
var l = x + d, s = "\[" + l + "='" + d + "'\]";
e.querySelector(s).removeAttribute(l);
var u = t.contentWindow, a = u.document.querySelector(s),
p = Promise.resolve("function" == typeof n.onclone ? n.onclone(u.document) : !0);
return p.then(function () {
return i(a, t, n, f, o)
})
})
}
function i(e, n, f, o, d) {
var i = n.contentWindow, a = new p(i.document), c = new y(f, a), r = h(e),
w = "view" === f.type ? o : s(i.document), b = "view" === f.type ? d : u(i.document),
g = new f.renderer(w, b, c, f, document), x = new m(e, g, a, c, f);
return x.ready.then(function () {
v("Finished rendering");
var o;
return o = "view" === f.type ? l(g.canvas, {
width: g.canvas.width,
height: g.canvas.height,
top: 0,
left: 0,
x: 0,
y: 0
}) : e === i.document.body || e === i.document.documentElement || null != f.canvas ? g.canvas : l(g.canvas, {
width: null != f.width ? f.width : r.width,
height: null != f.height ? f.height : r.height,
top: r.top,
left: r.left,
x: 0,
y: 0
}), t(n, f), o
})
}
function t(e, n) {
n.removeContainer && (e.parentNode.removeChild(e), v("Cleaned up container"))
}
function l(e, n) {
var f = document.createElement("canvas"), o = Math.min(e.width - 1, Math.max(0, n.left)),
d = Math.min(e.width, Math.max(1, n.left + n.width)),
i = Math.min(e.height - 1, Math.max(0, n.top)),
t = Math.min(e.height, Math.max(1, n.top + n.height));
f.width = n.width, f.height = n.height;
var l = d - o, s = t - i;
return v("Cropping canvas at:", "left:", n.left, "top:", n.top, "width:", l, "height:", s), v("Resulting crop with width", n.width, "and height", n.height, "with x", o, "and y", i), f.getContext("2d").drawImage(e, o, i, l, s, n.x, n.y, l, s), f
}
function s(e) {
return Math.max(Math.max(e.body.scrollWidth, e.documentElement.scrollWidth), Math.max(e.body.offsetWidth, e.documentElement.offsetWidth), Math.max(e.body.clientWidth, e.documentElement.clientWidth))
}
function u(e) {
return Math.max(Math.max(e.body.scrollHeight, e.documentElement.scrollHeight), Math.max(e.body.offsetHeight, e.documentElement.offsetHeight), Math.max(e.body.clientHeight, e.documentElement.clientHeight))
}
function a(e) {
var n = document.createElement("a");
return n.href = e, n.href = n.href, n
}
var p = n("./support"), c = n("./renderers/canvas"), y = n("./imageloader"), m = n("./nodeparser"),
r = n("./nodecontainer"), v = n("./log"), w = n("./utils"), b = n("./clone"),
g = n("./proxy").loadUrlDocument, h = w.getBounds, x = "data-html2canvas-node", j = 0;
o.CanvasRenderer = c, o.NodeContainer = r, o.log = v, o.utils = w;
var k = "undefined" == typeof document || "function" != typeof Object.create || "function" != typeof document.createElement("canvas").getContext ? function () {
return Promise.reject("No canvas support")
} : o;
f.exports = k, "function" == typeof e && e.amd && e("html2canvas", \[\], function () {
return k
})
}, {
"./clone": 2,
"./imageloader": 11,
"./log": 13,
"./nodecontainer": 14,
"./nodeparser": 15,
"./proxy": 16,
"./renderers/canvas": 20,
"./support": 22,
"./utils": 26
}\], 5: \[function (e, n) {
function f(e) {
if (this.src = e, o("DummyImageContainer for", e), !this.promise || !this.image) {
o("Initiating DummyImageContainer"), f.prototype.image = new Image;
var n = this.image;
f.prototype.promise = new Promise(function (e, f) {
n.onload = e, n.onerror = f, n.src = d(), n.complete === !0 && e(n)
})
}
}
var o = e("./log"), d = e("./utils").smallImage;
n.exports = f
}, {"./log": 13, "./utils": 26}\], 6: \[function (e, n) {
function f(e, n) {
var f, d, i = document.createElement("div"), t = document.createElement("img"),
l = document.createElement("span"), s = "Hidden Text";
i.style.visibility = "hidden", i.style.fontFamily = e, i.style.fontSize = n, i.style.margin = 0, i.style.padding = 0, document.body.appendChild(i), t.src = o(), t.width = 1, t.height = 1, t.style.margin = 0, t.style.padding = 0, t.style.verticalAlign = "baseline", l.style.fontFamily = e, l.style.fontSize = n, l.style.margin = 0, l.style.padding = 0, l.appendChild(document.createTextNode(s)), i.appendChild(l), i.appendChild(t), f = t.offsetTop - l.offsetTop + 1, i.removeChild(l), i.appendChild(document.createTextNode(s)), i.style.lineHeight = "normal", t.style.verticalAlign = "super", d = t.offsetTop - i.offsetTop + 1, document.body.removeChild(i), this.baseline = f, this.lineWidth = 1, this.middle = d
}
var o = e("./utils").smallImage;
n.exports = f
}, {"./utils": 26}\], 7: \[function (e, n) {
function f() {
this.data = {}
}
var o = e("./font");
f.prototype.getMetrics = function (e, n) {
return void 0 === this.data\[e + "-" + n\] && (this.data\[e + "-" + n\] = new o(e, n)), this.data\[e + "-" + n\]
}, n.exports = f
}, {"./font": 6}\], 8: \[function (e, n) {
function f(n, f, o) {
this.image = null, this.src = n;
var i = this, t = d(n);
this.promise = (f ? new Promise(function (e) {
"about:blank" === n.contentWindow.document.URL || null == n.contentWindow.document.documentElement ? n.contentWindow.onload = n.onload = function () {
e(n)
} : e(n)
}) : this.proxyLoad(o.proxy, t, o)).then(function (n) {
var f = e("./core");
return f(n.contentWindow.document.documentElement, {
type: "view",
width: n.width,
height: n.height,
proxy: o.proxy,
javascriptEnabled: o.javascriptEnabled,
removeContainer: o.removeContainer,
allowTaint: o.allowTaint,
imageTimeout: o.imageTimeout / 2
})
}).then(function (e) {
return i.image = e
})
}
var o = e("./utils"), d = o.getBounds, i = e("./proxy").loadUrlDocument;
f.prototype.proxyLoad = function (e, n, f) {
var o = this.src;
return i(o.src, e, o.ownerDocument, n.width, n.height, f)
}, n.exports = f
}, {"./core": 4, "./proxy": 16, "./utils": 26}\], 9: \[function (e, n) {
function f(e) {
this.src = e.value, this.colorStops = \[\], this.type = null, this.x0 = .5, this.y0 = .5, this.x1 = .5, this.y1 = .5, this.promise = Promise.resolve(!0)
}
f.TYPES = {
LINEAR: 1,
RADIAL: 2
}, f.REGEXP\_COLORSTOP = /^\\s\*(rgba?\\(\\s\*\\d{1,3},\\s\*\\d{1,3},\\s\*\\d{1,3}(?:,\\s\*\[0-9\\.\]+)?\\s\*\\)|\[a-z\]{3,20}|#\[a-f0-9\]{3,6})(?:\\s+(\\d{1,3}(?:\\.\\d+)?)(%|px)?)?(?:\\s|$)/i, n.exports = f
}, {}\], 10: \[function (e, n) {
function f(e, n) {
this.src = e, this.image = new Image;
var f = this;
this.tainted = null, this.promise = new Promise(function (o, d) {
f.image.onload = o, f.image.onerror = d, n && (f.image.crossOrigin = "anonymous"), f.image.src = e, f.image.complete === !0 && o(f.image)
})
}
n.exports = f
}, {}\], 11: \[function (e, n) {
function f(e, n) {
this.link = null, this.options = e, this.support = n, this.origin = this.getOrigin(window.location.href)
}
var o = e("./log"), d = e("./imagecontainer"), i = e("./dummyimagecontainer"),
t = e("./proxyimagecontainer"), l = e("./framecontainer"), s = e("./svgcontainer"),
u = e("./svgnodecontainer"), a = e("./lineargradientcontainer"), p = e("./webkitgradientcontainer"),
c = e("./utils").bind;
f.prototype.findImages = function (e) {
var n = \[\];
return e.reduce(function (e, n) {
switch (n.node.nodeName) {
case"IMG":
return e.concat(\[{args: \[n.node.src\], method: "url"}\]);
case"svg":
case"IFRAME":
return e.concat(\[{args: \[n.node\], method: n.node.nodeName}\])
}
return e
}, \[\]).forEach(this.addImage(n, this.loadImage), this), n
}, f.prototype.findBackgroundImage = function (e, n) {
return n.parseBackgroundImages().filter(this.hasImageBackground).forEach(this.addImage(e, this.loadImage), this), e
}, f.prototype.addImage = function (e, n) {
return function (f) {
f.args.forEach(function (d) {
this.imageExists(e, d) || (e.splice(0, 0, n.call(this, f)), o("Added image #" + e.length, "string" == typeof d ? d.substring(0, 100) : d))
}, this)
}
}, f.prototype.hasImageBackground = function (e) {
return "none" !== e.method
}, f.prototype.loadImage = function (e) {
if ("url" === e.method) {
var n = e.args\[0\];
return !this.isSVG(n) || this.support.svg || this.options.allowTaint ? n.match(/data:image\\/.\*;base64,/i) ? new d(n.replace(/url\\(\['"\]{0,}|\['"\]{0,}\\)$/gi, ""), !1) : this.isSameOrigin(n) || this.options.allowTaint === !0 || this.isSVG(n) ? new d(n, !1) : this.support.cors && !this.options.allowTaint && this.options.useCORS ? new d(n, !0) : this.options.proxy ? new t(n, this.options.proxy) : new i(n) : new s(n)
}
return "linear-gradient" === e.method ? new a(e) : "gradient" === e.method ? new p(e) : "svg" === e.method ? new u(e.args\[0\], this.support.svg) : "IFRAME" === e.method ? new l(e.args\[0\], this.isSameOrigin(e.args\[0\].src), this.options) : new i(e)
}, f.prototype.isSVG = function (e) {
return "svg" === e.substring(e.length - 3).toLowerCase() || s.prototype.isInline(e)
}, f.prototype.imageExists = function (e, n) {
return e.some(function (e) {
return e.src === n
})
}, f.prototype.isSameOrigin = function (e) {
return this.getOrigin(e) === this.origin
}, f.prototype.getOrigin = function (e) {
var n = this.link || (this.link = document.createElement("a"));
return n.href = e, n.href = n.href, n.protocol + n.hostname + n.port
}, f.prototype.getPromise = function (e) {
return this.timeout(e, this.options.imageTimeout)\["catch"\](function () {
var n = new i(e.src);
return n.promise.then(function (n) {
e.image = n
})
})
}, f.prototype.get = function (e) {
var n = null;
return this.images.some(function (f) {
return (n = f).src === e
}) ? n : null
}, f.prototype.fetch = function (e) {
return this.images = e.reduce(c(this.findBackgroundImage, this), this.findImages(e)), this.images.forEach(function (e, n) {
e.promise.then(function () {
o("Succesfully loaded image #" + (n + 1), e)
}, function (f) {
o("Failed loading image #" + (n + 1), e, f)
})
}), this.ready = Promise.all(this.images.map(this.getPromise, this)), o("Finished searching images"), this
}, f.prototype.timeout = function (e, n) {
var f, d = Promise.race(\[e.promise, new Promise(function (d, i) {
f = setTimeout(function () {
o("Timed out loading image", e), i(e)
}, n)
})\]).then(function (e) {
return clearTimeout(f), e
});
return d\["catch"\](function () {
clearTimeout(f)
}), d
}, n.exports = f
}, {
"./dummyimagecontainer": 5,
"./framecontainer": 8,
"./imagecontainer": 10,
"./lineargradientcontainer": 12,
"./log": 13,
"./proxyimagecontainer": 17,
"./svgcontainer": 23,
"./svgnodecontainer": 24,
"./utils": 26,
"./webkitgradientcontainer": 27
}\], 12: \[function (e, n) {
function f(e) {
o.apply(this, arguments), this.type = o.TYPES.LINEAR;
var n = f.REGEXP\_DIRECTION.test(e.args\[0\]) || !o.REGEXP\_COLORSTOP.test(e.args\[0\]);
n ? e.args\[0\].split(/\\s+/).reverse().forEach(function (e, n) {
switch (e) {
case"left":
this.x0 = 0, this.x1 = 1;
break;
case"top":
this.y0 = 0, this.y1 = 1;
break;
case"right":
this.x0 = 1, this.x1 = 0;
break;
case"bottom":
this.y0 = 1, this.y1 = 0;
break;
case"to":
var f = this.y0, o = this.x0;
this.y0 = this.y1, this.x0 = this.x1, this.x1 = o, this.y1 = f;
break;
case"center":
break;
default:
var d = .01 \* parseFloat(e, 10);
if (isNaN(d)) break;
0 === n ? (this.y0 = d, this.y1 = 1 - this.y0) : (this.x0 = d, this.x1 = 1 - this.x0)
}
}, this) : (this.y0 = 0, this.y1 = 1), this.colorStops = e.args.slice(n ? 1 : 0).map(function (e) {
var n = e.match(o.REGEXP\_COLORSTOP), f = +n\[2\], i = 0 === f ? "%" : n\[3\];
return {color: new d(n\[1\]), stop: "%" === i ? f / 100 : null}
}), null === this.colorStops\[0\].stop && (this.colorStops\[0\].stop = 0), null === this.colorStops\[this.colorStops.length - 1\].stop && (this.colorStops\[this.colorStops.length - 1\].stop = 1), this.colorStops.forEach(function (e, n) {
null === e.stop && this.colorStops.slice(n).some(function (f, o) {
return null !== f.stop ? (e.stop = (f.stop - this.colorStops\[n - 1\].stop) / (o + 1) + this.colorStops\[n - 1\].stop, !0) : !1
}, this)
}, this)
}
var o = e("./gradientcontainer"), d = e("./color");
f.prototype = Object.create(o.prototype), f.REGEXP\_DIRECTION = /^\\s\*(?:to|left|right|top|bottom|center|\\d{1,3}(?:\\.\\d+)?%?)(?:\\s|$)/i, n.exports = f
}, {"./color": 3, "./gradientcontainer": 9}\], 13: \[function (e, n) {
var f = function () {
f.options.logging && window.console && window.console.log && Function.prototype.bind.call(window.console.log, window.console).apply(window.console, \[Date.now() - f.options.start + "ms", "html2canvas:"\].concat(\[\].slice.call(arguments, 0)))
};
f.options = {logging: !1}, n.exports = f
}, {}\], 14: \[function (e, n) {
function f(e, n) {
this.node = e, this.parent = n, this.stack = null, this.bounds = null, this.borders = null, this.clip = \[\], this.backgroundClip = \[\], this.offsetBounds = null, this.visible = null, this.computedStyles = null, this.colors = {}, this.styles = {}, this.backgroundImages = null, this.transformData = null, this.transformMatrix = null, this.isPseudoElement = !1, this.opacity = null
}
function o(e) {
var n = e.options\[e.selectedIndex || 0\];
return n ? n.text || "" : ""
}
function d(e) {
if (e && "matrix" === e\[1\]) return e\[2\].split(",").map(function (e) {
return parseFloat(e.trim())
});
if (e && "matrix3d" === e\[1\]) {
var n = e\[2\].split(",").map(function (e) {
return parseFloat(e.trim())
});
return \[n\[0\], n\[1\], n\[4\], n\[5\], n\[12\], n\[13\]\]
}
}
function i(e) {
return -1 !== e.toString().indexOf("%")
}
function t(e) {
return e.replace("px", "")
}
function l(e) {
return parseFloat(e)
}
var s = e("./color"), u = e("./utils"), a = u.getBounds, p = u.parseBackgrounds, c = u.offsetBounds;
f.prototype.cloneTo = function (e) {
e.visible = this.visible, e.borders = this.borders, e.bounds = this.bounds, e.clip = this.clip, e.backgroundClip = this.backgroundClip, e.computedStyles = this.computedStyles, e.styles = this.styles, e.backgroundImages = this.backgroundImages, e.opacity = this.opacity
}, f.prototype.getOpacity = function () {
return null === this.opacity ? this.opacity = this.cssFloat("opacity") : this.opacity
}, f.prototype.assignStack = function (e) {
this.stack = e, e.children.push(this)
}, f.prototype.isElementVisible = function () {
return this.node.nodeType === Node.TEXT\_NODE ? this.parent.visible : "none" !== this.css("display") && "hidden" !== this.css("visibility") && !this.node.hasAttribute("data-html2canvas-ignore") && ("INPUT" !== this.node.nodeName || "hidden" !== this.node.getAttribute("type"))
}, f.prototype.css = function (e) {
return this.computedStyles || (this.computedStyles = this.isPseudoElement ? this.parent.computedStyle(this.before ? ":before" : ":after") : this.computedStyle(null)), this.styles\[e\] || (this.styles\[e\] = this.computedStyles\[e\])
}, f.prototype.prefixedCss = function (e) {
var n = \["webkit", "moz", "ms", "o"\], f = this.css(e);
return void 0 === f && n.some(function (n) {
return f = this.css(n + e.substr(0, 1).toUpperCase() + e.substr(1)), void 0 !== f
}, this), void 0 === f ? null : f
}, f.prototype.computedStyle = function (e) {
return this.node.ownerDocument.defaultView.getComputedStyle(this.node, e)
}, f.prototype.cssInt = function (e) {
var n = parseInt(this.css(e), 10);
return isNaN(n) ? 0 : n
}, f.prototype.color = function (e) {
return this.colors\[e\] || (this.colors\[e\] = new s(this.css(e)))
}, f.prototype.cssFloat = function (e) {
var n = parseFloat(this.css(e));
return isNaN(n) ? 0 : n
}, f.prototype.fontWeight = function () {
var e = this.css("fontWeight");
switch (parseInt(e, 10)) {
case 401:
e = "bold";
break;
case 400:
e = "normal"
}
return e
}, f.prototype.parseClip = function () {
var e = this.css("clip").match(this.CLIP);
return e ? {
top: parseInt(e\[1\], 10),
right: parseInt(e\[2\], 10),
bottom: parseInt(e\[3\], 10),
left: parseInt(e\[4\], 10)
} : null
}, f.prototype.parseBackgroundImages = function () {
return this.backgroundImages || (this.backgroundImages = p(this.css("backgroundImage")))
}, f.prototype.cssList = function (e, n) {
var f = (this.css(e) || "").split(",");
return f = f\[n || 0\] || f\[0\] || "auto", f = f.trim().split(" "), 1 === f.length && (f = \[f\[0\], i(f\[0\]) ? "auto" : f\[0\]\]), f
}, f.prototype.parseBackgroundSize = function (e, n, f) {
var o, d, t = this.cssList("backgroundSize", f);
if (i(t\[0\])) o = e.width \* parseFloat(t\[0\]) / 100; else {
if (/contain|cover/.test(t\[0\])) {
var l = e.width / e.height, s = n.width / n.height;
return s > l ^ "contain" === t\[0\] ? {width: e.height \* s, height: e.height} : {
width: e.width,
height: e.width / s
}
}
o = parseInt(t\[0\], 10)
}
return d = "auto" === t\[0\] && "auto" === t\[1\] ? n.height : "auto" === t\[1\] ? o / n.width \* n.height : i(t\[1\]) ? e.height \* parseFloat(t\[1\]) / 100 : parseInt(t\[1\], 10), "auto" === t\[0\] && (o = d / n.height \* n.width), {
width: o,
height: d
}
}, f.prototype.parseBackgroundPosition = function (e, n, f, o) {
var d, t, l = this.cssList("backgroundPosition", f);
return d = i(l\[0\]) ? (e.width - (o || n).width) \* (parseFloat(l\[0\]) / 100) : parseInt(l\[0\], 10), t = "auto" === l\[1\] ? d / n.width \* n.height : i(l\[1\]) ? (e.height - (o || n).height) \* parseFloat(l\[1\]) / 100 : parseInt(l\[1\], 10), "auto" === l\[0\] && (d = t / n.height \* n.width), {
left: d,
top: t
}
}, f.prototype.parseBackgroundRepeat = function (e) {
return this.cssList("backgroundRepeat", e)\[0\]
}, f.prototype.parseTextShadows = function () {
var e = this.css("textShadow"), n = \[\];
if (e && "none" !== e) for (var f = e.match(this.TEXT\_SHADOW\_PROPERTY), o = 0; f && o < f.length; o++) {
var d = f\[o\].match(this.TEXT\_SHADOW\_VALUES);
n.push({
color: new s(d\[0\]),
offsetX: d\[1\] ? parseFloat(d\[1\].replace("px", "")) : 0,
offsetY: d\[2\] ? parseFloat(d\[2\].replace("px", "")) : 0,
blur: d\[3\] ? d\[3\].replace("px", "") : 0
})
}
return n
}, f.prototype.parseTransform = function () {
if (!this.transformData) if (this.hasTransform()) {
var e = this.parseBounds(), n = this.prefixedCss("transformOrigin").split(" ").map(t).map(l);
n\[0\] += e.left, n\[1\] += e.top, this.transformData = {origin: n, matrix: this.parseTransformMatrix()}
} else this.transformData = {origin: \[0, 0\], matrix: \[1, 0, 0, 1, 0, 0\]};
return this.transformData
}, f.prototype.parseTransformMatrix = function () {
if (!this.transformMatrix) {
var e = this.prefixedCss("transform"), n = e ? d(e.match(this.MATRIX\_PROPERTY)) : null;
this.transformMatrix = n ? n : \[1, 0, 0, 1, 0, 0\]
}
return this.transformMatrix
}, f.prototype.parseBounds = function () {
return this.bounds || (this.bounds = this.hasTransform() ? c(this.node) : a(this.node))
}, f.prototype.hasTransform = function () {
return "1,0,0,1,0,0" !== this.parseTransformMatrix().join(",") || this.parent && this.parent.hasTransform()
}, f.prototype.getValue = function () {
var e = this.node.value || "";
return "SELECT" === this.node.tagName ? e = o(this.node) : "password" === this.node.type && (e = Array(e.length + 1).join("•")), 0 === e.length ? this.node.placeholder || "" : e
}, f.prototype.MATRIX\_PROPERTY = /(matrix|matrix3d)\\((.+)\\)/, f.prototype.TEXT\_SHADOW\_PROPERTY = /((rgba|rgb)\\(\[^\\)\]+\\)(\\s-?\\d+px){0,})/g, f.prototype.TEXT\_SHADOW\_VALUES = /(-?\\d+px)|(#.+)|(rgb\\(.+\\))|(rgba\\(.+\\))/g, f.prototype.CLIP = /^rect\\((\\d+)px,? (\\d+)px,? (\\d+)px,? (\\d+)px\\)$/, n.exports = f
}, {"./color": 3, "./utils": 26}\], 15: \[function (e, n) {
function f(e, n, f, o, d) {
N("Starting NodeParser"), this.renderer = n, this.options = d, this.range = null, this.support = f, this.renderQueue = \[\], this.stack = new U(!0, 1, e.ownerDocument, null);
var i = new P(e, null);
if (d.background && n.rectangle(0, 0, n.width, n.height, new T(d.background)), e === e.ownerDocument.documentElement) {
var t = new P(i.color("backgroundColor").isTransparent() ? e.ownerDocument.body : e.ownerDocument.documentElement, null);
n.rectangle(0, 0, n.width, n.height, t.color("backgroundColor"))
}
i.visibile = i.isElementVisible(), this.createPseudoHideStyles(e.ownerDocument), this.disableAnimations(e.ownerDocument), this.nodes = I(\[i\].concat(this.getChildren(i)).filter(function (e) {
return e.visible = e.isElementVisible()
}).map(this.getPseudoElements, this)), this.fontMetrics = new S, N("Fetched nodes, total:", this.nodes.length), N("Calculate overflow clips"), this.calculateOverflowClips(), N("Start fetching images"), this.images = o.fetch(this.nodes.filter(A)), this.ready = this.images.ready.then(W(function () {
return N("Images loaded, starting parsing"), N("Creating stacking contexts"), this.createStackingContexts(), N("Sorting stacking contexts"), this.sortStackingContexts(this.stack), this.parse(this.stack), N("Render queue created with " + this.renderQueue.length + " items"), new Promise(W(function (e) {
d.async ? "function" == typeof d.async ? d.async.call(this, this.renderQueue, e) : this.renderQueue.length > 0 ? (this.renderIndex = 0, this.asyncRenderer(this.renderQueue, e)) : e() : (this.renderQueue.forEach(this.paint, this), e())
}, this))
}, this))
}
function o(e) {
return e.parent && e.parent.clip.length
}
function d(e) {
return e.replace(/(\\-\[a-z\])/g, function (e) {
return e.toUpperCase().replace("-", "")
})
}
function i() {
}
function t(e, n, f, o) {
return e.map(function (d, i) {
if (d.width > 0) {
var t = n.left, l = n.top, s = n.width, u = n.height - e\[2\].width;
switch (i) {
case 0:
u = e\[0\].width, d.args = a({
c1: \[t, l\],
c2: \[t + s, l\],
c3: \[t + s - e\[1\].width, l + u\],
c4: \[t + e\[3\].width, l + u\]
}, o\[0\], o\[1\], f.topLeftOuter, f.topLeftInner, f.topRightOuter, f.topRightInner);
break;
case 1:
t = n.left + n.width - e\[1\].width, s = e\[1\].width, d.args = a({
c1: \[t + s, l\],
c2: \[t + s, l + u + e\[2\].width\],
c3: \[t, l + u\],
c4: \[t, l + e\[0\].width\]
}, o\[1\], o\[2\], f.topRightOuter, f.topRightInner, f.bottomRightOuter, f.bottomRightInner);
break;
case 2:
l = l + n.height - e\[2\].width, u = e\[2\].width, d.args = a({
c1: \[t + s, l + u\],
c2: \[t, l + u\],
c3: \[t + e\[3\].width, l\],
c4: \[t + s - e\[3\].width, l\]
}, o\[2\], o\[3\], f.bottomRightOuter, f.bottomRightInner, f.bottomLeftOuter, f.bottomLeftInner);
break;
case 3:
s = e\[3\].width, d.args = a({
c1: \[t, l + u + e\[2\].width\],
c2: \[t, l\],
c3: \[t + s, l + e\[0\].width\],
c4: \[t + s, l + u\]
}, o\[3\], o\[0\], f.bottomLeftOuter, f.bottomLeftInner, f.topLeftOuter, f.topLeftInner)
}
}
return d
})
}
function l(e, n, f, o) {
var d = 4 \* ((Math.sqrt(2) - 1) / 3), i = f \* d, t = o \* d, l = e + f, s = n + o;
return {
topLeft: u({x: e, y: s}, {x: e, y: s - t}, {x: l - i, y: n}, {x: l, y: n}),
topRight: u({x: e, y: n}, {x: e + i, y: n}, {x: l, y: s - t}, {x: l, y: s}),
bottomRight: u({x: l, y: n}, {x: l, y: n + t}, {x: e + i, y: s}, {x: e, y: s}),
bottomLeft: u({x: l, y: s}, {x: l - i, y: s}, {x: e, y: n + t}, {x: e, y: n})
}
}
function s(e, n, f) {
var o = e.left, d = e.top, i = e.width, t = e.height, s = n\[0\]\[0\] < i / 2 ? n\[0\]\[0\] : i / 2,
u = n\[0\]\[1\] < t / 2 ? n\[0\]\[1\] : t / 2, a = n\[1\]\[0\] < i / 2 ? n\[1\]\[0\] : i / 2,
p = n\[1\]\[1\] < t / 2 ? n\[1\]\[1\] : t / 2, c = n\[2\]\[0\] < i / 2 ? n\[2\]\[0\] : i / 2,
y = n\[2\]\[1\] < t / 2 ? n\[2\]\[1\] : t / 2, m = n\[3\]\[0\] < i / 2 ? n\[3\]\[0\] : i / 2,
r = n\[3\]\[1\] < t / 2 ? n\[3\]\[1\] : t / 2, v = i - a, w = t - y, b = i - c, g = t - r;
return {
topLeftOuter: l(o, d, s, u).topLeft.subdivide(.5),
topLeftInner: l(o + f\[3\].width, d + f\[0\].width, Math.max(0, s - f\[3\].width), Math.max(0, u - f\[0\].width)).topLeft.subdivide(.5),
topRightOuter: l(o + v, d, a, p).topRight.subdivide(.5),
topRightInner: l(o + Math.min(v, i + f\[3\].width), d + f\[0\].width, v > i + f\[3\].width ? 0 : a - f\[3\].width, p - f\[0\].width).topRight.subdivide(.5),
bottomRightOuter: l(o + b, d + w, c, y).bottomRight.subdivide(.5),
bottomRightInner: l(o + Math.min(b, i - f\[3\].width), d + Math.min(w, t + f\[0\].width), Math.max(0, c - f\[1\].width), y - f\[2\].width).bottomRight.subdivide(.5),
bottomLeftOuter: l(o, d + g, m, r).bottomLeft.subdivide(.5),
bottomLeftInner: l(o + f\[3\].width, d + g, Math.max(0, m - f\[3\].width), r - f\[2\].width).bottomLeft.subdivide(.5)
}
}
function u(e, n, f, o) {
var d = function (e, n, f) {
return {x: e.x + (n.x - e.x) \* f, y: e.y + (n.y - e.y) \* f}
};
return {
start: e, startControl: n, endControl: f, end: o, subdivide: function (i) {
var t = d(e, n, i), l = d(n, f, i), s = d(f, o, i), a = d(t, l, i), p = d(l, s, i),
c = d(a, p, i);
return \[u(e, t, a, c), u(c, p, s, o)\]
}, curveTo: function (e) {
e.push(\["bezierCurve", n.x, n.y, f.x, f.y, o.x, o.y\])
}, curveToReversed: function (o) {
o.push(\["bezierCurve", f.x, f.y, n.x, n.y, e.x, e.y\])
}
}
}
function a(e, n, f, o, d, i, t) {
var l = \[\];
return n\[0\] > 0 || n\[1\] > 0 ? (l.push(\["line", o\[1\].start.x, o\[1\].start.y\]), o\[1\].curveTo(l)) : l.push(\["line", e.c1\[0\], e.c1\[1\]\]), f\[0\] > 0 || f\[1\] > 0 ? (l.push(\["line", i\[0\].start.x, i\[0\].start.y\]), i\[0\].curveTo(l), l.push(\["line", t\[0\].end.x, t\[0\].end.y\]), t\[0\].curveToReversed(l)) : (l.push(\["line", e.c2\[0\], e.c2\[1\]\]), l.push(\["line", e.c3\[0\], e.c3\[1\]\])), n\[0\] > 0 || n\[1\] > 0 ? (l.push(\["line", d\[1\].end.x, d\[1\].end.y\]), d\[1\].curveToReversed(l)) : l.push(\["line", e.c4\[0\], e.c4\[1\]\]), l
}
function p(e, n, f, o, d, i, t) {
n\[0\] > 0 || n\[1\] > 0 ? (e.push(\["line", o\[0\].start.x, o\[0\].start.y\]), o\[0\].curveTo(e), o\[1\].curveTo(e)) : e.push(\["line", i, t\]), (f\[0\] > 0 || f\[1\] > 0) && e.push(\["line", d\[0\].start.x, d\[0\].start.y\])
}
function c(e) {
return e.cssInt("zIndex") < 0
}
function y(e) {
return e.cssInt("zIndex") > 0
}
function m(e) {
return 0 === e.cssInt("zIndex")
}
function r(e) {
return -1 !== \["inline", "inline-block", "inline-table"\].indexOf(e.css("display"))
}
function v(e) {
return e instanceof U
}
function w(e) {
return e.node.data.trim().length > 0
}
function b(e) {
return /^(normal|none|0px)$/.test(e.parent.css("letterSpacing"))
}
function g(e) {
return \["TopLeft", "TopRight", "BottomRight", "BottomLeft"\].map(function (n) {
var f = e.css("border" + n + "Radius"), o = f.split(" ");
return o.length <= 1 && (o\[1\] = o\[0\]), o.map(F)
})
}
function h(e) {
return e.nodeType === Node.TEXT\_NODE || e.nodeType === Node.ELEMENT\_NODE
}
function x(e) {
var n = e.css("position"),
f = -1 !== \["absolute", "relative", "fixed"\].indexOf(n) ? e.css("zIndex") : "auto";
return "auto" !== f
}
function j(e) {
return "static" !== e.css("position")
}
function k(e) {
return "none" !== e.css("float")
}
function q(e) {
return -1 !== \["inline-block", "inline-table"\].indexOf(e.css("display"))
}
function z(e) {
var n = this;
return function () {
return !e.apply(n, arguments)
}
}
function A(e) {
return e.node.nodeType === Node.ELEMENT\_NODE
}
function B(e) {
return e.isPseudoElement === !0
}
function C(e) {
return e.node.nodeType === Node.TEXT\_NODE
}
function D(e) {
return function (n, f) {
return n.cssInt("zIndex") + e.indexOf(n) / e.length - (f.cssInt("zIndex") + e.indexOf(f) / e.length)
}
}
function E(e) {
return e.getOpacity() < 1
}
function F(e) {
return parseInt(e, 10)
}
function G(e) {
return e.width
}
function H(e) {
return e.node.nodeType !== Node.ELEMENT\_NODE || -1 === \["SCRIPT", "HEAD", "TITLE", "OBJECT", "BR", "OPTION"\].indexOf(e.node.nodeName)
}
function I(e) {
return \[\].concat.apply(\[\], e)
}
function J(e) {
var n = e.substr(0, 1);
return n === e.substr(e.length - 1) && n.match(/'|"/) ? e.substr(1, e.length - 2) : e
}
function K(e) {
for (var n, f = \[\], o = 0, d = !1; e.length;) L(e\[o\]) === d ? (n = e.splice(0, o), n.length && f.push(O.ucs2.encode(n)), d = !d, o = 0) : o++, o >= e.length && (n = e.splice(0, o), n.length && f.push(O.ucs2.encode(n)));
return f
}
function L(e) {
return -1 !== \[32, 13, 10, 9, 45\].indexOf(e)
}
function M(e) {
return /\[^\\u0000-\\u00ff\]/.test(e)
}
var N = e("./log"), O = e("punycode"), P = e("./nodecontainer"), Q = e("./textcontainer"),
R = e("./pseudoelementcontainer"), S = e("./fontmetrics"), T = e("./color"), U = e("./stackingcontext"),
V = e("./utils"), W = V.bind, X = V.getBounds, Y = V.parseBackgrounds, Z = V.offsetBounds;
f.prototype.calculateOverflowClips = function () {
this.nodes.forEach(function (e) {
if (A(e)) {
B(e) && e.appendToDOM(), e.borders = this.parseBorders(e);
var n = "hidden" === e.css("overflow") ? \[e.borders.clip\] : \[\], f = e.parseClip();
f && -1 !== \["absolute", "fixed"\].indexOf(e.css("position")) && n.push(\[\["rect", e.bounds.left + f.left, e.bounds.top + f.top, f.right - f.left, f.bottom - f.top\]\]), e.clip = o(e) ? e.parent.clip.concat(n) : n, e.backgroundClip = "hidden" !== e.css("overflow") ? e.clip.concat(\[e.borders.clip\]) : e.clip, B(e) && e.cleanDOM()
} else C(e) && (e.clip = o(e) ? e.parent.clip : \[\]);
B(e) || (e.bounds = null)
}, this)
}, f.prototype.asyncRenderer = function (e, n, f) {
f = f || Date.now(), this.paint(e\[this.renderIndex++\]), e.length === this.renderIndex ? n() : f + 20 > Date.now() ? this.asyncRenderer(e, n, f) : setTimeout(W(function () {
this.asyncRenderer(e, n)
}, this), 0)
}, f.prototype.createPseudoHideStyles = function (e) {
this.createStyles(e, "." + R.prototype.PSEUDO\_HIDE\_ELEMENT\_CLASS\_BEFORE + ':before { content: "" !important; display: none !important; }.' + R.prototype.PSEUDO\_HIDE\_ELEMENT\_CLASS\_AFTER + ':after { content: "" !important; display: none !important; }')
}, f.prototype.disableAnimations = function (e) {
this.createStyles(e, "\* { -webkit-animation: none !important; -moz-animation: none !important; -o-animation: none !important; animation: none !important; -webkit-transition: none !important; -moz-transition: none !important; -o-transition: none !important; transition: none !important;}")
}, f.prototype.createStyles = function (e, n) {
var f = e.createElement("style");
f.innerHTML = n, e.body.appendChild(f)
}, f.prototype.getPseudoElements = function (e) {
var n = \[\[e\]\];
if (e.node.nodeType === Node.ELEMENT\_NODE) {
var f = this.getPseudoElement(e, ":before"), o = this.getPseudoElement(e, ":after");
f && n.push(f), o && n.push(o)
}
return I(n)
}, f.prototype.getPseudoElement = function (e, n) {
var f = e.computedStyle(n);
if (!f || !f.content || "none" === f.content || "-moz-alt-content" === f.content || "none" === f.display) return null;
for (var o = J(f.content), i = "url" === o.substr(0, 3), t = document.createElement(i ? "img" : "html2canvaspseudoelement"), l = new R(t, e, n), s = f.length - 1; s >= 0; s--) {
var u = d(f.item(s));
t.style\[u\] = f\[u\]
}
if (t.className = R.prototype.PSEUDO\_HIDE\_ELEMENT\_CLASS\_BEFORE + " " + R.prototype.PSEUDO\_HIDE\_ELEMENT\_CLASS\_AFTER, i) return t.src = Y(o)\[0\].args\[0\], \[l\];
var a = document.createTextNode(o);
return t.appendChild(a), \[l, new Q(a, l)\]
}, f.prototype.getChildren = function (e) {
return I(\[\].filter.call(e.node.childNodes, h).map(function (n) {
var f = \[n.nodeType === Node.TEXT\_NODE ? new Q(n, e) : new P(n, e)\].filter(H);
return n.nodeType === Node.ELEMENT\_NODE && f.length && "TEXTAREA" !== n.tagName ? f\[0\].isElementVisible() ? f.concat(this.getChildren(f\[0\])) : \[\] : f
}, this))
}, f.prototype.newStackingContext = function (e, n) {
var f = new U(n, e.getOpacity(), e.node, e.parent);
e.cloneTo(f);
var o = n ? f.getParentStack(this) : f.parent.stack;
o.contexts.push(f), e.stack = f
}, f.prototype.createStackingContexts = function () {
this.nodes.forEach(function (e) {
A(e) && (this.isRootElement(e) || E(e) || x(e) || this.isBodyWithTransparentRoot(e) || e.hasTransform()) ? this.newStackingContext(e, !0) : A(e) && (j(e) && m(e) || q(e) || k(e)) ? this.newStackingContext(e, !1) : e.assignStack(e.parent.stack)
}, this)
}, f.prototype.isBodyWithTransparentRoot = function (e) {
return "BODY" === e.node.nodeName && e.parent.color("backgroundColor").isTransparent()
}, f.prototype.isRootElement = function (e) {
return null === e.parent
}, f.prototype.sortStackingContexts = function (e) {
e.contexts.sort(D(e.contexts.slice(0))), e.contexts.forEach(this.sortStackingContexts, this)
}, f.prototype.parseTextBounds = function (e) {
return function (n, f, o) {
if ("none" !== e.parent.css("textDecoration").substr(0, 4) || 0 !== n.trim().length) {
if (this.support.rangeBounds && !e.parent.hasTransform()) {
var d = o.slice(0, f).join("").length;
return this.getRangeBounds(e.node, d, n.length)
}
if (e.node && "string" == typeof e.node.data) {
var i = e.node.splitText(n.length),
t = this.getWrapperBounds(e.node, e.parent.hasTransform());
return e.node = i, t
}
} else (!this.support.rangeBounds || e.parent.hasTransform()) && (e.node = e.node.splitText(n.length));
return {}
}
}, f.prototype.getWrapperBounds = function (e, n) {
var f = e.ownerDocument.createElement("html2canvaswrapper"), o = e.parentNode, d = e.cloneNode(!0);
f.appendChild(e.cloneNode(!0)), o.replaceChild(f, e);
var i = n ? Z(f) : X(f);
return o.replaceChild(d, f), i
}, f.prototype.getRangeBounds = function (e, n, f) {
var o = this.range || (this.range = e.ownerDocument.createRange());
return o.setStart(e, n), o.setEnd(e, n + f), o.getBoundingClientRect()
}, f.prototype.parse = function (e) {
var n = e.contexts.filter(c), f = e.children.filter(A), o = f.filter(z(k)),
d = o.filter(z(j)).filter(z(r)), t = f.filter(z(j)).filter(k), l = o.filter(z(j)).filter(r),
s = e.contexts.concat(o.filter(j)).filter(m), u = e.children.filter(C).filter(w),
a = e.contexts.filter(y);
n.concat(d).concat(t).concat(l).concat(s).concat(u).concat(a).forEach(function (e) {
this.renderQueue.push(e), v(e) && (this.parse(e), this.renderQueue.push(new i))
}, this)
}, f.prototype.paint = function (e) {
try {
e instanceof i ? this.renderer.ctx.restore() : C(e) ? (B(e.parent) && e.parent.appendToDOM(), this.paintText(e), B(e.parent) && e.parent.cleanDOM()) : this.paintNode(e)
} catch (n) {
if (N(n), this.options.strict) throw n
}
}, f.prototype.paintNode = function (e) {
v(e) && (this.renderer.setOpacity(e.opacity), this.renderer.ctx.save(), e.hasTransform() && this.renderer.setTransform(e.parseTransform())), "INPUT" === e.node.nodeName && "checkbox" === e.node.type ? this.paintCheckbox(e) : "INPUT" === e.node.nodeName && "radio" === e.node.type ? this.paintRadio(e) : this.paintElement(e)
}, f.prototype.paintElement = function (e) {
var n = e.parseBounds();
this.renderer.clip(e.backgroundClip, function () {
this.renderer.renderBackground(e, n, e.borders.borders.map(G))
}, this), this.renderer.clip(e.clip, function () {
this.renderer.renderBorders(e.borders.borders)
}, this), this.renderer.clip(e.backgroundClip, function () {
switch (e.node.nodeName) {
case"svg":
case"IFRAME":
var f = this.images.get(e.node);
f ? this.renderer.renderImage(e, n, e.borders, f) : N("Error loading <" + e.node.nodeName + ">", e.node);
break;
case"IMG":
var o = this.images.get(e.node.src);
o ? this.renderer.renderImage(e, n, e.borders, o) : N("Error loading <img>", e.node.src);
break;
case"CANVAS":
this.renderer.renderImage(e, n, e.borders, {image: e.node});
break;
case"SELECT":
case"INPUT":
case"TEXTAREA":
this.paintFormValue(e)
}
}, this)
}, f.prototype.paintCheckbox = function (e) {
var n = e.parseBounds(), f = Math.min(n.width, n.height),
o = {width: f - 1, height: f - 1, top: n.top, left: n.left}, d = \[3, 3\], i = \[d, d, d, d\],
l = \[1, 1, 1, 1\].map(function (e) {
return {color: new T("#A5A5A5"), width: e}
}), u = s(o, i, l);
this.renderer.clip(e.backgroundClip, function () {
this.renderer.rectangle(o.left + 1, o.top + 1, o.width - 2, o.height - 2, new T("#DEDEDE")), this.renderer.renderBorders(t(l, o, u, i)), e.node.checked && (this.renderer.font(new T("#424242"), "normal", "normal", "bold", f - 3 + "px", "arial"), this.renderer.text("", o.left + f / 6, o.top + f - 1))
}, this)
}, f.prototype.paintRadio = function (e) {
var n = e.parseBounds(), f = Math.min(n.width, n.height) - 2;
this.renderer.clip(e.backgroundClip, function () {
this.renderer.circleStroke(n.left + 1, n.top + 1, f, new T("#DEDEDE"), 1, new T("#A5A5A5")), e.node.checked && this.renderer.circle(Math.ceil(n.left + f / 4) + 1, Math.ceil(n.top + f / 4) + 1, Math.floor(f / 2), new T("#424242"))
}, this)
}, f.prototype.paintFormValue = function (e) {
var n = e.getValue();
if (n.length > 0) {
var f = e.node.ownerDocument, o = f.createElement("html2canvaswrapper"),
d = \["lineHeight", "textAlign", "fontFamily", "fontWeight", "fontSize", "color", "paddingLeft", "paddingTop", "paddingRight", "paddingBottom", "width", "height", "borderLeftStyle", "borderTopStyle", "borderLeftWidth", "borderTopWidth", "boxSizing", "whiteSpace", "wordWrap"\];
d.forEach(function (n) {
try {
o.style\[n\] = e.css(n)
} catch (f) {
N("html2canvas: Parse: Exception caught in renderFormValue: " + f.message)
}
});
var i = e.parseBounds();
o.style.position = "fixed", o.style.left = i.left + "px", o.style.top = i.top + "px", o.textContent = n, f.body.appendChild(o), this.paintText(new Q(o.firstChild, e)), f.body.removeChild(o)
}
}, f.prototype.paintText = function (e) {
e.applyTextTransform();
var n = O.ucs2.decode(e.node.data),
f = this.options.letterRendering && !b(e) || M(e.node.data) ? n.map(function (e) {
return O.ucs2.encode(\[e\])
}) : K(n), o = e.parent.fontWeight(), d = e.parent.css("fontSize"), i = e.parent.css("fontFamily"),
t = e.parent.parseTextShadows();
this.renderer.font(e.parent.color("color"), e.parent.css("fontStyle"), e.parent.css("fontVariant"), o, d, i), t.length ? this.renderer.fontShadow(t\[0\].color, t\[0\].offsetX, t\[0\].offsetY, t\[0\].blur) : this.renderer.clearShadow(), this.renderer.clip(e.parent.clip, function () {
f.map(this.parseTextBounds(e), this).forEach(function (n, o) {
n && (this.renderer.text(f\[o\], n.left, n.bottom), this.renderTextDecoration(e.parent, n, this.fontMetrics.getMetrics(i, d)))
}, this)
}, this)
}, f.prototype.renderTextDecoration = function (e, n, f) {
switch (e.css("textDecoration").split(" ")\[0\]) {
case"underline":
this.renderer.rectangle(n.left, Math.round(n.top + f.baseline + f.lineWidth), n.width, 1, e.color("color"));
break;
case"overline":
this.renderer.rectangle(n.left, Math.round(n.top), n.width, 1, e.color("color"));
break;
case"line-through":
this.renderer.rectangle(n.left, Math.ceil(n.top + f.middle + f.lineWidth), n.width, 1, e.color("color"))
}
};
var $ = {inset: \[\["darken", .6\], \["darken", .1\], \["darken", .1\], \["darken", .6\]\]};
f.prototype.parseBorders = function (e) {
var n = e.parseBounds(), f = g(e), o = \["Top", "Right", "Bottom", "Left"\].map(function (n, f) {
var o = e.css("border" + n + "Style"), d = e.color("border" + n + "Color");
"inset" === o && d.isBlack() && (d = new T(\[255, 255, 255, d.a\]));
var i = $\[o\] ? $\[o\]\[f\] : null;
return {width: e.cssInt("border" + n + "Width"), color: i ? d\[i\[0\]\](i\[1\]) : d, args: null}
}), d = s(n, f, o);
return {clip: this.parseBackgroundClip(e, d, o, f, n), borders: t(o, n, d, f)}
}, f.prototype.parseBackgroundClip = function (e, n, f, o, d) {
var i = e.css("backgroundClip"), t = \[\];
switch (i) {
case"content-box":
case"padding-box":
p(t, o\[0\], o\[1\], n.topLeftInner, n.topRightInner, d.left + f\[3\].width, d.top + f\[0\].width), p(t, o\[1\], o\[2\], n.topRightInner, n.bottomRightInner, d.left + d.width - f\[1\].width, d.top + f\[0\].width), p(t, o\[2\], o\[3\], n.bottomRightInner, n.bottomLeftInner, d.left + d.width - f\[1\].width, d.top + d.height - f\[2\].width), p(t, o\[3\], o\[0\], n.bottomLeftInner, n.topLeftInner, d.left + f\[3\].width, d.top + d.height - f\[2\].width);
break;
default:
p(t, o\[0\], o\[1\], n.topLeftOuter, n.topRightOuter, d.left, d.top), p(t, o\[1\], o\[2\], n.topRightOuter, n.bottomRightOuter, d.left + d.width, d.top), p(t, o\[2\], o\[3\], n.bottomRightOuter, n.bottomLeftOuter, d.left + d.width, d.top + d.height), p(t, o\[3\], o\[0\], n.bottomLeftOuter, n.topLeftOuter, d.left, d.top + d.height)
}
return t
}, n.exports = f
}, {
"./color": 3,
"./fontmetrics": 7,
"./log": 13,
"./nodecontainer": 14,
"./pseudoelementcontainer": 18,
"./stackingcontext": 21,
"./textcontainer": 25,
"./utils": 26,
punycode: 1
}\], 16: \[function (e, n, f) {
function o(e, n, f) {
var o = "withCredentials" in new XMLHttpRequest;
if (!n) return Promise.reject("No proxy configured");
var d = t(o), s = l(n, e, d);
return o ? a(s) : i(f, s, d).then(function (e) {
return m(e.content)
})
}
function d(e, n, f) {
var o = "crossOrigin" in new Image, d = t(o), s = l(n, e, d);
return o ? Promise.resolve(s) : i(f, s, d).then(function (e) {
return "data:" + e.type + ";base64," + e.content
})
}
function i(e, n, f) {
return new Promise(function (o, d) {
var i = e.createElement("script"), t = function () {
delete window.html2canvas.proxy\[f\], e.body.removeChild(i)
};
window.html2canvas.proxy\[f\] = function (e) {
t(), o(e)
}, i.src = n, i.onerror = function (e) {
t(), d(e)
}, e.body.appendChild(i)
})
}
function t(e) {
return e ? "" : "html2canvas\_" + Date.now() + "\_" + ++r + "\_" + Math.round(1e5 \* Math.random())
}
function l(e, n, f) {
return e + "?url=" + encodeURIComponent(n) + (f.length ? "&callback=html2canvas.proxy." + f : "")
}
function s(e) {
return function (n) {
var f, o = new DOMParser;
try {
f = o.parseFromString(n, "text/html")
} catch (d) {
c("DOMParser not supported, falling back to createHTMLDocument"), f = document.implementation.createHTMLDocument("");
try {
f.open(), f.write(n), f.close()
} catch (i) {
c("createHTMLDocument write not supported, falling back to document.body.innerHTML"), f.body.innerHTML = n
}
}
var t = f.querySelector("base");
if (!t || !t.href.host) {
var l = f.createElement("base");
l.href = e, f.head.insertBefore(l, f.head.firstChild)
}
return f
}
}
function u(e, n, f, d, i, t) {
return new o(e, n, window.document).then(s(e)).then(function (e) {
return y(e, f, d, i, t, 0, 0)
})
}
var a = e("./xhr"), p = e("./utils"), c = e("./log"), y = e("./clone"), m = p.decode64, r = 0;
f.Proxy = o, f.ProxyURL = d, f.loadUrlDocument = u
}, {"./clone": 2, "./log": 13, "./utils": 26, "./xhr": 28}\], 17: \[function (e, n) {
function f(e, n) {
var f = document.createElement("a");
f.href = e, e = f.href, this.src = e, this.image = new Image;
var d = this;
this.promise = new Promise(function (f, i) {
d.image.crossOrigin = "Anonymous", d.image.onload = f, d.image.onerror = i, new o(e, n, document).then(function (e) {
d.image.src = e
})\["catch"\](i)
})
}
var o = e("./proxy").ProxyURL;
n.exports = f
}, {"./proxy": 16}\], 18: \[function (e, n) {
function f(e, n, f) {
o.call(this, e, n), this.isPseudoElement = !0, this.before = ":before" === f
}
var o = e("./nodecontainer");
f.prototype.cloneTo = function (e) {
f.prototype.cloneTo.call(this, e), e.isPseudoElement = !0, e.before = this.before
}, f.prototype = Object.create(o.prototype), f.prototype.appendToDOM = function () {
this.before ? this.parent.node.insertBefore(this.node, this.parent.node.firstChild) : this.parent.node.appendChild(this.node), this.parent.node.className += " " + this.getHideClass()
}, f.prototype.cleanDOM = function () {
this.node.parentNode.removeChild(this.node), this.parent.node.className = this.parent.node.className.replace(this.getHideClass(), "")
}, f.prototype.getHideClass = function () {
return this\["PSEUDO\_HIDE\_ELEMENT\_CLASS\_" + (this.before ? "BEFORE" : "AFTER")\]
}, f.prototype.PSEUDO\_HIDE\_ELEMENT\_CLASS\_BEFORE = "\_\_\_html2canvas\_\_\_pseudoelement\_before", f.prototype.PSEUDO\_HIDE\_ELEMENT\_CLASS\_AFTER = "\_\_\_html2canvas\_\_\_pseudoelement\_after", n.exports = f
}, {"./nodecontainer": 14}\], 19: \[function (e, n) {
function f(e, n, f, o, d) {
this.width = e, this.height = n, this.images = f, this.options = o, this.document = d
}
var o = e("./log");
f.prototype.renderImage = function (e, n, f, o) {
var d = e.cssInt("paddingLeft"), i = e.cssInt("paddingTop"), t = e.cssInt("paddingRight"),
l = e.cssInt("paddingBottom"), s = f.borders, u = n.width - (s\[1\].width + s\[3\].width + d + t),
a = n.height - (s\[0\].width + s\[2\].width + i + l);
this.drawImage(o, 0, 0, o.image.width || u, o.image.height || a, n.left + d + s\[3\].width, n.top + i + s\[0\].width, u, a)
}, f.prototype.renderBackground = function (e, n, f) {
n.height > 0 && n.width > 0 && (this.renderBackgroundColor(e, n), this.renderBackgroundImage(e, n, f))
}, f.prototype.renderBackgroundColor = function (e, n) {
var f = e.color("backgroundColor");
f.isTransparent() || this.rectangle(n.left, n.top, n.width, n.height, f)
}, f.prototype.renderBorders = function (e) {
e.forEach(this.renderBorder, this)
}, f.prototype.renderBorder = function (e) {
e.color.isTransparent() || null === e.args || this.drawShape(e.args, e.color)
}, f.prototype.renderBackgroundImage = function (e, n, f) {
var d = e.parseBackgroundImages();
d.reverse().forEach(function (d, i, t) {
switch (d.method) {
case"url":
var l = this.images.get(d.args\[0\]);
l ? this.renderBackgroundRepeating(e, n, l, t.length - (i + 1), f) : o("Error loading background-image", d.args\[0\]);
break;
case"linear-gradient":
case"gradient":
var s = this.images.get(d.value);
s ? this.renderBackgroundGradient(s, n, f) : o("Error loading background-image", d.args\[0\]);
break;
case"none":
break;
default:
o("Unknown background-image type", d.args\[0\])
}
}, this)
}, f.prototype.renderBackgroundRepeating = function (e, n, f, o, d) {
var i = e.parseBackgroundSize(n, f.image, o), t = e.parseBackgroundPosition(n, f.image, o, i),
l = e.parseBackgroundRepeat(o);
switch (l) {
case"repeat-x":
case"repeat no-repeat":
this.backgroundRepeatShape(f, t, i, n, n.left + d\[3\], n.top + t.top + d\[0\], 99999, i.height, d);
break;
case"repeat-y":
case"no-repeat repeat":
this.backgroundRepeatShape(f, t, i, n, n.left + t.left + d\[3\], n.top + d\[0\], i.width, 99999, d);
break;
case"no-repeat":
this.backgroundRepeatShape(f, t, i, n, n.left + t.left + d\[3\], n.top + t.top + d\[0\], i.width, i.height, d);
break;
default:
this.renderBackgroundRepeat(f, t, i, {top: n.top, left: n.left}, d\[3\], d\[0\])
}
}, n.exports = f
}, {"./log": 13}\], 20: \[function (e, n) {
function f(e, n) {
d.apply(this, arguments), this.canvas = this.options.canvas || this.document.createElement("canvas"), this.options.canvas || (this.canvas.width = e, this.canvas.height = n), this.ctx = this.canvas.getContext("2d"), this.taintCtx = this.document.createElement("canvas").getContext("2d"), this.ctx.textBaseline = "bottom", this.variables = {}, t("Initialized CanvasRenderer with size", e, "x", n)
}
function o(e) {
return e.length > 0
}
var d = e("../renderer"), i = e("../lineargradientcontainer"), t = e("../log");
f.prototype = Object.create(d.prototype), f.prototype.setFillStyle = function (e) {
return this.ctx.fillStyle = "object" == typeof e && e.isColor ? e.toString() : e, this.ctx
}, f.prototype.rectangle = function (e, n, f, o, d) {
this.setFillStyle(d).fillRect(e, n, f, o)
}, f.prototype.circle = function (e, n, f, o) {
this.setFillStyle(o), this.ctx.beginPath(), this.ctx.arc(e + f / 2, n + f / 2, f / 2, 0, 2 \* Math.PI, !0), this.ctx.closePath(), this.ctx.fill()
}, f.prototype.circleStroke = function (e, n, f, o, d, i) {
this.circle(e, n, f, o), this.ctx.strokeStyle = i.toString(), this.ctx.stroke()
}, f.prototype.drawShape = function (e, n) {
this.shape(e), this.setFillStyle(n).fill()
}, f.prototype.taints = function (e) {
if (null === e.tainted) {
this.taintCtx.drawImage(e.image, 0, 0);
try {
this.taintCtx.getImageData(0, 0, 1, 1), e.tainted = !1
} catch (n) {
this.taintCtx = document.createElement("canvas").getContext("2d"), e.tainted = !0
}
}
return e.tainted
}, f.prototype.drawImage = function (e, n, f, o, d, i, t, l, s) {
(!this.taints(e) || this.options.allowTaint) && this.ctx.drawImage(e.image, n, f, o, d, i, t, l, s)
}, f.prototype.clip = function (e, n, f) {
this.ctx.save(), e.filter(o).forEach(function (e) {
this.shape(e).clip()
}, this), n.call(f), this.ctx.restore()
}, f.prototype.shape = function (e) {
return this.ctx.beginPath(), e.forEach(function (e, n) {
"rect" === e\[0\] ? this.ctx.rect.apply(this.ctx, e.slice(1)) : this.ctx\[0 === n ? "moveTo" : e\[0\] + "To"\].apply(this.ctx, e.slice(1))
}, this), this.ctx.closePath(), this.ctx
}, f.prototype.font = function (e, n, f, o, d, i) {
this.setFillStyle(e).font = \[n, f, o, d, i\].join(" ").split(",")\[0\]
}, f.prototype.fontShadow = function (e, n, f, o) {
this.setVariable("shadowColor", e.toString()).setVariable("shadowOffsetY", n).setVariable("shadowOffsetX", f).setVariable("shadowBlur", o)
}, f.prototype.clearShadow = function () {
this.setVariable("shadowColor", "rgba(0,0,0,0)")
}, f.prototype.setOpacity = function (e) {
this.ctx.globalAlpha = e
}, f.prototype.setTransform = function (e) {
this.ctx.translate(e.origin\[0\], e.origin\[1\]), this.ctx.transform.apply(this.ctx, e.matrix), this.ctx.translate(-e.origin\[0\], -e.origin\[1\])
}, f.prototype.setVariable = function (e, n) {
return this.variables\[e\] !== n && (this.variables\[e\] = this.ctx\[e\] = n), this
}, f.prototype.text = function (e, n, f) {
this.ctx.fillText(e, n, f)
}, f.prototype.backgroundRepeatShape = function (e, n, f, o, d, i, t, l, s) {
var u = \[\["line", Math.round(d), Math.round(i)\], \["line", Math.round(d + t), Math.round(i)\], \["line", Math.round(d + t), Math.round(l + i)\], \["line", Math.round(d), Math.round(l + i)\]\];
this.clip(\[u\], function () {
this.renderBackgroundRepeat(e, n, f, o, s\[3\], s\[0\])
}, this)
}, f.prototype.renderBackgroundRepeat = function (e, n, f, o, d, i) {
var t = Math.round(o.left + n.left + d), l = Math.round(o.top + n.top + i);
this.setFillStyle(this.ctx.createPattern(this.resizeImage(e, f), "repeat")), this.ctx.translate(t, l), this.ctx.fill(), this.ctx.translate(-t, -l)
}, f.prototype.renderBackgroundGradient = function (e, n) {
if (e instanceof i) {
var f = this.ctx.createLinearGradient(n.left + n.width \* e.x0, n.top + n.height \* e.y0, n.left + n.width \* e.x1, n.top + n.height \* e.y1);
e.colorStops.forEach(function (e) {
f.addColorStop(e.stop, e.color.toString())
}), this.rectangle(n.left, n.top, n.width, n.height, f)
}
}, f.prototype.resizeImage = function (e, n) {
var f = e.image;
if (f.width === n.width && f.height === n.height) return f;
var o, d = document.createElement("canvas");
return d.width = n.width, d.height = n.height, o = d.getContext("2d"), o.drawImage(f, 0, 0, f.width, f.height, 0, 0, n.width, n.height), d
}, n.exports = f
}, {"../lineargradientcontainer": 12, "../log": 13, "../renderer": 19}\], 21: \[function (e, n) {
function f(e, n, f, d) {
o.call(this, f, d), this.ownStacking = e, this.contexts = \[\], this.children = \[\], this.opacity = (this.parent ? this.parent.stack.opacity : 1) \* n
}
var o = e("./nodecontainer");
f.prototype = Object.create(o.prototype), f.prototype.getParentStack = function (e) {
var n = this.parent ? this.parent.stack : null;
return n ? n.ownStacking ? n : n.getParentStack(e) : e.stack
}, n.exports = f
}, {"./nodecontainer": 14}\], 22: \[function (e, n) {
function f(e) {
this.rangeBounds = this.testRangeBounds(e), this.cors = this.testCORS(), this.svg = this.testSVG()
}
f.prototype.testRangeBounds = function (e) {
var n, f, o, d, i = !1;
return e.createRange && (n = e.createRange(), n.getBoundingClientRect && (f = e.createElement("boundtest"), f.style.height = "123px", f.style.display = "block", e.body.appendChild(f), n.selectNode(f), o = n.getBoundingClientRect(), d = o.height, 123 === d && (i = !0), e.body.removeChild(f))), i
}, f.prototype.testCORS = function () {
return "undefined" != typeof (new Image).crossOrigin
}, f.prototype.testSVG = function () {
var e = new Image, n = document.createElement("canvas"), f = n.getContext("2d");
e.src = "data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'></svg>";
try {
f.drawImage(e, 0, 0), n.toDataURL()
} catch (o) {
return !1
}
return !0
}, n.exports = f
}, {}\], 23: \[function (e, n) {
function f(e) {
this.src = e, this.image = null;
var n = this;
this.promise = this.hasFabric().then(function () {
return n.isInline(e) ? Promise.resolve(n.inlineFormatting(e)) : o(e)
}).then(function (e) {
return new Promise(function (f) {
window.html2canvas.svg.fabric.loadSVGFromString(e, n.createCanvas.call(n, f))
})
})
}
var o = e("./xhr"), d = e("./utils").decode64;
f.prototype.hasFabric = function () {
return window.html2canvas.svg && window.html2canvas.svg.fabric ? Promise.resolve() : Promise.reject(new Error("html2canvas.svg.js is not loaded, cannot render svg"))
}, f.prototype.inlineFormatting = function (e) {
return /^data:image\\/svg\\+xml;base64,/.test(e) ? this.decode64(this.removeContentType(e)) : this.removeContentType(e)
}, f.prototype.removeContentType = function (e) {
return e.replace(/^data:image\\/svg\\+xml(;base64)?,/, "")
}, f.prototype.isInline = function (e) {
return /^data:image\\/svg\\+xml/i.test(e)
}, f.prototype.createCanvas = function (e) {
var n = this;
return function (f, o) {
var d = new window.html2canvas.svg.fabric.StaticCanvas("c");
n.image = d.lowerCanvasEl, d.setWidth(o.width).setHeight(o.height).add(window.html2canvas.svg.fabric.util.groupSVGElements(f, o)).renderAll(), e(d.lowerCanvasEl)
}
}, f.prototype.decode64 = function (e) {
return "function" == typeof window.atob ? window.atob(e) : d(e)
}, n.exports = f
}, {"./utils": 26, "./xhr": 28}\], 24: \[function (e, n) {
function f(e, n) {
this.src = e, this.image = null;
var f = this;
this.promise = n ? new Promise(function (n, o) {
f.image = new Image, f.image.onload = n, f.image.onerror = o, f.image.src = "data:image/svg+xml," + (new XMLSerializer).serializeToString(e), f.image.complete === !0 && n(f.image)
}) : this.hasFabric().then(function () {
return new Promise(function (n) {
window.html2canvas.svg.fabric.parseSVGDocument(e, f.createCanvas.call(f, n))
})
})
}
var o = e("./svgcontainer");
f.prototype = Object.create(o.prototype), n.exports = f
}, {"./svgcontainer": 23}\], 25: \[function (e, n) {
function f(e, n) {
d.call(this, e, n)
}
function o(e, n, f) {
return e.length > 0 ? n + f.toUpperCase() : void 0
}
var d = e("./nodecontainer");
f.prototype = Object.create(d.prototype), f.prototype.applyTextTransform = function () {
this.node.data = this.transform(this.parent.css("textTransform"))
}, f.prototype.transform = function (e) {
var n = this.node.data;
switch (e) {
case"lowercase":
return n.toLowerCase();
case"capitalize":
return n.replace(/(^|\\s|:|-|\\(|\\))(\[a-z\])/g, o);
case"uppercase":
return n.toUpperCase();
default:
return n
}
}, n.exports = f
}, {"./nodecontainer": 14}\], 26: \[function (e, n, f) {
f.smallImage = function () {
return "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
}, f.bind = function (e, n) {
return function () {
return e.apply(n, arguments)
}
}, f.decode64 = function (e) {
var n, f, o, d, i, t, l, s, u = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/",
a = e.length, p = "";
for (n = 0; a > n; n += 4) f = u.indexOf(e\[n\]), o = u.indexOf(e\[n + 1\]), d = u.indexOf(e\[n + 2\]), i = u.indexOf(e\[n + 3\]), t = f << 2 | o >> 4, l = (15 & o) << 4 | d >> 2, s = (3 & d) << 6 | i, p += 64 === d ? String.fromCharCode(t) : 64 === i || -1 === i ? String.fromCharCode(t, l) : String.fromCharCode(t, l, s);
return p
}, f.getBounds = function (e) {
if (e.getBoundingClientRect) {
var n = e.getBoundingClientRect(), f = null == e.offsetWidth ? n.width : e.offsetWidth;
return {
top: n.top,
bottom: n.bottom || n.top + n.height,
right: n.left + f,
left: n.left,
width: f,
height: null == e.offsetHeight ? n.height : e.offsetHeight
}
}
return {}
}, f.offsetBounds = function (e) {
var n = e.offsetParent ? f.offsetBounds(e.offsetParent) : {top: 0, left: 0};
return {
top: e.offsetTop + n.top,
bottom: e.offsetTop + e.offsetHeight + n.top,
right: e.offsetLeft + n.left + e.offsetWidth,
left: e.offsetLeft + n.left,
width: e.offsetWidth,
height: e.offsetHeight
}
}, f.parseBackgrounds = function (e) {
var n, f, o, d, i, t, l, s = " \\r\\n ", u = \[\], a = 0, p = 0, c = function () {
n && ('"' === f.substr(0, 1) && (f = f.substr(1, f.length - 2)), f && l.push(f), "-" === n.substr(0, 1) && (d = n.indexOf("-", 1) + 1) > 0 && (o = n.substr(0, d), n = n.substr(d)), u.push({
prefix: o,
method: n.toLowerCase(),
value: i,
args: l,
image: null
})), l = \[\], n = o = f = i = ""
};
return l = \[\], n = o = f = i = "", e.split("").forEach(function (e) {
if (!(0 === a && s.indexOf(e) > -1)) {
switch (e) {
case'"':
t ? t === e && (t = null) : t = e;
break;
case"(":
if (t) break;
if (0 === a) return a = 1, void (i += e);
p++;
break;
case")":
if (t) break;
if (1 === a) {
if (0 === p) return a = 0, i += e, void c();
p--
}
break;
case",":
if (t) break;
if (0 === a) return void c();
if (1 === a && 0 === p && !n.match(/^url$/i)) return l.push(f), f = "", void (i += e)
}
i += e, 0 === a ? n += e : f += e
}
}), c(), u
}
}, {}\], 27: \[function (e, n) {
function f(e) {
o.apply(this, arguments), this.type = "linear" === e.args\[0\] ? o.TYPES.LINEAR : o.TYPES.RADIAL
}
var o = e("./gradientcontainer");
f.prototype = Object.create(o.prototype), n.exports = f
}, {"./gradientcontainer": 9}\], 28: \[function (e, n) {
function f(e) {
return new Promise(function (n, f) {
var o = new XMLHttpRequest;
o.open("GET", e), o.onload = function () {
200 === o.status ? n(o.responseText) : f(new Error(o.statusText))
}, o.onerror = function () {
f(new Error("Network Error"))
}, o.send()
})
}
n.exports = f
}, {}\]
}, {}, \[4\])(4) });
html2canvas.min.js
5.源码
我结合layerUi.js框架做了一个弹窗，动态编辑内容
1 //显示需要打印的数据 ,参数分别是 医院全称，订单id ,用户姓名 ，二维码图片路径
2 function showPrintData(hname, oid, time, name, qrurl,sName,fee) {
3 //显示信息
4 let text = '
' +
5 '
'; ' +
6 '
' +
7 '
' + 12 '
15 '
医院名称：' + hname + '
' +
8 '预约订单id：' + oid + '
' +
9 '科目：' + sName + '
' +
10 '预约时间：' + time + '
' +
11 '挂号金额：' + fee + ' 元
' + 12 '
姓名：' + name + '
' +
13 '' +
14 '![二维码]()
' + 15 '
16 layer.open({
17 type: 1,
18 title:"快照预览",
19 skin: 'layui-layer-rim', //加上边框
20 offset: popupTop + "px",
21 area: [popupWidth + 'px', popupHeight + 'px'],
22 content: text,
23 closeBtn: 0,
24 btn: '打印并完成业务',
25 yes: function (index, layero) {
26 //下载截图
27 doLoadQR(name);
28 layer.close(index);
29 },
30 });
31 //按钮点击打印即可关闭
32 isDoOrderOkOnce = false;
33 }
有 id="qrMy" 的div是关键 ，该库将会作用在这个div里面
触发生成快照
1 //本地下载快照 ，name是文件的部分名称
2 function doLoadQR(name) {
3 //新建一个画布元素
4 let canvas2 = document.createElement("canvas");
5 //获取该元素区块的本身宽高
6 let w = parseInt($('#qrMy').width());
7 let h = parseInt($('#qrMy').height());
8 // console.log(w+"======"+h);
9 //因为直接用默认画布会模糊，因此自定义画布，设置画布尺寸为容器的两倍大小，再将内容放大两倍画上去，
10 // 修改偏移量，就可以解决模糊问题
11 //画布真实宽高
12 canvas2.width = w * 2;
13 canvas2.height = h * 2;
14 //宽高宽高
15 canvas2.style.width = w + "px";
16 canvas2.style.height = h + "px";
17 //设置画布的内容
18 let context = canvas2.getContext("2d");
19 //x,y轴放大两倍
20 context.scale(2, 2);
21 //获取容器边距对象
22 let rect = $('#qrMy').get(0).getBoundingClientRect();
23 //设置偏移量
24 context.translate('-' + rect.left, '-' + rect.top);
25 //调用库
26 html2canvas(document.querySelector('#qrMy')
27 , {
28 useCORS: true,
29 scale: 2,
30 width: w,
31 height: h,
32 //使用自定义的画布
33 canvas: canvas2,
34 // window.devicePixelRatio是设备像素比
35 dpi: window.devicePixelRatio * 2,
36
37 }
38 ).then(function (canvas) {
39 // 回调生成的画布canvas对象
40 // 获取生成的图片的相对url，其实将bese64加密的数据 的数据类型image/png换成image/octet-stream
41 let imgUri = canvas.toDataURL("image/png")
42 .replace("image/png", "image/octet-stream");
43 //文件名称
44 let filename = (new Date()).getTime() + "_" + name + '.png';
45 //下载
46 saveFile(imgUri, filename);
47 });
48 }
//
如何自定义本地下载？
其实就是用，模拟点击即可
1 // * 在本地进行文件保存
2 // * @param {String} data 要保存到本地的图片数据/或路径
3 // * @param {String} filename 文件名
4 // */
5 function saveFile(data, filename) {
6 // 创建一个标签
7 let save_link = document.createElement('a');
8 save_link.href = data;
9 save_link.download = filename;
10 let event = document.createEvent('MouseEvents');
11 event.initMouseEvent('click', true, false, window, 0,
12 0, 0, 0, 0, false, false,
13 false, false, 0, null);
14 save_link.dispatchEvent(event);
15 }
手机扫一扫
移动阅读更方便
你可能感兴趣的文章