网页整页截图

Ctrl+F10 网页整页截图,焦点位于输入框时将输入框内文字转换为图片

当前为 2016-11-17 提交的版本,查看 最新版本

  1. // ==UserScript==
  2. // @name Capture current page
  3. // @name:zh-CN 网页整页截图
  4. // @name:zh-TW 網頁整頁截圖
  5. // @namespace hoothin
  6. // @version 0.1
  7. // @description Screen capture for current full page with Ctrl+F10, also be used to change text into image which inside the INPUT/TEXTAREA element.
  8. // @description:zh-CN Ctrl+F10 网页整页截图,焦点位于输入框时将输入框内文字转换为图片
  9. // @description:zh-TW Ctrl+F10 網頁整頁截圖,焦點位於輸入框時將輸入框内文字轉換為圖片
  10. // @author hoothin
  11. // @include http*://*
  12. // @grant GM_openInTab
  13. // @license MIT License
  14. // @compatible chrome
  15. // @compatible firefox
  16. // @contributionURL https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=rixixi@sina.com&item_name=Greasy+Fork+donation
  17. // @contributionAmount 1
  18. // ==/UserScript==
  19. !function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var f;"undefined"!=typeof window?f=window:"undefined"!=typeof global?f=global:"undefined"!=typeof self&&(f=self),f.html2canvas=e()}}(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(_dereq_,module,exports){
  20. (function (global){
  21. /*! http://mths.be/punycode v1.2.4 by @mathias */
  22. ;(function(root) {
  23.  
  24. /** Detect free variables */
  25. var freeExports = typeof exports == 'object' && exports;
  26. var freeModule = typeof module == 'object' && module &&
  27. module.exports == freeExports && module;
  28. var freeGlobal = typeof global == 'object' && global;
  29. if (freeGlobal.global === freeGlobal || freeGlobal.window === freeGlobal) {
  30. root = freeGlobal;
  31. }
  32.  
  33. /**
  34. * The `punycode` object.
  35. * @name punycode
  36. * @type Object
  37. */
  38. var punycode,
  39.  
  40. /** Highest positive signed 32-bit float value */
  41. maxInt = 2147483647, // aka. 0x7FFFFFFF or 2^31-1
  42.  
  43. /** Bootstring parameters */
  44. base = 36,
  45. tMin = 1,
  46. tMax = 26,
  47. skew = 38,
  48. damp = 700,
  49. initialBias = 72,
  50. initialN = 128, // 0x80
  51. delimiter = '-', // '\x2D'
  52.  
  53. /** Regular expressions */
  54. regexPunycode = /^xn--/,
  55. regexNonASCII = /[^ -~]/, // unprintable ASCII chars + non-ASCII chars
  56. regexSeparators = /\x2E|\u3002|\uFF0E|\uFF61/g, // RFC 3490 separators
  57.  
  58. /** Error messages */
  59. errors = {
  60. 'overflow': 'Overflow: input needs wider integers to process',
  61. 'not-basic': 'Illegal input >= 0x80 (not a basic code point)',
  62. 'invalid-input': 'Invalid input'
  63. },
  64.  
  65. /** Convenience shortcuts */
  66. baseMinusTMin = base - tMin,
  67. floor = Math.floor,
  68. stringFromCharCode = String.fromCharCode,
  69.  
  70. /** Temporary variable */
  71. key;
  72.  
  73. /*--------------------------------------------------------------------------*/
  74.  
  75. /**
  76. * A generic error utility function.
  77. * @private
  78. * @param {String} type The error type.
  79. * @returns {Error} Throws a `RangeError` with the applicable error message.
  80. */
  81. function error(type) {
  82. throw RangeError(errors[type]);
  83. }
  84.  
  85. /**
  86. * A generic `Array#map` utility function.
  87. * @private
  88. * @param {Array} array The array to iterate over.
  89. * @param {Function} callback The function that gets called for every array
  90. * item.
  91. * @returns {Array} A new array of values returned by the callback function.
  92. */
  93. function map(array, fn) {
  94. var length = array.length;
  95. while (length--) {
  96. array[length] = fn(array[length]);
  97. }
  98. return array;
  99. }
  100.  
  101. /**
  102. * A simple `Array#map`-like wrapper to work with domain name strings.
  103. * @private
  104. * @param {String} domain The domain name.
  105. * @param {Function} callback The function that gets called for every
  106. * character.
  107. * @returns {Array} A new string of characters returned by the callback
  108. * function.
  109. */
  110. function mapDomain(string, fn) {
  111. return map(string.split(regexSeparators), fn).join('.');
  112. }
  113.  
  114. /**
  115. * Creates an array containing the numeric code points of each Unicode
  116. * character in the string. While JavaScript uses UCS-2 internally,
  117. * this function will convert a pair of surrogate halves (each of which
  118. * UCS-2 exposes as separate characters) into a single code point,
  119. * matching UTF-16.
  120. * @see `punycode.ucs2.encode`
  121. * @see <http://mathiasbynens.be/notes/javascript-encoding>
  122. * @memberOf punycode.ucs2
  123. * @name decode
  124. * @param {String} string The Unicode input string (UCS-2).
  125. * @returns {Array} The new array of code points.
  126. */
  127. function ucs2decode(string) {
  128. var output = [],
  129. counter = 0,
  130. length = string.length,
  131. value,
  132. extra;
  133. while (counter < length) {
  134. value = string.charCodeAt(counter++);
  135. if (value >= 0xD800 && value <= 0xDBFF && counter < length) {
  136. // high surrogate, and there is a next character
  137. extra = string.charCodeAt(counter++);
  138. if ((extra & 0xFC00) == 0xDC00) { // low surrogate
  139. output.push(((value & 0x3FF) << 10) + (extra & 0x3FF) + 0x10000);
  140. } else {
  141. // unmatched surrogate; only append this code unit, in case the next
  142. // code unit is the high surrogate of a surrogate pair
  143. output.push(value);
  144. counter--;
  145. }
  146. } else {
  147. output.push(value);
  148. }
  149. }
  150. return output;
  151. }
  152.  
  153. /**
  154. * Creates a string based on an array of numeric code points.
  155. * @see `punycode.ucs2.decode`
  156. * @memberOf punycode.ucs2
  157. * @name encode
  158. * @param {Array} codePoints The array of numeric code points.
  159. * @returns {String} The new Unicode string (UCS-2).
  160. */
  161. function ucs2encode(array) {
  162. return map(array, function(value) {
  163. var output = '';
  164. if (value > 0xFFFF) {
  165. value -= 0x10000;
  166. output += stringFromCharCode(value >>> 10 & 0x3FF | 0xD800);
  167. value = 0xDC00 | value & 0x3FF;
  168. }
  169. output += stringFromCharCode(value);
  170. return output;
  171. }).join('');
  172. }
  173.  
  174. /**
  175. * Converts a basic code point into a digit/integer.
  176. * @see `digitToBasic()`
  177. * @private
  178. * @param {Number} codePoint The basic numeric code point value.
  179. * @returns {Number} The numeric value of a basic code point (for use in
  180. * representing integers) in the range `0` to `base - 1`, or `base` if
  181. * the code point does not represent a value.
  182. */
  183. function basicToDigit(codePoint) {
  184. if (codePoint - 48 < 10) {
  185. return codePoint - 22;
  186. }
  187. if (codePoint - 65 < 26) {
  188. return codePoint - 65;
  189. }
  190. if (codePoint - 97 < 26) {
  191. return codePoint - 97;
  192. }
  193. return base;
  194. }
  195.  
  196. /**
  197. * Converts a digit/integer into a basic code point.
  198. * @see `basicToDigit()`
  199. * @private
  200. * @param {Number} digit The numeric value of a basic code point.
  201. * @returns {Number} The basic code point whose value (when used for
  202. * representing integers) is `digit`, which needs to be in the range
  203. * `0` to `base - 1`. If `flag` is non-zero, the uppercase form is
  204. * used; else, the lowercase form is used. The behavior is undefined
  205. * if `flag` is non-zero and `digit` has no uppercase form.
  206. */
  207. function digitToBasic(digit, flag) {
  208. // 0..25 map to ASCII a..z or A..Z
  209. // 26..35 map to ASCII 0..9
  210. return digit + 22 + 75 * (digit < 26) - ((flag != 0) << 5);
  211. }
  212.  
  213. /**
  214. * Bias adaptation function as per section 3.4 of RFC 3492.
  215. * http://tools.ietf.org/html/rfc3492#section-3.4
  216. * @private
  217. */
  218. function adapt(delta, numPoints, firstTime) {
  219. var k = 0;
  220. delta = firstTime ? floor(delta / damp) : delta >> 1;
  221. delta += floor(delta / numPoints);
  222. for (/* no initialization */; delta > baseMinusTMin * tMax >> 1; k += base) {
  223. delta = floor(delta / baseMinusTMin);
  224. }
  225. return floor(k + (baseMinusTMin + 1) * delta / (delta + skew));
  226. }
  227.  
  228. /**
  229. * Converts a Punycode string of ASCII-only symbols to a string of Unicode
  230. * symbols.
  231. * @memberOf punycode
  232. * @param {String} input The Punycode string of ASCII-only symbols.
  233. * @returns {String} The resulting string of Unicode symbols.
  234. */
  235. function decode(input) {
  236. // Don't use UCS-2
  237. var output = [],
  238. inputLength = input.length,
  239. out,
  240. i = 0,
  241. n = initialN,
  242. bias = initialBias,
  243. basic,
  244. j,
  245. index,
  246. oldi,
  247. w,
  248. k,
  249. digit,
  250. t,
  251. /** Cached calculation results */
  252. baseMinusT;
  253.  
  254. // Handle the basic code points: let `basic` be the number of input code
  255. // points before the last delimiter, or `0` if there is none, then copy
  256. // the first basic code points to the output.
  257.  
  258. basic = input.lastIndexOf(delimiter);
  259. if (basic < 0) {
  260. basic = 0;
  261. }
  262.  
  263. for (j = 0; j < basic; ++j) {
  264. // if it's not a basic code point
  265. if (input.charCodeAt(j) >= 0x80) {
  266. error('not-basic');
  267. }
  268. output.push(input.charCodeAt(j));
  269. }
  270.  
  271. // Main decoding loop: start just after the last delimiter if any basic code
  272. // points were copied; start at the beginning otherwise.
  273.  
  274. for (index = basic > 0 ? basic + 1 : 0; index < inputLength; /* no final expression */) {
  275.  
  276. // `index` is the index of the next character to be consumed.
  277. // Decode a generalized variable-length integer into `delta`,
  278. // which gets added to `i`. The overflow checking is easier
  279. // if we increase `i` as we go, then subtract off its starting
  280. // value at the end to obtain `delta`.
  281. for (oldi = i, w = 1, k = base; /* no condition */; k += base) {
  282.  
  283. if (index >= inputLength) {
  284. error('invalid-input');
  285. }
  286.  
  287. digit = basicToDigit(input.charCodeAt(index++));
  288.  
  289. if (digit >= base || digit > floor((maxInt - i) / w)) {
  290. error('overflow');
  291. }
  292.  
  293. i += digit * w;
  294. t = k <= bias ? tMin : (k >= bias + tMax ? tMax : k - bias);
  295.  
  296. if (digit < t) {
  297. break;
  298. }
  299.  
  300. baseMinusT = base - t;
  301. if (w > floor(maxInt / baseMinusT)) {
  302. error('overflow');
  303. }
  304.  
  305. w *= baseMinusT;
  306.  
  307. }
  308.  
  309. out = output.length + 1;
  310. bias = adapt(i - oldi, out, oldi == 0);
  311.  
  312. // `i` was supposed to wrap around from `out` to `0`,
  313. // incrementing `n` each time, so we'll fix that now:
  314. if (floor(i / out) > maxInt - n) {
  315. error('overflow');
  316. }
  317.  
  318. n += floor(i / out);
  319. i %= out;
  320.  
  321. // Insert `n` at position `i` of the output
  322. output.splice(i++, 0, n);
  323.  
  324. }
  325.  
  326. return ucs2encode(output);
  327. }
  328.  
  329. /**
  330. * Converts a string of Unicode symbols to a Punycode string of ASCII-only
  331. * symbols.
  332. * @memberOf punycode
  333. * @param {String} input The string of Unicode symbols.
  334. * @returns {String} The resulting Punycode string of ASCII-only symbols.
  335. */
  336. function encode(input) {
  337. var n,
  338. delta,
  339. handledCPCount,
  340. basicLength,
  341. bias,
  342. j,
  343. m,
  344. q,
  345. k,
  346. t,
  347. currentValue,
  348. output = [],
  349. /** `inputLength` will hold the number of code points in `input`. */
  350. inputLength,
  351. /** Cached calculation results */
  352. handledCPCountPlusOne,
  353. baseMinusT,
  354. qMinusT;
  355.  
  356. // Convert the input in UCS-2 to Unicode
  357. input = ucs2decode(input);
  358.  
  359. // Cache the length
  360. inputLength = input.length;
  361.  
  362. // Initialize the state
  363. n = initialN;
  364. delta = 0;
  365. bias = initialBias;
  366.  
  367. // Handle the basic code points
  368. for (j = 0; j < inputLength; ++j) {
  369. currentValue = input[j];
  370. if (currentValue < 0x80) {
  371. output.push(stringFromCharCode(currentValue));
  372. }
  373. }
  374.  
  375. handledCPCount = basicLength = output.length;
  376.  
  377. // `handledCPCount` is the number of code points that have been handled;
  378. // `basicLength` is the number of basic code points.
  379.  
  380. // Finish the basic string - if it is not empty - with a delimiter
  381. if (basicLength) {
  382. output.push(delimiter);
  383. }
  384.  
  385. // Main encoding loop:
  386. while (handledCPCount < inputLength) {
  387.  
  388. // All non-basic code points < n have been handled already. Find the next
  389. // larger one:
  390. for (m = maxInt, j = 0; j < inputLength; ++j) {
  391. currentValue = input[j];
  392. if (currentValue >= n && currentValue < m) {
  393. m = currentValue;
  394. }
  395. }
  396.  
  397. // Increase `delta` enough to advance the decoder's <n,i> state to <m,0>,
  398. // but guard against overflow
  399. handledCPCountPlusOne = handledCPCount + 1;
  400. if (m - n > floor((maxInt - delta) / handledCPCountPlusOne)) {
  401. error('overflow');
  402. }
  403.  
  404. delta += (m - n) * handledCPCountPlusOne;
  405. n = m;
  406.  
  407. for (j = 0; j < inputLength; ++j) {
  408. currentValue = input[j];
  409.  
  410. if (currentValue < n && ++delta > maxInt) {
  411. error('overflow');
  412. }
  413.  
  414. if (currentValue == n) {
  415. // Represent delta as a generalized variable-length integer
  416. for (q = delta, k = base; /* no condition */; k += base) {
  417. t = k <= bias ? tMin : (k >= bias + tMax ? tMax : k - bias);
  418. if (q < t) {
  419. break;
  420. }
  421. qMinusT = q - t;
  422. baseMinusT = base - t;
  423. output.push(
  424. stringFromCharCode(digitToBasic(t + qMinusT % baseMinusT, 0))
  425. );
  426. q = floor(qMinusT / baseMinusT);
  427. }
  428.  
  429. output.push(stringFromCharCode(digitToBasic(q, 0)));
  430. bias = adapt(delta, handledCPCountPlusOne, handledCPCount == basicLength);
  431. delta = 0;
  432. ++handledCPCount;
  433. }
  434. }
  435.  
  436. ++delta;
  437. ++n;
  438.  
  439. }
  440. return output.join('');
  441. }
  442.  
  443. /**
  444. * Converts a Punycode string representing a domain name to Unicode. Only the
  445. * Punycoded parts of the domain name will be converted, i.e. it doesn't
  446. * matter if you call it on a string that has already been converted to
  447. * Unicode.
  448. * @memberOf punycode
  449. * @param {String} domain The Punycode domain name to convert to Unicode.
  450. * @returns {String} The Unicode representation of the given Punycode
  451. * string.
  452. */
  453. function toUnicode(domain) {
  454. return mapDomain(domain, function(string) {
  455. return regexPunycode.test(string)
  456. ? decode(string.slice(4).toLowerCase())
  457. : string;
  458. });
  459. }
  460.  
  461. /**
  462. * Converts a Unicode string representing a domain name to Punycode. Only the
  463. * non-ASCII parts of the domain name will be converted, i.e. it doesn't
  464. * matter if you call it with a domain that's already in ASCII.
  465. * @memberOf punycode
  466. * @param {String} domain The domain name to convert, as a Unicode string.
  467. * @returns {String} The Punycode representation of the given domain name.
  468. */
  469. function toASCII(domain) {
  470. return mapDomain(domain, function(string) {
  471. return regexNonASCII.test(string)
  472. ? 'xn--' + encode(string)
  473. : string;
  474. });
  475. }
  476.  
  477. /*--------------------------------------------------------------------------*/
  478.  
  479. /** Define the public API */
  480. punycode = {
  481. /**
  482. * A string representing the current Punycode.js version number.
  483. * @memberOf punycode
  484. * @type String
  485. */
  486. 'version': '1.2.4',
  487. /**
  488. * An object of methods to convert from JavaScript's internal character
  489. * representation (UCS-2) to Unicode code points, and back.
  490. * @see <http://mathiasbynens.be/notes/javascript-encoding>
  491. * @memberOf punycode
  492. * @type Object
  493. */
  494. 'ucs2': {
  495. 'decode': ucs2decode,
  496. 'encode': ucs2encode
  497. },
  498. 'decode': decode,
  499. 'encode': encode,
  500. 'toASCII': toASCII,
  501. 'toUnicode': toUnicode
  502. };
  503.  
  504. /** Expose `punycode` */
  505. // Some AMD build optimizers, like r.js, check for specific condition patterns
  506. // like the following:
  507. if (
  508. typeof define == 'function' &&
  509. typeof define.amd == 'object' &&
  510. define.amd
  511. ) {
  512. define('punycode', function() {
  513. return punycode;
  514. });
  515. } else if (freeExports && !freeExports.nodeType) {
  516. if (freeModule) { // in Node.js or RingoJS v0.8.0+
  517. freeModule.exports = punycode;
  518. } else { // in Narwhal or RingoJS v0.7.0-
  519. for (key in punycode) {
  520. punycode.hasOwnProperty(key) && (freeExports[key] = punycode[key]);
  521. }
  522. }
  523. } else { // in Rhino or a web browser
  524. root.punycode = punycode;
  525. }
  526.  
  527. }(this));
  528.  
  529. }).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
  530. },{}],2:[function(_dereq_,module,exports){
  531. var log = _dereq_('./log');
  532.  
  533. function restoreOwnerScroll(ownerDocument, x, y) {
  534. if (ownerDocument.defaultView && (x !== ownerDocument.defaultView.pageXOffset || y !== ownerDocument.defaultView.pageYOffset)) {
  535. ownerDocument.defaultView.scrollTo(x, y);
  536. }
  537. }
  538.  
  539. function cloneCanvasContents(canvas, clonedCanvas) {
  540. try {
  541. if (clonedCanvas) {
  542. clonedCanvas.width = canvas.width;
  543. clonedCanvas.height = canvas.height;
  544. clonedCanvas.getContext("2d").putImageData(canvas.getContext("2d").getImageData(0, 0, canvas.width, canvas.height), 0, 0);
  545. }
  546. } catch(e) {
  547. log("Unable to copy canvas content from", canvas, e);
  548. }
  549. }
  550.  
  551. function cloneNode(node, javascriptEnabled) {
  552. var clone = node.nodeType === 3 ? document.createTextNode(node.nodeValue) : node.cloneNode(false);
  553.  
  554. var child = node.firstChild;
  555. while(child) {
  556. if (javascriptEnabled === true || child.nodeType !== 1 || child.nodeName !== 'SCRIPT') {
  557. clone.appendChild(cloneNode(child, javascriptEnabled));
  558. }
  559. child = child.nextSibling;
  560. }
  561.  
  562. if (node.nodeType === 1) {
  563. clone._scrollTop = node.scrollTop;
  564. clone._scrollLeft = node.scrollLeft;
  565. if (node.nodeName === "CANVAS") {
  566. cloneCanvasContents(node, clone);
  567. } else if (node.nodeName === "TEXTAREA" || node.nodeName === "SELECT") {
  568. clone.value = node.value;
  569. }
  570. }
  571.  
  572. return clone;
  573. }
  574.  
  575. function initNode(node) {
  576. if (node.nodeType === 1) {
  577. node.scrollTop = node._scrollTop;
  578. node.scrollLeft = node._scrollLeft;
  579.  
  580. var child = node.firstChild;
  581. while(child) {
  582. initNode(child);
  583. child = child.nextSibling;
  584. }
  585. }
  586. }
  587.  
  588. module.exports = function(ownerDocument, containerDocument, width, height, options, x ,y) {
  589. var documentElement = cloneNode(ownerDocument.documentElement, options.javascriptEnabled);
  590. var container = containerDocument.createElement("iframe");
  591.  
  592. container.className = "html2canvas-container";
  593. container.style.visibility = "hidden";
  594. container.style.position = "fixed";
  595. container.style.left = "-10000px";
  596. container.style.top = "0px";
  597. container.style.border = "0";
  598. container.width = width;
  599. container.height = height;
  600. container.scrolling = "no"; // ios won't scroll without it
  601. containerDocument.body.appendChild(container);
  602.  
  603. return new Promise(function(resolve) {
  604. var documentClone = container.contentWindow.document;
  605.  
  606. /* Chrome doesn't detect relative background-images assigned in inline <style> sheets when fetched through getComputedStyle
  607. if window url is about:blank, we can assign the url to current by writing onto the document
  608. */
  609. container.contentWindow.onload = container.onload = function() {
  610. var interval = setInterval(function() {
  611. if (documentClone.body.childNodes.length > 0) {
  612. initNode(documentClone.documentElement);
  613. clearInterval(interval);
  614. if (options.type === "view") {
  615. container.contentWindow.scrollTo(x, y);
  616. if ((/(iPad|iPhone|iPod)/g).test(navigator.userAgent) && (container.contentWindow.scrollY !== y || container.contentWindow.scrollX !== x)) {
  617. documentClone.documentElement.style.top = (-y) + "px";
  618. documentClone.documentElement.style.left = (-x) + "px";
  619. documentClone.documentElement.style.position = 'absolute';
  620. }
  621. }
  622. resolve(container);
  623. }
  624. }, 50);
  625. };
  626.  
  627. documentClone.open();
  628. documentClone.write("<!DOCTYPE html><html></html>");
  629. // Chrome scrolls the parent document for some reason after the write to the cloned window???
  630. restoreOwnerScroll(ownerDocument, x, y);
  631. documentClone.replaceChild(documentClone.adoptNode(documentElement), documentClone.documentElement);
  632. documentClone.close();
  633. });
  634. };
  635.  
  636. },{"./log":13}],3:[function(_dereq_,module,exports){
  637. // http://dev.w3.org/csswg/css-color/
  638.  
  639. function Color(value) {
  640. this.r = 0;
  641. this.g = 0;
  642. this.b = 0;
  643. this.a = null;
  644. var result = this.fromArray(value) ||
  645. this.namedColor(value) ||
  646. this.rgb(value) ||
  647. this.rgba(value) ||
  648. this.hex6(value) ||
  649. this.hex3(value);
  650. }
  651.  
  652. Color.prototype.darken = function(amount) {
  653. var a = 1 - amount;
  654. return new Color([
  655. Math.round(this.r * a),
  656. Math.round(this.g * a),
  657. Math.round(this.b * a),
  658. this.a
  659. ]);
  660. };
  661.  
  662. Color.prototype.isTransparent = function() {
  663. return this.a === 0;
  664. };
  665.  
  666. Color.prototype.isBlack = function() {
  667. return this.r === 0 && this.g === 0 && this.b === 0;
  668. };
  669.  
  670. Color.prototype.fromArray = function(array) {
  671. if (Array.isArray(array)) {
  672. this.r = Math.min(array[0], 255);
  673. this.g = Math.min(array[1], 255);
  674. this.b = Math.min(array[2], 255);
  675. if (array.length > 3) {
  676. this.a = array[3];
  677. }
  678. }
  679.  
  680. return (Array.isArray(array));
  681. };
  682.  
  683. var _hex3 = /^#([a-f0-9]{3})$/i;
  684.  
  685. Color.prototype.hex3 = function(value) {
  686. var match = null;
  687. if ((match = value.match(_hex3)) !== null) {
  688. this.r = parseInt(match[1][0] + match[1][0], 16);
  689. this.g = parseInt(match[1][1] + match[1][1], 16);
  690. this.b = parseInt(match[1][2] + match[1][2], 16);
  691. }
  692. return match !== null;
  693. };
  694.  
  695. var _hex6 = /^#([a-f0-9]{6})$/i;
  696.  
  697. Color.prototype.hex6 = function(value) {
  698. var match = null;
  699. if ((match = value.match(_hex6)) !== null) {
  700. this.r = parseInt(match[1].substring(0, 2), 16);
  701. this.g = parseInt(match[1].substring(2, 4), 16);
  702. this.b = parseInt(match[1].substring(4, 6), 16);
  703. }
  704. return match !== null;
  705. };
  706.  
  707.  
  708. var _rgb = /^rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)$/;
  709.  
  710. Color.prototype.rgb = function(value) {
  711. var match = null;
  712. if ((match = value.match(_rgb)) !== null) {
  713. this.r = Number(match[1]);
  714. this.g = Number(match[2]);
  715. this.b = Number(match[3]);
  716. }
  717. return match !== null;
  718. };
  719.  
  720. var _rgba = /^rgba\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d?\.?\d+)\s*\)$/;
  721.  
  722. Color.prototype.rgba = function(value) {
  723. var match = null;
  724. if ((match = value.match(_rgba)) !== null) {
  725. this.r = Number(match[1]);
  726. this.g = Number(match[2]);
  727. this.b = Number(match[3]);
  728. this.a = Number(match[4]);
  729. }
  730. return match !== null;
  731. };
  732.  
  733. Color.prototype.toString = function() {
  734. return this.a !== null && this.a !== 1 ?
  735. "rgba(" + [this.r, this.g, this.b, this.a].join(",") + ")" :
  736. "rgb(" + [this.r, this.g, this.b].join(",") + ")";
  737. };
  738.  
  739. Color.prototype.namedColor = function(value) {
  740. value = value.toLowerCase();
  741. var color = colors[value];
  742. if (color) {
  743. this.r = color[0];
  744. this.g = color[1];
  745. this.b = color[2];
  746. } else if (value === "transparent") {
  747. this.r = this.g = this.b = this.a = 0;
  748. return true;
  749. }
  750.  
  751. return !!color;
  752. };
  753.  
  754. Color.prototype.isColor = true;
  755.  
  756. // JSON.stringify([].slice.call($$('.named-color-table tr'), 1).map(function(row) { return [row.childNodes[3].textContent, row.childNodes[5].textContent.trim().split(",").map(Number)] }).reduce(function(data, row) {data[row[0]] = row[1]; return data}, {}))
  757. var colors = {
  758. "aliceblue": [240, 248, 255],
  759. "antiquewhite": [250, 235, 215],
  760. "aqua": [0, 255, 255],
  761. "aquamarine": [127, 255, 212],
  762. "azure": [240, 255, 255],
  763. "beige": [245, 245, 220],
  764. "bisque": [255, 228, 196],
  765. "black": [0, 0, 0],
  766. "blanchedalmond": [255, 235, 205],
  767. "blue": [0, 0, 255],
  768. "blueviolet": [138, 43, 226],
  769. "brown": [165, 42, 42],
  770. "burlywood": [222, 184, 135],
  771. "cadetblue": [95, 158, 160],
  772. "chartreuse": [127, 255, 0],
  773. "chocolate": [210, 105, 30],
  774. "coral": [255, 127, 80],
  775. "cornflowerblue": [100, 149, 237],
  776. "cornsilk": [255, 248, 220],
  777. "crimson": [220, 20, 60],
  778. "cyan": [0, 255, 255],
  779. "darkblue": [0, 0, 139],
  780. "darkcyan": [0, 139, 139],
  781. "darkgoldenrod": [184, 134, 11],
  782. "darkgray": [169, 169, 169],
  783. "darkgreen": [0, 100, 0],
  784. "darkgrey": [169, 169, 169],
  785. "darkkhaki": [189, 183, 107],
  786. "darkmagenta": [139, 0, 139],
  787. "darkolivegreen": [85, 107, 47],
  788. "darkorange": [255, 140, 0],
  789. "darkorchid": [153, 50, 204],
  790. "darkred": [139, 0, 0],
  791. "darksalmon": [233, 150, 122],
  792. "darkseagreen": [143, 188, 143],
  793. "darkslateblue": [72, 61, 139],
  794. "darkslategray": [47, 79, 79],
  795. "darkslategrey": [47, 79, 79],
  796. "darkturquoise": [0, 206, 209],
  797. "darkviolet": [148, 0, 211],
  798. "deeppink": [255, 20, 147],
  799. "deepskyblue": [0, 191, 255],
  800. "dimgray": [105, 105, 105],
  801. "dimgrey": [105, 105, 105],
  802. "dodgerblue": [30, 144, 255],
  803. "firebrick": [178, 34, 34],
  804. "floralwhite": [255, 250, 240],
  805. "forestgreen": [34, 139, 34],
  806. "fuchsia": [255, 0, 255],
  807. "gainsboro": [220, 220, 220],
  808. "ghostwhite": [248, 248, 255],
  809. "gold": [255, 215, 0],
  810. "goldenrod": [218, 165, 32],
  811. "gray": [128, 128, 128],
  812. "green": [0, 128, 0],
  813. "greenyellow": [173, 255, 47],
  814. "grey": [128, 128, 128],
  815. "honeydew": [240, 255, 240],
  816. "hotpink": [255, 105, 180],
  817. "indianred": [205, 92, 92],
  818. "indigo": [75, 0, 130],
  819. "ivory": [255, 255, 240],
  820. "khaki": [240, 230, 140],
  821. "lavender": [230, 230, 250],
  822. "lavenderblush": [255, 240, 245],
  823. "lawngreen": [124, 252, 0],
  824. "lemonchiffon": [255, 250, 205],
  825. "lightblue": [173, 216, 230],
  826. "lightcoral": [240, 128, 128],
  827. "lightcyan": [224, 255, 255],
  828. "lightgoldenrodyellow": [250, 250, 210],
  829. "lightgray": [211, 211, 211],
  830. "lightgreen": [144, 238, 144],
  831. "lightgrey": [211, 211, 211],
  832. "lightpink": [255, 182, 193],
  833. "lightsalmon": [255, 160, 122],
  834. "lightseagreen": [32, 178, 170],
  835. "lightskyblue": [135, 206, 250],
  836. "lightslategray": [119, 136, 153],
  837. "lightslategrey": [119, 136, 153],
  838. "lightsteelblue": [176, 196, 222],
  839. "lightyellow": [255, 255, 224],
  840. "lime": [0, 255, 0],
  841. "limegreen": [50, 205, 50],
  842. "linen": [250, 240, 230],
  843. "magenta": [255, 0, 255],
  844. "maroon": [128, 0, 0],
  845. "mediumaquamarine": [102, 205, 170],
  846. "mediumblue": [0, 0, 205],
  847. "mediumorchid": [186, 85, 211],
  848. "mediumpurple": [147, 112, 219],
  849. "mediumseagreen": [60, 179, 113],
  850. "mediumslateblue": [123, 104, 238],
  851. "mediumspringgreen": [0, 250, 154],
  852. "mediumturquoise": [72, 209, 204],
  853. "mediumvioletred": [199, 21, 133],
  854. "midnightblue": [25, 25, 112],
  855. "mintcream": [245, 255, 250],
  856. "mistyrose": [255, 228, 225],
  857. "moccasin": [255, 228, 181],
  858. "navajowhite": [255, 222, 173],
  859. "navy": [0, 0, 128],
  860. "oldlace": [253, 245, 230],
  861. "olive": [128, 128, 0],
  862. "olivedrab": [107, 142, 35],
  863. "orange": [255, 165, 0],
  864. "orangered": [255, 69, 0],
  865. "orchid": [218, 112, 214],
  866. "palegoldenrod": [238, 232, 170],
  867. "palegreen": [152, 251, 152],
  868. "paleturquoise": [175, 238, 238],
  869. "palevioletred": [219, 112, 147],
  870. "papayawhip": [255, 239, 213],
  871. "peachpuff": [255, 218, 185],
  872. "peru": [205, 133, 63],
  873. "pink": [255, 192, 203],
  874. "plum": [221, 160, 221],
  875. "powderblue": [176, 224, 230],
  876. "purple": [128, 0, 128],
  877. "rebeccapurple": [102, 51, 153],
  878. "red": [255, 0, 0],
  879. "rosybrown": [188, 143, 143],
  880. "royalblue": [65, 105, 225],
  881. "saddlebrown": [139, 69, 19],
  882. "salmon": [250, 128, 114],
  883. "sandybrown": [244, 164, 96],
  884. "seagreen": [46, 139, 87],
  885. "seashell": [255, 245, 238],
  886. "sienna": [160, 82, 45],
  887. "silver": [192, 192, 192],
  888. "skyblue": [135, 206, 235],
  889. "slateblue": [106, 90, 205],
  890. "slategray": [112, 128, 144],
  891. "slategrey": [112, 128, 144],
  892. "snow": [255, 250, 250],
  893. "springgreen": [0, 255, 127],
  894. "steelblue": [70, 130, 180],
  895. "tan": [210, 180, 140],
  896. "teal": [0, 128, 128],
  897. "thistle": [216, 191, 216],
  898. "tomato": [255, 99, 71],
  899. "turquoise": [64, 224, 208],
  900. "violet": [238, 130, 238],
  901. "wheat": [245, 222, 179],
  902. "white": [255, 255, 255],
  903. "whitesmoke": [245, 245, 245],
  904. "yellow": [255, 255, 0],
  905. "yellowgreen": [154, 205, 50]
  906. };
  907.  
  908. module.exports = Color;
  909.  
  910. },{}],4:[function(_dereq_,module,exports){
  911. var Support = _dereq_('./support');
  912. var CanvasRenderer = _dereq_('./renderers/canvas');
  913. var ImageLoader = _dereq_('./imageloader');
  914. var NodeParser = _dereq_('./nodeparser');
  915. var NodeContainer = _dereq_('./nodecontainer');
  916. var log = _dereq_('./log');
  917. var utils = _dereq_('./utils');
  918. var createWindowClone = _dereq_('./clone');
  919. var loadUrlDocument = _dereq_('./proxy').loadUrlDocument;
  920. var getBounds = utils.getBounds;
  921.  
  922. var html2canvasNodeAttribute = "data-html2canvas-node";
  923. var html2canvasCloneIndex = 0;
  924.  
  925. function html2canvas(nodeList, options) {
  926. var index = html2canvasCloneIndex++;
  927. options = options || {};
  928. if (options.logging) {
  929. log.options.logging = true;
  930. log.options.start = Date.now();
  931. }
  932.  
  933. options.async = typeof(options.async) === "undefined" ? true : options.async;
  934. options.allowTaint = typeof(options.allowTaint) === "undefined" ? false : options.allowTaint;
  935. options.removeContainer = typeof(options.removeContainer) === "undefined" ? true : options.removeContainer;
  936. options.javascriptEnabled = typeof(options.javascriptEnabled) === "undefined" ? false : options.javascriptEnabled;
  937. options.imageTimeout = typeof(options.imageTimeout) === "undefined" ? 10000 : options.imageTimeout;
  938. options.renderer = typeof(options.renderer) === "function" ? options.renderer : CanvasRenderer;
  939. options.strict = !!options.strict;
  940.  
  941. if (typeof(nodeList) === "string") {
  942. if (typeof(options.proxy) !== "string") {
  943. return Promise.reject("Proxy must be used when rendering url");
  944. }
  945. var width = options.width != null ? options.width : window.innerWidth;
  946. var height = options.height != null ? options.height : window.innerHeight;
  947. return loadUrlDocument(absoluteUrl(nodeList), options.proxy, document, width, height, options).then(function(container) {
  948. return renderWindow(container.contentWindow.document.documentElement, container, options, width, height);
  949. });
  950. }
  951.  
  952. var node = ((nodeList === undefined) ? [document.documentElement] : ((nodeList.length) ? nodeList : [nodeList]))[0];
  953. node.setAttribute(html2canvasNodeAttribute + index, index);
  954. return renderDocument(node.ownerDocument, options, node.ownerDocument.defaultView.innerWidth, node.ownerDocument.defaultView.innerHeight, index).then(function(canvas) {
  955. if (typeof(options.onrendered) === "function") {
  956. log("options.onrendered is deprecated, html2canvas returns a Promise containing the canvas");
  957. options.onrendered(canvas);
  958. }
  959. return canvas;
  960. });
  961. }
  962.  
  963. html2canvas.CanvasRenderer = CanvasRenderer;
  964. html2canvas.NodeContainer = NodeContainer;
  965. html2canvas.log = log;
  966. html2canvas.utils = utils;
  967.  
  968. var html2canvasExport = (typeof(document) === "undefined" || typeof(Object.create) !== "function" || typeof(document.createElement("canvas").getContext) !== "function") ? function() {
  969. return Promise.reject("No canvas support");
  970. } : html2canvas;
  971.  
  972. module.exports = html2canvasExport;
  973.  
  974. if (typeof(define) === 'function' && define.amd) {
  975. define('html2canvas', [], function() {
  976. return html2canvasExport;
  977. });
  978. }
  979.  
  980. function renderDocument(document, options, windowWidth, windowHeight, html2canvasIndex) {
  981. return createWindowClone(document, document, windowWidth, windowHeight, options, document.defaultView.pageXOffset, document.defaultView.pageYOffset).then(function(container) {
  982. log("Document cloned");
  983. var attributeName = html2canvasNodeAttribute + html2canvasIndex;
  984. var selector = "[" + attributeName + "='" + html2canvasIndex + "']";
  985. document.querySelector(selector).removeAttribute(attributeName);
  986. var clonedWindow = container.contentWindow;
  987. var node = clonedWindow.document.querySelector(selector);
  988. var oncloneHandler = (typeof(options.onclone) === "function") ? Promise.resolve(options.onclone(clonedWindow.document)) : Promise.resolve(true);
  989. return oncloneHandler.then(function() {
  990. return renderWindow(node, container, options, windowWidth, windowHeight);
  991. });
  992. });
  993. }
  994.  
  995. function renderWindow(node, container, options, windowWidth, windowHeight) {
  996. var clonedWindow = container.contentWindow;
  997. var support = new Support(clonedWindow.document);
  998. var imageLoader = new ImageLoader(options, support);
  999. var bounds = getBounds(node);
  1000. var width = options.type === "view" ? windowWidth : documentWidth(clonedWindow.document);
  1001. var height = options.type === "view" ? windowHeight : documentHeight(clonedWindow.document);
  1002. var renderer = new options.renderer(width, height, imageLoader, options, document);
  1003. var parser = new NodeParser(node, renderer, support, imageLoader, options);
  1004. return parser.ready.then(function() {
  1005. log("Finished rendering");
  1006. var canvas;
  1007.  
  1008. if (options.type === "view") {
  1009. canvas = crop(renderer.canvas, {width: renderer.canvas.width, height: renderer.canvas.height, top: 0, left: 0, x: 0, y: 0});
  1010. } else if (node === clonedWindow.document.body || node === clonedWindow.document.documentElement || options.canvas != null) {
  1011. canvas = renderer.canvas;
  1012. } else {
  1013. canvas = crop(renderer.canvas, {width: options.width != null ? options.width : bounds.width, height: options.height != null ? options.height : bounds.height, top: bounds.top, left: bounds.left, x: 0, y: 0});
  1014. }
  1015.  
  1016. cleanupContainer(container, options);
  1017. return canvas;
  1018. });
  1019. }
  1020.  
  1021. function cleanupContainer(container, options) {
  1022. if (options.removeContainer) {
  1023. container.parentNode.removeChild(container);
  1024. log("Cleaned up container");
  1025. }
  1026. }
  1027.  
  1028. function crop(canvas, bounds) {
  1029. var croppedCanvas = document.createElement("canvas");
  1030. var x1 = Math.min(canvas.width - 1, Math.max(0, bounds.left));
  1031. var x2 = Math.min(canvas.width, Math.max(1, bounds.left + bounds.width));
  1032. var y1 = Math.min(canvas.height - 1, Math.max(0, bounds.top));
  1033. var y2 = Math.min(canvas.height, Math.max(1, bounds.top + bounds.height));
  1034. croppedCanvas.width = bounds.width;
  1035. croppedCanvas.height = bounds.height;
  1036. var width = x2-x1;
  1037. var height = y2-y1;
  1038. log("Cropping canvas at:", "left:", bounds.left, "top:", bounds.top, "width:", width, "height:", height);
  1039. log("Resulting crop with width", bounds.width, "and height", bounds.height, "with x", x1, "and y", y1);
  1040. croppedCanvas.getContext("2d").drawImage(canvas, x1, y1, width, height, bounds.x, bounds.y, width, height);
  1041. return croppedCanvas;
  1042. }
  1043.  
  1044. function documentWidth (doc) {
  1045. return Math.max(
  1046. Math.max(doc.body.scrollWidth, doc.documentElement.scrollWidth),
  1047. Math.max(doc.body.offsetWidth, doc.documentElement.offsetWidth),
  1048. Math.max(doc.body.clientWidth, doc.documentElement.clientWidth)
  1049. );
  1050. }
  1051.  
  1052. function documentHeight (doc) {
  1053. return Math.max(
  1054. Math.max(doc.body.scrollHeight, doc.documentElement.scrollHeight),
  1055. Math.max(doc.body.offsetHeight, doc.documentElement.offsetHeight),
  1056. Math.max(doc.body.clientHeight, doc.documentElement.clientHeight)
  1057. );
  1058. }
  1059.  
  1060. function absoluteUrl(url) {
  1061. var link = document.createElement("a");
  1062. link.href = url;
  1063. link.href = link.href;
  1064. return link;
  1065. }
  1066.  
  1067. },{"./clone":2,"./imageloader":11,"./log":13,"./nodecontainer":14,"./nodeparser":15,"./proxy":16,"./renderers/canvas":20,"./support":22,"./utils":26}],5:[function(_dereq_,module,exports){
  1068. var log = _dereq_('./log');
  1069. var smallImage = _dereq_('./utils').smallImage;
  1070.  
  1071. function DummyImageContainer(src) {
  1072. this.src = src;
  1073. log("DummyImageContainer for", src);
  1074. if (!this.promise || !this.image) {
  1075. log("Initiating DummyImageContainer");
  1076. DummyImageContainer.prototype.image = new Image();
  1077. var image = this.image;
  1078. DummyImageContainer.prototype.promise = new Promise(function(resolve, reject) {
  1079. image.onload = resolve;
  1080. image.onerror = reject;
  1081. image.src = smallImage();
  1082. if (image.complete === true) {
  1083. resolve(image);
  1084. }
  1085. });
  1086. }
  1087. }
  1088.  
  1089. module.exports = DummyImageContainer;
  1090.  
  1091. },{"./log":13,"./utils":26}],6:[function(_dereq_,module,exports){
  1092. var smallImage = _dereq_('./utils').smallImage;
  1093.  
  1094. function Font(family, size) {
  1095. var container = document.createElement('div'),
  1096. img = document.createElement('img'),
  1097. span = document.createElement('span'),
  1098. sampleText = 'Hidden Text',
  1099. baseline,
  1100. middle;
  1101.  
  1102. container.style.visibility = "hidden";
  1103. container.style.fontFamily = family;
  1104. container.style.fontSize = size;
  1105. container.style.margin = 0;
  1106. container.style.padding = 0;
  1107.  
  1108. document.body.appendChild(container);
  1109.  
  1110. img.src = smallImage();
  1111. img.width = 1;
  1112. img.height = 1;
  1113.  
  1114. img.style.margin = 0;
  1115. img.style.padding = 0;
  1116. img.style.verticalAlign = "baseline";
  1117.  
  1118. span.style.fontFamily = family;
  1119. span.style.fontSize = size;
  1120. span.style.margin = 0;
  1121. span.style.padding = 0;
  1122.  
  1123. span.appendChild(document.createTextNode(sampleText));
  1124. container.appendChild(span);
  1125. container.appendChild(img);
  1126. baseline = (img.offsetTop - span.offsetTop) + 1;
  1127.  
  1128. container.removeChild(span);
  1129. container.appendChild(document.createTextNode(sampleText));
  1130.  
  1131. container.style.lineHeight = "normal";
  1132. img.style.verticalAlign = "super";
  1133.  
  1134. middle = (img.offsetTop-container.offsetTop) + 1;
  1135.  
  1136. document.body.removeChild(container);
  1137.  
  1138. this.baseline = baseline;
  1139. this.lineWidth = 1;
  1140. this.middle = middle;
  1141. }
  1142.  
  1143. module.exports = Font;
  1144.  
  1145. },{"./utils":26}],7:[function(_dereq_,module,exports){
  1146. var Font = _dereq_('./font');
  1147.  
  1148. function FontMetrics() {
  1149. this.data = {};
  1150. }
  1151.  
  1152. FontMetrics.prototype.getMetrics = function(family, size) {
  1153. if (this.data[family + "-" + size] === undefined) {
  1154. this.data[family + "-" + size] = new Font(family, size);
  1155. }
  1156. return this.data[family + "-" + size];
  1157. };
  1158.  
  1159. module.exports = FontMetrics;
  1160.  
  1161. },{"./font":6}],8:[function(_dereq_,module,exports){
  1162. var utils = _dereq_('./utils');
  1163. var getBounds = utils.getBounds;
  1164. var loadUrlDocument = _dereq_('./proxy').loadUrlDocument;
  1165.  
  1166. function FrameContainer(container, sameOrigin, options) {
  1167. this.image = null;
  1168. this.src = container;
  1169. var self = this;
  1170. var bounds = getBounds(container);
  1171. this.promise = (!sameOrigin ? this.proxyLoad(options.proxy, bounds, options) : new Promise(function(resolve) {
  1172. if (container.contentWindow.document.URL === "about:blank" || container.contentWindow.document.documentElement == null) {
  1173. container.contentWindow.onload = container.onload = function() {
  1174. resolve(container);
  1175. };
  1176. } else {
  1177. resolve(container);
  1178. }
  1179. })).then(function(container) {
  1180. var html2canvas = _dereq_('./core');
  1181. return html2canvas(container.contentWindow.document.documentElement, {type: 'view', width: container.width, height: container.height, proxy: options.proxy, javascriptEnabled: options.javascriptEnabled, removeContainer: options.removeContainer, allowTaint: options.allowTaint, imageTimeout: options.imageTimeout / 2});
  1182. }).then(function(canvas) {
  1183. return self.image = canvas;
  1184. });
  1185. }
  1186.  
  1187. FrameContainer.prototype.proxyLoad = function(proxy, bounds, options) {
  1188. var container = this.src;
  1189. return loadUrlDocument(container.src, proxy, container.ownerDocument, bounds.width, bounds.height, options);
  1190. };
  1191.  
  1192. module.exports = FrameContainer;
  1193.  
  1194. },{"./core":4,"./proxy":16,"./utils":26}],9:[function(_dereq_,module,exports){
  1195. function GradientContainer(imageData) {
  1196. this.src = imageData.value;
  1197. this.colorStops = [];
  1198. this.type = null;
  1199. this.x0 = 0.5;
  1200. this.y0 = 0.5;
  1201. this.x1 = 0.5;
  1202. this.y1 = 0.5;
  1203. this.promise = Promise.resolve(true);
  1204. }
  1205.  
  1206. GradientContainer.TYPES = {
  1207. LINEAR: 1,
  1208. RADIAL: 2
  1209. };
  1210.  
  1211. // TODO: support hsl[a], negative %/length values
  1212. // TODO: support <angle> (e.g. -?\d{1,3}(?:\.\d+)deg, etc. : https://developer.mozilla.org/docs/Web/CSS/angle )
  1213. GradientContainer.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;
  1214.  
  1215. module.exports = GradientContainer;
  1216.  
  1217. },{}],10:[function(_dereq_,module,exports){
  1218. function ImageContainer(src, cors) {
  1219. this.src = src;
  1220. this.image = new Image();
  1221. var self = this;
  1222. this.tainted = null;
  1223. this.promise = new Promise(function(resolve, reject) {
  1224. self.image.onload = resolve;
  1225. self.image.onerror = reject;
  1226. if (cors) {
  1227. self.image.crossOrigin = "anonymous";
  1228. }
  1229. self.image.src = src;
  1230. if (self.image.complete === true) {
  1231. resolve(self.image);
  1232. }
  1233. });
  1234. }
  1235.  
  1236. module.exports = ImageContainer;
  1237.  
  1238. },{}],11:[function(_dereq_,module,exports){
  1239. var log = _dereq_('./log');
  1240. var ImageContainer = _dereq_('./imagecontainer');
  1241. var DummyImageContainer = _dereq_('./dummyimagecontainer');
  1242. var ProxyImageContainer = _dereq_('./proxyimagecontainer');
  1243. var FrameContainer = _dereq_('./framecontainer');
  1244. var SVGContainer = _dereq_('./svgcontainer');
  1245. var SVGNodeContainer = _dereq_('./svgnodecontainer');
  1246. var LinearGradientContainer = _dereq_('./lineargradientcontainer');
  1247. var WebkitGradientContainer = _dereq_('./webkitgradientcontainer');
  1248. var bind = _dereq_('./utils').bind;
  1249.  
  1250. function ImageLoader(options, support) {
  1251. this.link = null;
  1252. this.options = options;
  1253. this.support = support;
  1254. this.origin = this.getOrigin(window.location.href);
  1255. }
  1256.  
  1257. ImageLoader.prototype.findImages = function(nodes) {
  1258. var images = [];
  1259. nodes.reduce(function(imageNodes, container) {
  1260. switch(container.node.nodeName) {
  1261. case "IMG":
  1262. return imageNodes.concat([{
  1263. args: [container.node.src],
  1264. method: "url"
  1265. }]);
  1266. case "svg":
  1267. case "IFRAME":
  1268. return imageNodes.concat([{
  1269. args: [container.node],
  1270. method: container.node.nodeName
  1271. }]);
  1272. }
  1273. return imageNodes;
  1274. }, []).forEach(this.addImage(images, this.loadImage), this);
  1275. return images;
  1276. };
  1277.  
  1278. ImageLoader.prototype.findBackgroundImage = function(images, container) {
  1279. container.parseBackgroundImages().filter(this.hasImageBackground).forEach(this.addImage(images, this.loadImage), this);
  1280. return images;
  1281. };
  1282.  
  1283. ImageLoader.prototype.addImage = function(images, callback) {
  1284. return function(newImage) {
  1285. newImage.args.forEach(function(image) {
  1286. if (!this.imageExists(images, image)) {
  1287. images.splice(0, 0, callback.call(this, newImage));
  1288. log('Added image #' + (images.length), typeof(image) === "string" ? image.substring(0, 100) : image);
  1289. }
  1290. }, this);
  1291. };
  1292. };
  1293.  
  1294. ImageLoader.prototype.hasImageBackground = function(imageData) {
  1295. return imageData.method !== "none";
  1296. };
  1297.  
  1298. ImageLoader.prototype.loadImage = function(imageData) {
  1299. if (imageData.method === "url") {
  1300. var src = imageData.args[0];
  1301. if (this.isSVG(src) && !this.support.svg && !this.options.allowTaint) {
  1302. return new SVGContainer(src);
  1303. } else if (src.match(/data:image\/.*;base64,/i)) {
  1304. return new ImageContainer(src.replace(/url\(['"]{0,}|['"]{0,}\)$/ig, ''), false);
  1305. } else if (this.isSameOrigin(src) || this.options.allowTaint === true || this.isSVG(src)) {
  1306. return new ImageContainer(src, false);
  1307. } else if (this.support.cors && !this.options.allowTaint && this.options.useCORS) {
  1308. return new ImageContainer(src, true);
  1309. } else if (this.options.proxy) {
  1310. return new ProxyImageContainer(src, this.options.proxy);
  1311. } else {
  1312. return new DummyImageContainer(src);
  1313. }
  1314. } else if (imageData.method === "linear-gradient") {
  1315. return new LinearGradientContainer(imageData);
  1316. } else if (imageData.method === "gradient") {
  1317. return new WebkitGradientContainer(imageData);
  1318. } else if (imageData.method === "svg") {
  1319. return new SVGNodeContainer(imageData.args[0], this.support.svg);
  1320. } else if (imageData.method === "IFRAME") {
  1321. return new FrameContainer(imageData.args[0], this.isSameOrigin(imageData.args[0].src), this.options);
  1322. } else {
  1323. return new DummyImageContainer(imageData);
  1324. }
  1325. };
  1326.  
  1327. ImageLoader.prototype.isSVG = function(src) {
  1328. return src.substring(src.length - 3).toLowerCase() === "svg" || SVGContainer.prototype.isInline(src);
  1329. };
  1330.  
  1331. ImageLoader.prototype.imageExists = function(images, src) {
  1332. return images.some(function(image) {
  1333. return image.src === src;
  1334. });
  1335. };
  1336.  
  1337. ImageLoader.prototype.isSameOrigin = function(url) {
  1338. return (this.getOrigin(url) === this.origin);
  1339. };
  1340.  
  1341. ImageLoader.prototype.getOrigin = function(url) {
  1342. var link = this.link || (this.link = document.createElement("a"));
  1343. link.href = url;
  1344. link.href = link.href; // IE9, LOL! - http://jsfiddle.net/niklasvh/2e48b/
  1345. return link.protocol + link.hostname + link.port;
  1346. };
  1347.  
  1348. ImageLoader.prototype.getPromise = function(container) {
  1349. return this.timeout(container, this.options.imageTimeout)['catch'](function() {
  1350. var dummy = new DummyImageContainer(container.src);
  1351. return dummy.promise.then(function(image) {
  1352. container.image = image;
  1353. });
  1354. });
  1355. };
  1356.  
  1357. ImageLoader.prototype.get = function(src) {
  1358. var found = null;
  1359. return this.images.some(function(img) {
  1360. return (found = img).src === src;
  1361. }) ? found : null;
  1362. };
  1363.  
  1364. ImageLoader.prototype.fetch = function(nodes) {
  1365. this.images = nodes.reduce(bind(this.findBackgroundImage, this), this.findImages(nodes));
  1366. this.images.forEach(function(image, index) {
  1367. image.promise.then(function() {
  1368. log("Succesfully loaded image #"+ (index+1), image);
  1369. }, function(e) {
  1370. log("Failed loading image #"+ (index+1), image, e);
  1371. });
  1372. });
  1373. this.ready = Promise.all(this.images.map(this.getPromise, this));
  1374. log("Finished searching images");
  1375. return this;
  1376. };
  1377.  
  1378. ImageLoader.prototype.timeout = function(container, timeout) {
  1379. var timer;
  1380. var promise = Promise.race([container.promise, new Promise(function(res, reject) {
  1381. timer = setTimeout(function() {
  1382. log("Timed out loading image", container);
  1383. reject(container);
  1384. }, timeout);
  1385. })]).then(function(container) {
  1386. clearTimeout(timer);
  1387. return container;
  1388. });
  1389. promise['catch'](function() {
  1390. clearTimeout(timer);
  1391. });
  1392. return promise;
  1393. };
  1394.  
  1395. module.exports = ImageLoader;
  1396.  
  1397. },{"./dummyimagecontainer":5,"./framecontainer":8,"./imagecontainer":10,"./lineargradientcontainer":12,"./log":13,"./proxyimagecontainer":17,"./svgcontainer":23,"./svgnodecontainer":24,"./utils":26,"./webkitgradientcontainer":27}],12:[function(_dereq_,module,exports){
  1398. var GradientContainer = _dereq_('./gradientcontainer');
  1399. var Color = _dereq_('./color');
  1400.  
  1401. function LinearGradientContainer(imageData) {
  1402. GradientContainer.apply(this, arguments);
  1403. this.type = GradientContainer.TYPES.LINEAR;
  1404.  
  1405. var hasDirection = LinearGradientContainer.REGEXP_DIRECTION.test( imageData.args[0] ) ||
  1406. !GradientContainer.REGEXP_COLORSTOP.test( imageData.args[0] );
  1407.  
  1408. if (hasDirection) {
  1409. imageData.args[0].split(/\s+/).reverse().forEach(function(position, index) {
  1410. switch(position) {
  1411. case "left":
  1412. this.x0 = 0;
  1413. this.x1 = 1;
  1414. break;
  1415. case "top":
  1416. this.y0 = 0;
  1417. this.y1 = 1;
  1418. break;
  1419. case "right":
  1420. this.x0 = 1;
  1421. this.x1 = 0;
  1422. break;
  1423. case "bottom":
  1424. this.y0 = 1;
  1425. this.y1 = 0;
  1426. break;
  1427. case "to":
  1428. var y0 = this.y0;
  1429. var x0 = this.x0;
  1430. this.y0 = this.y1;
  1431. this.x0 = this.x1;
  1432. this.x1 = x0;
  1433. this.y1 = y0;
  1434. break;
  1435. case "center":
  1436. break; // centered by default
  1437. // Firefox internally converts position keywords to percentages:
  1438. // http://www.w3.org/TR/2010/WD-CSS2-20101207/colors.html#propdef-background-position
  1439. default: // percentage or absolute length
  1440. // TODO: support absolute start point positions (e.g., use bounds to convert px to a ratio)
  1441. var ratio = parseFloat(position, 10) * 1e-2;
  1442. if (isNaN(ratio)) { // invalid or unhandled value
  1443. break;
  1444. }
  1445. if (index === 0) {
  1446. this.y0 = ratio;
  1447. this.y1 = 1 - this.y0;
  1448. } else {
  1449. this.x0 = ratio;
  1450. this.x1 = 1 - this.x0;
  1451. }
  1452. break;
  1453. }
  1454. }, this);
  1455. } else {
  1456. this.y0 = 0;
  1457. this.y1 = 1;
  1458. }
  1459.  
  1460. this.colorStops = imageData.args.slice(hasDirection ? 1 : 0).map(function(colorStop) {
  1461. var colorStopMatch = colorStop.match(GradientContainer.REGEXP_COLORSTOP);
  1462. var value = +colorStopMatch[2];
  1463. var unit = value === 0 ? "%" : colorStopMatch[3]; // treat "0" as "0%"
  1464. return {
  1465. color: new Color(colorStopMatch[1]),
  1466. // TODO: support absolute stop positions (e.g., compute gradient line length & convert px to ratio)
  1467. stop: unit === "%" ? value / 100 : null
  1468. };
  1469. });
  1470.  
  1471. if (this.colorStops[0].stop === null) {
  1472. this.colorStops[0].stop = 0;
  1473. }
  1474.  
  1475. if (this.colorStops[this.colorStops.length - 1].stop === null) {
  1476. this.colorStops[this.colorStops.length - 1].stop = 1;
  1477. }
  1478.  
  1479. // calculates and fills-in explicit stop positions when omitted from rule
  1480. this.colorStops.forEach(function(colorStop, index) {
  1481. if (colorStop.stop === null) {
  1482. this.colorStops.slice(index).some(function(find, count) {
  1483. if (find.stop !== null) {
  1484. colorStop.stop = ((find.stop - this.colorStops[index - 1].stop) / (count + 1)) + this.colorStops[index - 1].stop;
  1485. return true;
  1486. } else {
  1487. return false;
  1488. }
  1489. }, this);
  1490. }
  1491. }, this);
  1492. }
  1493.  
  1494. LinearGradientContainer.prototype = Object.create(GradientContainer.prototype);
  1495.  
  1496. // TODO: support <angle> (e.g. -?\d{1,3}(?:\.\d+)deg, etc. : https://developer.mozilla.org/docs/Web/CSS/angle )
  1497. LinearGradientContainer.REGEXP_DIRECTION = /^\s*(?:to|left|right|top|bottom|center|\d{1,3}(?:\.\d+)?%?)(?:\s|$)/i;
  1498.  
  1499. module.exports = LinearGradientContainer;
  1500.  
  1501. },{"./color":3,"./gradientcontainer":9}],13:[function(_dereq_,module,exports){
  1502. var logger = function() {
  1503. if (logger.options.logging && window.console && window.console.log) {
  1504. Function.prototype.bind.call(window.console.log, (window.console)).apply(window.console, [(Date.now() - logger.options.start) + "ms", "html2canvas:"].concat([].slice.call(arguments, 0)));
  1505. }
  1506. };
  1507.  
  1508. logger.options = {logging: false};
  1509. module.exports = logger;
  1510.  
  1511. },{}],14:[function(_dereq_,module,exports){
  1512. var Color = _dereq_('./color');
  1513. var utils = _dereq_('./utils');
  1514. var getBounds = utils.getBounds;
  1515. var parseBackgrounds = utils.parseBackgrounds;
  1516. var offsetBounds = utils.offsetBounds;
  1517.  
  1518. function NodeContainer(node, parent) {
  1519. this.node = node;
  1520. this.parent = parent;
  1521. this.stack = null;
  1522. this.bounds = null;
  1523. this.borders = null;
  1524. this.clip = [];
  1525. this.backgroundClip = [];
  1526. this.offsetBounds = null;
  1527. this.visible = null;
  1528. this.computedStyles = null;
  1529. this.colors = {};
  1530. this.styles = {};
  1531. this.backgroundImages = null;
  1532. this.transformData = null;
  1533. this.transformMatrix = null;
  1534. this.isPseudoElement = false;
  1535. this.opacity = null;
  1536. }
  1537.  
  1538. NodeContainer.prototype.cloneTo = function(stack) {
  1539. stack.visible = this.visible;
  1540. stack.borders = this.borders;
  1541. stack.bounds = this.bounds;
  1542. stack.clip = this.clip;
  1543. stack.backgroundClip = this.backgroundClip;
  1544. stack.computedStyles = this.computedStyles;
  1545. stack.styles = this.styles;
  1546. stack.backgroundImages = this.backgroundImages;
  1547. stack.opacity = this.opacity;
  1548. };
  1549.  
  1550. NodeContainer.prototype.getOpacity = function() {
  1551. return this.opacity === null ? (this.opacity = this.cssFloat('opacity')) : this.opacity;
  1552. };
  1553.  
  1554. NodeContainer.prototype.assignStack = function(stack) {
  1555. this.stack = stack;
  1556. stack.children.push(this);
  1557. };
  1558.  
  1559. NodeContainer.prototype.isElementVisible = function() {
  1560. return this.node.nodeType === Node.TEXT_NODE ? this.parent.visible : (
  1561. this.css('display') !== "none" &&
  1562. this.css('visibility') !== "hidden" &&
  1563. !this.node.hasAttribute("data-html2canvas-ignore") &&
  1564. (this.node.nodeName !== "INPUT" || this.node.getAttribute("type") !== "hidden")
  1565. );
  1566. };
  1567.  
  1568. NodeContainer.prototype.css = function(attribute) {
  1569. if (!this.computedStyles) {
  1570. this.computedStyles = this.isPseudoElement ? this.parent.computedStyle(this.before ? ":before" : ":after") : this.computedStyle(null);
  1571. }
  1572.  
  1573. return this.styles[attribute] || (this.styles[attribute] = this.computedStyles[attribute]);
  1574. };
  1575.  
  1576. NodeContainer.prototype.prefixedCss = function(attribute) {
  1577. var prefixes = ["webkit", "moz", "ms", "o"];
  1578. var value = this.css(attribute);
  1579. if (value === undefined) {
  1580. prefixes.some(function(prefix) {
  1581. value = this.css(prefix + attribute.substr(0, 1).toUpperCase() + attribute.substr(1));
  1582. return value !== undefined;
  1583. }, this);
  1584. }
  1585. return value === undefined ? null : value;
  1586. };
  1587.  
  1588. NodeContainer.prototype.computedStyle = function(type) {
  1589. return this.node.ownerDocument.defaultView.getComputedStyle(this.node, type);
  1590. };
  1591.  
  1592. NodeContainer.prototype.cssInt = function(attribute) {
  1593. var value = parseInt(this.css(attribute), 10);
  1594. return (isNaN(value)) ? 0 : value; // borders in old IE are throwing 'medium' for demo.html
  1595. };
  1596.  
  1597. NodeContainer.prototype.color = function(attribute) {
  1598. return this.colors[attribute] || (this.colors[attribute] = new Color(this.css(attribute)));
  1599. };
  1600.  
  1601. NodeContainer.prototype.cssFloat = function(attribute) {
  1602. var value = parseFloat(this.css(attribute));
  1603. return (isNaN(value)) ? 0 : value;
  1604. };
  1605.  
  1606. NodeContainer.prototype.fontWeight = function() {
  1607. var weight = this.css("fontWeight");
  1608. switch(parseInt(weight, 10)){
  1609. case 401:
  1610. weight = "bold";
  1611. break;
  1612. case 400:
  1613. weight = "normal";
  1614. break;
  1615. }
  1616. return weight;
  1617. };
  1618.  
  1619. NodeContainer.prototype.parseClip = function() {
  1620. var matches = this.css('clip').match(this.CLIP);
  1621. if (matches) {
  1622. return {
  1623. top: parseInt(matches[1], 10),
  1624. right: parseInt(matches[2], 10),
  1625. bottom: parseInt(matches[3], 10),
  1626. left: parseInt(matches[4], 10)
  1627. };
  1628. }
  1629. return null;
  1630. };
  1631.  
  1632. NodeContainer.prototype.parseBackgroundImages = function() {
  1633. return this.backgroundImages || (this.backgroundImages = parseBackgrounds(this.css("backgroundImage")));
  1634. };
  1635.  
  1636. NodeContainer.prototype.cssList = function(property, index) {
  1637. var value = (this.css(property) || '').split(',');
  1638. value = value[index || 0] || value[0] || 'auto';
  1639. value = value.trim().split(' ');
  1640. if (value.length === 1) {
  1641. value = [value[0], isPercentage(value[0]) ? 'auto' : value[0]];
  1642. }
  1643. return value;
  1644. };
  1645.  
  1646. NodeContainer.prototype.parseBackgroundSize = function(bounds, image, index) {
  1647. var size = this.cssList("backgroundSize", index);
  1648. var width, height;
  1649.  
  1650. if (isPercentage(size[0])) {
  1651. width = bounds.width * parseFloat(size[0]) / 100;
  1652. } else if (/contain|cover/.test(size[0])) {
  1653. var targetRatio = bounds.width / bounds.height, currentRatio = image.width / image.height;
  1654. return (targetRatio < currentRatio ^ size[0] === 'contain') ? {width: bounds.height * currentRatio, height: bounds.height} : {width: bounds.width, height: bounds.width / currentRatio};
  1655. } else {
  1656. width = parseInt(size[0], 10);
  1657. }
  1658.  
  1659. if (size[0] === 'auto' && size[1] === 'auto') {
  1660. height = image.height;
  1661. } else if (size[1] === 'auto') {
  1662. height = width / image.width * image.height;
  1663. } else if (isPercentage(size[1])) {
  1664. height = bounds.height * parseFloat(size[1]) / 100;
  1665. } else {
  1666. height = parseInt(size[1], 10);
  1667. }
  1668.  
  1669. if (size[0] === 'auto') {
  1670. width = height / image.height * image.width;
  1671. }
  1672.  
  1673. return {width: width, height: height};
  1674. };
  1675.  
  1676. NodeContainer.prototype.parseBackgroundPosition = function(bounds, image, index, backgroundSize) {
  1677. var position = this.cssList('backgroundPosition', index);
  1678. var left, top;
  1679.  
  1680. if (isPercentage(position[0])){
  1681. left = (bounds.width - (backgroundSize || image).width) * (parseFloat(position[0]) / 100);
  1682. } else {
  1683. left = parseInt(position[0], 10);
  1684. }
  1685.  
  1686. if (position[1] === 'auto') {
  1687. top = left / image.width * image.height;
  1688. } else if (isPercentage(position[1])){
  1689. top = (bounds.height - (backgroundSize || image).height) * parseFloat(position[1]) / 100;
  1690. } else {
  1691. top = parseInt(position[1], 10);
  1692. }
  1693.  
  1694. if (position[0] === 'auto') {
  1695. left = top / image.height * image.width;
  1696. }
  1697.  
  1698. return {left: left, top: top};
  1699. };
  1700.  
  1701. NodeContainer.prototype.parseBackgroundRepeat = function(index) {
  1702. return this.cssList("backgroundRepeat", index)[0];
  1703. };
  1704.  
  1705. NodeContainer.prototype.parseTextShadows = function() {
  1706. var textShadow = this.css("textShadow");
  1707. var results = [];
  1708.  
  1709. if (textShadow && textShadow !== 'none') {
  1710. var shadows = textShadow.match(this.TEXT_SHADOW_PROPERTY);
  1711. for (var i = 0; shadows && (i < shadows.length); i++) {
  1712. var s = shadows[i].match(this.TEXT_SHADOW_VALUES);
  1713. results.push({
  1714. color: new Color(s[0]),
  1715. offsetX: s[1] ? parseFloat(s[1].replace('px', '')) : 0,
  1716. offsetY: s[2] ? parseFloat(s[2].replace('px', '')) : 0,
  1717. blur: s[3] ? s[3].replace('px', '') : 0
  1718. });
  1719. }
  1720. }
  1721. return results;
  1722. };
  1723.  
  1724. NodeContainer.prototype.parseTransform = function() {
  1725. if (!this.transformData) {
  1726. if (this.hasTransform()) {
  1727. var offset = this.parseBounds();
  1728. var origin = this.prefixedCss("transformOrigin").split(" ").map(removePx).map(asFloat);
  1729. origin[0] += offset.left;
  1730. origin[1] += offset.top;
  1731. this.transformData = {
  1732. origin: origin,
  1733. matrix: this.parseTransformMatrix()
  1734. };
  1735. } else {
  1736. this.transformData = {
  1737. origin: [0, 0],
  1738. matrix: [1, 0, 0, 1, 0, 0]
  1739. };
  1740. }
  1741. }
  1742. return this.transformData;
  1743. };
  1744.  
  1745. NodeContainer.prototype.parseTransformMatrix = function() {
  1746. if (!this.transformMatrix) {
  1747. var transform = this.prefixedCss("transform");
  1748. var matrix = transform ? parseMatrix(transform.match(this.MATRIX_PROPERTY)) : null;
  1749. this.transformMatrix = matrix ? matrix : [1, 0, 0, 1, 0, 0];
  1750. }
  1751. return this.transformMatrix;
  1752. };
  1753.  
  1754. NodeContainer.prototype.parseBounds = function() {
  1755. return this.bounds || (this.bounds = this.hasTransform() ? offsetBounds(this.node) : getBounds(this.node));
  1756. };
  1757.  
  1758. NodeContainer.prototype.hasTransform = function() {
  1759. return this.parseTransformMatrix().join(",") !== "1,0,0,1,0,0" || (this.parent && this.parent.hasTransform());
  1760. };
  1761.  
  1762. NodeContainer.prototype.getValue = function() {
  1763. var value = this.node.value || "";
  1764. if (this.node.tagName === "SELECT") {
  1765. value = selectionValue(this.node);
  1766. } else if (this.node.type === "password") {
  1767. value = Array(value.length + 1).join('\u2022'); // jshint ignore:line
  1768. }
  1769. return value.length === 0 ? (this.node.placeholder || "") : value;
  1770. };
  1771.  
  1772. NodeContainer.prototype.MATRIX_PROPERTY = /(matrix|matrix3d)\((.+)\)/;
  1773. NodeContainer.prototype.TEXT_SHADOW_PROPERTY = /((rgba|rgb)\([^\)]+\)(\s-?\d+px){0,})/g;
  1774. NodeContainer.prototype.TEXT_SHADOW_VALUES = /(-?\d+px)|(#.+)|(rgb\(.+\))|(rgba\(.+\))/g;
  1775. NodeContainer.prototype.CLIP = /^rect\((\d+)px,? (\d+)px,? (\d+)px,? (\d+)px\)$/;
  1776.  
  1777. function selectionValue(node) {
  1778. var option = node.options[node.selectedIndex || 0];
  1779. return option ? (option.text || "") : "";
  1780. }
  1781.  
  1782. function parseMatrix(match) {
  1783. if (match && match[1] === "matrix") {
  1784. return match[2].split(",").map(function(s) {
  1785. return parseFloat(s.trim());
  1786. });
  1787. } else if (match && match[1] === "matrix3d") {
  1788. var matrix3d = match[2].split(",").map(function(s) {
  1789. return parseFloat(s.trim());
  1790. });
  1791. return [matrix3d[0], matrix3d[1], matrix3d[4], matrix3d[5], matrix3d[12], matrix3d[13]];
  1792. }
  1793. }
  1794.  
  1795. function isPercentage(value) {
  1796. return value.toString().indexOf("%") !== -1;
  1797. }
  1798.  
  1799. function removePx(str) {
  1800. return str.replace("px", "");
  1801. }
  1802.  
  1803. function asFloat(str) {
  1804. return parseFloat(str);
  1805. }
  1806.  
  1807. module.exports = NodeContainer;
  1808.  
  1809. },{"./color":3,"./utils":26}],15:[function(_dereq_,module,exports){
  1810. var log = _dereq_('./log');
  1811. var punycode = _dereq_('punycode');
  1812. var NodeContainer = _dereq_('./nodecontainer');
  1813. var TextContainer = _dereq_('./textcontainer');
  1814. var PseudoElementContainer = _dereq_('./pseudoelementcontainer');
  1815. var FontMetrics = _dereq_('./fontmetrics');
  1816. var Color = _dereq_('./color');
  1817. var StackingContext = _dereq_('./stackingcontext');
  1818. var utils = _dereq_('./utils');
  1819. var bind = utils.bind;
  1820. var getBounds = utils.getBounds;
  1821. var parseBackgrounds = utils.parseBackgrounds;
  1822. var offsetBounds = utils.offsetBounds;
  1823.  
  1824. function NodeParser(element, renderer, support, imageLoader, options) {
  1825. log("Starting NodeParser");
  1826. this.renderer = renderer;
  1827. this.options = options;
  1828. this.range = null;
  1829. this.support = support;
  1830. this.renderQueue = [];
  1831. this.stack = new StackingContext(true, 1, element.ownerDocument, null);
  1832. var parent = new NodeContainer(element, null);
  1833. if (options.background) {
  1834. renderer.rectangle(0, 0, renderer.width, renderer.height, new Color(options.background));
  1835. }
  1836. if (element === element.ownerDocument.documentElement) {
  1837. // http://www.w3.org/TR/css3-background/#special-backgrounds
  1838. var canvasBackground = new NodeContainer(parent.color('backgroundColor').isTransparent() ? element.ownerDocument.body : element.ownerDocument.documentElement, null);
  1839. renderer.rectangle(0, 0, renderer.width, renderer.height, canvasBackground.color('backgroundColor'));
  1840. }
  1841. parent.visibile = parent.isElementVisible();
  1842. this.createPseudoHideStyles(element.ownerDocument);
  1843. this.disableAnimations(element.ownerDocument);
  1844. this.nodes = flatten([parent].concat(this.getChildren(parent)).filter(function(container) {
  1845. return container.visible = container.isElementVisible();
  1846. }).map(this.getPseudoElements, this));
  1847. this.fontMetrics = new FontMetrics();
  1848. log("Fetched nodes, total:", this.nodes.length);
  1849. log("Calculate overflow clips");
  1850. this.calculateOverflowClips();
  1851. log("Start fetching images");
  1852. this.images = imageLoader.fetch(this.nodes.filter(isElement));
  1853. this.ready = this.images.ready.then(bind(function() {
  1854. log("Images loaded, starting parsing");
  1855. log("Creating stacking contexts");
  1856. this.createStackingContexts();
  1857. log("Sorting stacking contexts");
  1858. this.sortStackingContexts(this.stack);
  1859. this.parse(this.stack);
  1860. log("Render queue created with " + this.renderQueue.length + " items");
  1861. return new Promise(bind(function(resolve) {
  1862. if (!options.async) {
  1863. this.renderQueue.forEach(this.paint, this);
  1864. resolve();
  1865. } else if (typeof(options.async) === "function") {
  1866. options.async.call(this, this.renderQueue, resolve);
  1867. } else if (this.renderQueue.length > 0){
  1868. this.renderIndex = 0;
  1869. this.asyncRenderer(this.renderQueue, resolve);
  1870. } else {
  1871. resolve();
  1872. }
  1873. }, this));
  1874. }, this));
  1875. }
  1876.  
  1877. NodeParser.prototype.calculateOverflowClips = function() {
  1878. this.nodes.forEach(function(container) {
  1879. if (isElement(container)) {
  1880. if (isPseudoElement(container)) {
  1881. container.appendToDOM();
  1882. }
  1883. container.borders = this.parseBorders(container);
  1884. var clip = (container.css('overflow') === "hidden") ? [container.borders.clip] : [];
  1885. var cssClip = container.parseClip();
  1886. if (cssClip && ["absolute", "fixed"].indexOf(container.css('position')) !== -1) {
  1887. clip.push([["rect",
  1888. container.bounds.left + cssClip.left,
  1889. container.bounds.top + cssClip.top,
  1890. cssClip.right - cssClip.left,
  1891. cssClip.bottom - cssClip.top
  1892. ]]);
  1893. }
  1894. container.clip = hasParentClip(container) ? container.parent.clip.concat(clip) : clip;
  1895. container.backgroundClip = (container.css('overflow') !== "hidden") ? container.clip.concat([container.borders.clip]) : container.clip;
  1896. if (isPseudoElement(container)) {
  1897. container.cleanDOM();
  1898. }
  1899. } else if (isTextNode(container)) {
  1900. container.clip = hasParentClip(container) ? container.parent.clip : [];
  1901. }
  1902. if (!isPseudoElement(container)) {
  1903. container.bounds = null;
  1904. }
  1905. }, this);
  1906. };
  1907.  
  1908. function hasParentClip(container) {
  1909. return container.parent && container.parent.clip.length;
  1910. }
  1911.  
  1912. NodeParser.prototype.asyncRenderer = function(queue, resolve, asyncTimer) {
  1913. asyncTimer = asyncTimer || Date.now();
  1914. this.paint(queue[this.renderIndex++]);
  1915. if (queue.length === this.renderIndex) {
  1916. resolve();
  1917. } else if (asyncTimer + 20 > Date.now()) {
  1918. this.asyncRenderer(queue, resolve, asyncTimer);
  1919. } else {
  1920. setTimeout(bind(function() {
  1921. this.asyncRenderer(queue, resolve);
  1922. }, this), 0);
  1923. }
  1924. };
  1925.  
  1926. NodeParser.prototype.createPseudoHideStyles = function(document) {
  1927. this.createStyles(document, '.' + PseudoElementContainer.prototype.PSEUDO_HIDE_ELEMENT_CLASS_BEFORE + ':before { content: "" !important; display: none !important; }' +
  1928. '.' + PseudoElementContainer.prototype.PSEUDO_HIDE_ELEMENT_CLASS_AFTER + ':after { content: "" !important; display: none !important; }');
  1929. };
  1930.  
  1931. NodeParser.prototype.disableAnimations = function(document) {
  1932. this.createStyles(document, '* { -webkit-animation: none !important; -moz-animation: none !important; -o-animation: none !important; animation: none !important; ' +
  1933. '-webkit-transition: none !important; -moz-transition: none !important; -o-transition: none !important; transition: none !important;}');
  1934. };
  1935.  
  1936. NodeParser.prototype.createStyles = function(document, styles) {
  1937. var hidePseudoElements = document.createElement('style');
  1938. hidePseudoElements.innerHTML = styles;
  1939. document.body.appendChild(hidePseudoElements);
  1940. };
  1941.  
  1942. NodeParser.prototype.getPseudoElements = function(container) {
  1943. var nodes = [[container]];
  1944. if (container.node.nodeType === Node.ELEMENT_NODE) {
  1945. var before = this.getPseudoElement(container, ":before");
  1946. var after = this.getPseudoElement(container, ":after");
  1947.  
  1948. if (before) {
  1949. nodes.push(before);
  1950. }
  1951.  
  1952. if (after) {
  1953. nodes.push(after);
  1954. }
  1955. }
  1956. return flatten(nodes);
  1957. };
  1958.  
  1959. function toCamelCase(str) {
  1960. return str.replace(/(\-[a-z])/g, function(match){
  1961. return match.toUpperCase().replace('-','');
  1962. });
  1963. }
  1964.  
  1965. NodeParser.prototype.getPseudoElement = function(container, type) {
  1966. var style = container.computedStyle(type);
  1967. if(!style || !style.content || style.content === "none" || style.content === "-moz-alt-content" || style.display === "none") {
  1968. return null;
  1969. }
  1970.  
  1971. var content = stripQuotes(style.content);
  1972. var isImage = content.substr(0, 3) === 'url';
  1973. var pseudoNode = document.createElement(isImage ? 'img' : 'html2canvaspseudoelement');
  1974. var pseudoContainer = new PseudoElementContainer(pseudoNode, container, type);
  1975.  
  1976. for (var i = style.length-1; i >= 0; i--) {
  1977. var property = toCamelCase(style.item(i));
  1978. pseudoNode.style[property] = style[property];
  1979. }
  1980.  
  1981. pseudoNode.className = PseudoElementContainer.prototype.PSEUDO_HIDE_ELEMENT_CLASS_BEFORE + " " + PseudoElementContainer.prototype.PSEUDO_HIDE_ELEMENT_CLASS_AFTER;
  1982.  
  1983. if (isImage) {
  1984. pseudoNode.src = parseBackgrounds(content)[0].args[0];
  1985. return [pseudoContainer];
  1986. } else {
  1987. var text = document.createTextNode(content);
  1988. pseudoNode.appendChild(text);
  1989. return [pseudoContainer, new TextContainer(text, pseudoContainer)];
  1990. }
  1991. };
  1992.  
  1993.  
  1994. NodeParser.prototype.getChildren = function(parentContainer) {
  1995. return flatten([].filter.call(parentContainer.node.childNodes, renderableNode).map(function(node) {
  1996. var container = [node.nodeType === Node.TEXT_NODE ? new TextContainer(node, parentContainer) : new NodeContainer(node, parentContainer)].filter(nonIgnoredElement);
  1997. return node.nodeType === Node.ELEMENT_NODE && container.length && node.tagName !== "TEXTAREA" ? (container[0].isElementVisible() ? container.concat(this.getChildren(container[0])) : []) : container;
  1998. }, this));
  1999. };
  2000.  
  2001. NodeParser.prototype.newStackingContext = function(container, hasOwnStacking) {
  2002. var stack = new StackingContext(hasOwnStacking, container.getOpacity(), container.node, container.parent);
  2003. container.cloneTo(stack);
  2004. var parentStack = hasOwnStacking ? stack.getParentStack(this) : stack.parent.stack;
  2005. parentStack.contexts.push(stack);
  2006. container.stack = stack;
  2007. };
  2008.  
  2009. NodeParser.prototype.createStackingContexts = function() {
  2010. this.nodes.forEach(function(container) {
  2011. if (isElement(container) && (this.isRootElement(container) || hasOpacity(container) || isPositionedForStacking(container) || this.isBodyWithTransparentRoot(container) || container.hasTransform())) {
  2012. this.newStackingContext(container, true);
  2013. } else if (isElement(container) && ((isPositioned(container) && zIndex0(container)) || isInlineBlock(container) || isFloating(container))) {
  2014. this.newStackingContext(container, false);
  2015. } else {
  2016. container.assignStack(container.parent.stack);
  2017. }
  2018. }, this);
  2019. };
  2020.  
  2021. NodeParser.prototype.isBodyWithTransparentRoot = function(container) {
  2022. return container.node.nodeName === "BODY" && container.parent.color('backgroundColor').isTransparent();
  2023. };
  2024.  
  2025. NodeParser.prototype.isRootElement = function(container) {
  2026. return container.parent === null;
  2027. };
  2028.  
  2029. NodeParser.prototype.sortStackingContexts = function(stack) {
  2030. stack.contexts.sort(zIndexSort(stack.contexts.slice(0)));
  2031. stack.contexts.forEach(this.sortStackingContexts, this);
  2032. };
  2033.  
  2034. NodeParser.prototype.parseTextBounds = function(container) {
  2035. return function(text, index, textList) {
  2036. if (container.parent.css("textDecoration").substr(0, 4) !== "none" || text.trim().length !== 0) {
  2037. if (this.support.rangeBounds && !container.parent.hasTransform()) {
  2038. var offset = textList.slice(0, index).join("").length;
  2039. return this.getRangeBounds(container.node, offset, text.length);
  2040. } else if (container.node && typeof(container.node.data) === "string") {
  2041. var replacementNode = container.node.splitText(text.length);
  2042. var bounds = this.getWrapperBounds(container.node, container.parent.hasTransform());
  2043. container.node = replacementNode;
  2044. return bounds;
  2045. }
  2046. } else if(!this.support.rangeBounds || container.parent.hasTransform()){
  2047. container.node = container.node.splitText(text.length);
  2048. }
  2049. return {};
  2050. };
  2051. };
  2052.  
  2053. NodeParser.prototype.getWrapperBounds = function(node, transform) {
  2054. var wrapper = node.ownerDocument.createElement('html2canvaswrapper');
  2055. var parent = node.parentNode,
  2056. backupText = node.cloneNode(true);
  2057.  
  2058. wrapper.appendChild(node.cloneNode(true));
  2059. parent.replaceChild(wrapper, node);
  2060. var bounds = transform ? offsetBounds(wrapper) : getBounds(wrapper);
  2061. parent.replaceChild(backupText, wrapper);
  2062. return bounds;
  2063. };
  2064.  
  2065. NodeParser.prototype.getRangeBounds = function(node, offset, length) {
  2066. var range = this.range || (this.range = node.ownerDocument.createRange());
  2067. range.setStart(node, offset);
  2068. range.setEnd(node, offset + length);
  2069. return range.getBoundingClientRect();
  2070. };
  2071.  
  2072. function ClearTransform() {}
  2073.  
  2074. NodeParser.prototype.parse = function(stack) {
  2075. // http://www.w3.org/TR/CSS21/visuren.html#z-index
  2076. var negativeZindex = stack.contexts.filter(negativeZIndex); // 2. the child stacking contexts with negative stack levels (most negative first).
  2077. var descendantElements = stack.children.filter(isElement);
  2078. var descendantNonFloats = descendantElements.filter(not(isFloating));
  2079. var nonInlineNonPositionedDescendants = descendantNonFloats.filter(not(isPositioned)).filter(not(inlineLevel)); // 3 the in-flow, non-inline-level, non-positioned descendants.
  2080. var nonPositionedFloats = descendantElements.filter(not(isPositioned)).filter(isFloating); // 4. the non-positioned floats.
  2081. var inFlow = descendantNonFloats.filter(not(isPositioned)).filter(inlineLevel); // 5. the in-flow, inline-level, non-positioned descendants, including inline tables and inline blocks.
  2082. var stackLevel0 = stack.contexts.concat(descendantNonFloats.filter(isPositioned)).filter(zIndex0); // 6. the child stacking contexts with stack level 0 and the positioned descendants with stack level 0.
  2083. var text = stack.children.filter(isTextNode).filter(hasText);
  2084. var positiveZindex = stack.contexts.filter(positiveZIndex); // 7. the child stacking contexts with positive stack levels (least positive first).
  2085. negativeZindex.concat(nonInlineNonPositionedDescendants).concat(nonPositionedFloats)
  2086. .concat(inFlow).concat(stackLevel0).concat(text).concat(positiveZindex).forEach(function(container) {
  2087. this.renderQueue.push(container);
  2088. if (isStackingContext(container)) {
  2089. this.parse(container);
  2090. this.renderQueue.push(new ClearTransform());
  2091. }
  2092. }, this);
  2093. };
  2094.  
  2095. NodeParser.prototype.paint = function(container) {
  2096. try {
  2097. if (container instanceof ClearTransform) {
  2098. this.renderer.ctx.restore();
  2099. } else if (isTextNode(container)) {
  2100. if (isPseudoElement(container.parent)) {
  2101. container.parent.appendToDOM();
  2102. }
  2103. this.paintText(container);
  2104. if (isPseudoElement(container.parent)) {
  2105. container.parent.cleanDOM();
  2106. }
  2107. } else {
  2108. this.paintNode(container);
  2109. }
  2110. } catch(e) {
  2111. log(e);
  2112. if (this.options.strict) {
  2113. throw e;
  2114. }
  2115. }
  2116. };
  2117.  
  2118. NodeParser.prototype.paintNode = function(container) {
  2119. if (isStackingContext(container)) {
  2120. this.renderer.setOpacity(container.opacity);
  2121. this.renderer.ctx.save();
  2122. if (container.hasTransform()) {
  2123. this.renderer.setTransform(container.parseTransform());
  2124. }
  2125. }
  2126.  
  2127. if (container.node.nodeName === "INPUT" && container.node.type === "checkbox") {
  2128. this.paintCheckbox(container);
  2129. } else if (container.node.nodeName === "INPUT" && container.node.type === "radio") {
  2130. this.paintRadio(container);
  2131. } else {
  2132. this.paintElement(container);
  2133. }
  2134. };
  2135.  
  2136. NodeParser.prototype.paintElement = function(container) {
  2137. var bounds = container.parseBounds();
  2138. this.renderer.clip(container.backgroundClip, function() {
  2139. this.renderer.renderBackground(container, bounds, container.borders.borders.map(getWidth));
  2140. }, this);
  2141.  
  2142. this.renderer.clip(container.clip, function() {
  2143. this.renderer.renderBorders(container.borders.borders);
  2144. }, this);
  2145.  
  2146. this.renderer.clip(container.backgroundClip, function() {
  2147. switch (container.node.nodeName) {
  2148. case "svg":
  2149. case "IFRAME":
  2150. var imgContainer = this.images.get(container.node);
  2151. if (imgContainer) {
  2152. this.renderer.renderImage(container, bounds, container.borders, imgContainer);
  2153. } else {
  2154. log("Error loading <" + container.node.nodeName + ">", container.node);
  2155. }
  2156. break;
  2157. case "IMG":
  2158. var imageContainer = this.images.get(container.node.src);
  2159. if (imageContainer) {
  2160. this.renderer.renderImage(container, bounds, container.borders, imageContainer);
  2161. } else {
  2162. log("Error loading <img>", container.node.src);
  2163. }
  2164. break;
  2165. case "CANVAS":
  2166. this.renderer.renderImage(container, bounds, container.borders, {image: container.node});
  2167. break;
  2168. case "SELECT":
  2169. case "INPUT":
  2170. case "TEXTAREA":
  2171. this.paintFormValue(container);
  2172. break;
  2173. }
  2174. }, this);
  2175. };
  2176.  
  2177. NodeParser.prototype.paintCheckbox = function(container) {
  2178. var b = container.parseBounds();
  2179.  
  2180. var size = Math.min(b.width, b.height);
  2181. var bounds = {width: size - 1, height: size - 1, top: b.top, left: b.left};
  2182. var r = [3, 3];
  2183. var radius = [r, r, r, r];
  2184. var borders = [1,1,1,1].map(function(w) {
  2185. return {color: new Color('#A5A5A5'), width: w};
  2186. });
  2187.  
  2188. var borderPoints = calculateCurvePoints(bounds, radius, borders);
  2189.  
  2190. this.renderer.clip(container.backgroundClip, function() {
  2191. this.renderer.rectangle(bounds.left + 1, bounds.top + 1, bounds.width - 2, bounds.height - 2, new Color("#DEDEDE"));
  2192. this.renderer.renderBorders(calculateBorders(borders, bounds, borderPoints, radius));
  2193. if (container.node.checked) {
  2194. this.renderer.font(new Color('#424242'), 'normal', 'normal', 'bold', (size - 3) + "px", 'arial');
  2195. this.renderer.text("\u2714", bounds.left + size / 6, bounds.top + size - 1);
  2196. }
  2197. }, this);
  2198. };
  2199.  
  2200. NodeParser.prototype.paintRadio = function(container) {
  2201. var bounds = container.parseBounds();
  2202.  
  2203. var size = Math.min(bounds.width, bounds.height) - 2;
  2204.  
  2205. this.renderer.clip(container.backgroundClip, function() {
  2206. this.renderer.circleStroke(bounds.left + 1, bounds.top + 1, size, new Color('#DEDEDE'), 1, new Color('#A5A5A5'));
  2207. if (container.node.checked) {
  2208. this.renderer.circle(Math.ceil(bounds.left + size / 4) + 1, Math.ceil(bounds.top + size / 4) + 1, Math.floor(size / 2), new Color('#424242'));
  2209. }
  2210. }, this);
  2211. };
  2212.  
  2213. NodeParser.prototype.paintFormValue = function(container) {
  2214. var value = container.getValue();
  2215. if (value.length > 0) {
  2216. var document = container.node.ownerDocument;
  2217. var wrapper = document.createElement('html2canvaswrapper');
  2218. var properties = ['lineHeight', 'textAlign', 'fontFamily', 'fontWeight', 'fontSize', 'color',
  2219. 'paddingLeft', 'paddingTop', 'paddingRight', 'paddingBottom',
  2220. 'width', 'height', 'borderLeftStyle', 'borderTopStyle', 'borderLeftWidth', 'borderTopWidth',
  2221. 'boxSizing', 'whiteSpace', 'wordWrap'];
  2222.  
  2223. properties.forEach(function(property) {
  2224. try {
  2225. wrapper.style[property] = container.css(property);
  2226. } catch(e) {
  2227. // Older IE has issues with "border"
  2228. log("html2canvas: Parse: Exception caught in renderFormValue: " + e.message);
  2229. }
  2230. });
  2231. var bounds = container.parseBounds();
  2232. wrapper.style.position = "fixed";
  2233. wrapper.style.left = bounds.left + "px";
  2234. wrapper.style.top = bounds.top + "px";
  2235. wrapper.textContent = value;
  2236. document.body.appendChild(wrapper);
  2237. this.paintText(new TextContainer(wrapper.firstChild, container));
  2238. document.body.removeChild(wrapper);
  2239. }
  2240. };
  2241.  
  2242. NodeParser.prototype.paintText = function(container) {
  2243. container.applyTextTransform();
  2244. var characters = punycode.ucs2.decode(container.node.data);
  2245. var textList = (!this.options.letterRendering || noLetterSpacing(container)) && !hasUnicode(container.node.data) ? getWords(characters) : characters.map(function(character) {
  2246. return punycode.ucs2.encode([character]);
  2247. });
  2248.  
  2249. var weight = container.parent.fontWeight();
  2250. var size = container.parent.css('fontSize');
  2251. var family = container.parent.css('fontFamily');
  2252. var shadows = container.parent.parseTextShadows();
  2253.  
  2254. this.renderer.font(container.parent.color('color'), container.parent.css('fontStyle'), container.parent.css('fontVariant'), weight, size, family);
  2255. if (shadows.length) {
  2256. // TODO: support multiple text shadows
  2257. this.renderer.fontShadow(shadows[0].color, shadows[0].offsetX, shadows[0].offsetY, shadows[0].blur);
  2258. } else {
  2259. this.renderer.clearShadow();
  2260. }
  2261.  
  2262. this.renderer.clip(container.parent.clip, function() {
  2263. textList.map(this.parseTextBounds(container), this).forEach(function(bounds, index) {
  2264. if (bounds) {
  2265. this.renderer.text(textList[index], bounds.left, bounds.bottom);
  2266. this.renderTextDecoration(container.parent, bounds, this.fontMetrics.getMetrics(family, size));
  2267. }
  2268. }, this);
  2269. }, this);
  2270. };
  2271.  
  2272. NodeParser.prototype.renderTextDecoration = function(container, bounds, metrics) {
  2273. switch(container.css("textDecoration").split(" ")[0]) {
  2274. case "underline":
  2275. // Draws a line at the baseline of the font
  2276. // TODO As some browsers display the line as more than 1px if the font-size is big, need to take that into account both in position and size
  2277. this.renderer.rectangle(bounds.left, Math.round(bounds.top + metrics.baseline + metrics.lineWidth), bounds.width, 1, container.color("color"));
  2278. break;
  2279. case "overline":
  2280. this.renderer.rectangle(bounds.left, Math.round(bounds.top), bounds.width, 1, container.color("color"));
  2281. break;
  2282. case "line-through":
  2283. // TODO try and find exact position for line-through
  2284. this.renderer.rectangle(bounds.left, Math.ceil(bounds.top + metrics.middle + metrics.lineWidth), bounds.width, 1, container.color("color"));
  2285. break;
  2286. }
  2287. };
  2288.  
  2289. var borderColorTransforms = {
  2290. inset: [
  2291. ["darken", 0.60],
  2292. ["darken", 0.10],
  2293. ["darken", 0.10],
  2294. ["darken", 0.60]
  2295. ]
  2296. };
  2297.  
  2298. NodeParser.prototype.parseBorders = function(container) {
  2299. var nodeBounds = container.parseBounds();
  2300. var radius = getBorderRadiusData(container);
  2301. var borders = ["Top", "Right", "Bottom", "Left"].map(function(side, index) {
  2302. var style = container.css('border' + side + 'Style');
  2303. var color = container.color('border' + side + 'Color');
  2304. if (style === "inset" && color.isBlack()) {
  2305. color = new Color([255, 255, 255, color.a]); // this is wrong, but
  2306. }
  2307. var colorTransform = borderColorTransforms[style] ? borderColorTransforms[style][index] : null;
  2308. return {
  2309. width: container.cssInt('border' + side + 'Width'),
  2310. color: colorTransform ? color[colorTransform[0]](colorTransform[1]) : color,
  2311. args: null
  2312. };
  2313. });
  2314. var borderPoints = calculateCurvePoints(nodeBounds, radius, borders);
  2315.  
  2316. return {
  2317. clip: this.parseBackgroundClip(container, borderPoints, borders, radius, nodeBounds),
  2318. borders: calculateBorders(borders, nodeBounds, borderPoints, radius)
  2319. };
  2320. };
  2321.  
  2322. function calculateBorders(borders, nodeBounds, borderPoints, radius) {
  2323. return borders.map(function(border, borderSide) {
  2324. if (border.width > 0) {
  2325. var bx = nodeBounds.left;
  2326. var by = nodeBounds.top;
  2327. var bw = nodeBounds.width;
  2328. var bh = nodeBounds.height - (borders[2].width);
  2329.  
  2330. switch(borderSide) {
  2331. case 0:
  2332. // top border
  2333. bh = borders[0].width;
  2334. border.args = drawSide({
  2335. c1: [bx, by],
  2336. c2: [bx + bw, by],
  2337. c3: [bx + bw - borders[1].width, by + bh],
  2338. c4: [bx + borders[3].width, by + bh]
  2339. }, radius[0], radius[1],
  2340. borderPoints.topLeftOuter, borderPoints.topLeftInner, borderPoints.topRightOuter, borderPoints.topRightInner);
  2341. break;
  2342. case 1:
  2343. // right border
  2344. bx = nodeBounds.left + nodeBounds.width - (borders[1].width);
  2345. bw = borders[1].width;
  2346.  
  2347. border.args = drawSide({
  2348. c1: [bx + bw, by],
  2349. c2: [bx + bw, by + bh + borders[2].width],
  2350. c3: [bx, by + bh],
  2351. c4: [bx, by + borders[0].width]
  2352. }, radius[1], radius[2],
  2353. borderPoints.topRightOuter, borderPoints.topRightInner, borderPoints.bottomRightOuter, borderPoints.bottomRightInner);
  2354. break;
  2355. case 2:
  2356. // bottom border
  2357. by = (by + nodeBounds.height) - (borders[2].width);
  2358. bh = borders[2].width;
  2359. border.args = drawSide({
  2360. c1: [bx + bw, by + bh],
  2361. c2: [bx, by + bh],
  2362. c3: [bx + borders[3].width, by],
  2363. c4: [bx + bw - borders[3].width, by]
  2364. }, radius[2], radius[3],
  2365. borderPoints.bottomRightOuter, borderPoints.bottomRightInner, borderPoints.bottomLeftOuter, borderPoints.bottomLeftInner);
  2366. break;
  2367. case 3:
  2368. // left border
  2369. bw = borders[3].width;
  2370. border.args = drawSide({
  2371. c1: [bx, by + bh + borders[2].width],
  2372. c2: [bx, by],
  2373. c3: [bx + bw, by + borders[0].width],
  2374. c4: [bx + bw, by + bh]
  2375. }, radius[3], radius[0],
  2376. borderPoints.bottomLeftOuter, borderPoints.bottomLeftInner, borderPoints.topLeftOuter, borderPoints.topLeftInner);
  2377. break;
  2378. }
  2379. }
  2380. return border;
  2381. });
  2382. }
  2383.  
  2384. NodeParser.prototype.parseBackgroundClip = function(container, borderPoints, borders, radius, bounds) {
  2385. var backgroundClip = container.css('backgroundClip'),
  2386. borderArgs = [];
  2387.  
  2388. switch(backgroundClip) {
  2389. case "content-box":
  2390. case "padding-box":
  2391. parseCorner(borderArgs, radius[0], radius[1], borderPoints.topLeftInner, borderPoints.topRightInner, bounds.left + borders[3].width, bounds.top + borders[0].width);
  2392. parseCorner(borderArgs, radius[1], radius[2], borderPoints.topRightInner, borderPoints.bottomRightInner, bounds.left + bounds.width - borders[1].width, bounds.top + borders[0].width);
  2393. parseCorner(borderArgs, radius[2], radius[3], borderPoints.bottomRightInner, borderPoints.bottomLeftInner, bounds.left + bounds.width - borders[1].width, bounds.top + bounds.height - borders[2].width);
  2394. parseCorner(borderArgs, radius[3], radius[0], borderPoints.bottomLeftInner, borderPoints.topLeftInner, bounds.left + borders[3].width, bounds.top + bounds.height - borders[2].width);
  2395. break;
  2396.  
  2397. default:
  2398. parseCorner(borderArgs, radius[0], radius[1], borderPoints.topLeftOuter, borderPoints.topRightOuter, bounds.left, bounds.top);
  2399. parseCorner(borderArgs, radius[1], radius[2], borderPoints.topRightOuter, borderPoints.bottomRightOuter, bounds.left + bounds.width, bounds.top);
  2400. parseCorner(borderArgs, radius[2], radius[3], borderPoints.bottomRightOuter, borderPoints.bottomLeftOuter, bounds.left + bounds.width, bounds.top + bounds.height);
  2401. parseCorner(borderArgs, radius[3], radius[0], borderPoints.bottomLeftOuter, borderPoints.topLeftOuter, bounds.left, bounds.top + bounds.height);
  2402. break;
  2403. }
  2404.  
  2405. return borderArgs;
  2406. };
  2407.  
  2408. function getCurvePoints(x, y, r1, r2) {
  2409. var kappa = 4 * ((Math.sqrt(2) - 1) / 3);
  2410. var ox = (r1) * kappa, // control point offset horizontal
  2411. oy = (r2) * kappa, // control point offset vertical
  2412. xm = x + r1, // x-middle
  2413. ym = y + r2; // y-middle
  2414. return {
  2415. topLeft: bezierCurve({x: x, y: ym}, {x: x, y: ym - oy}, {x: xm - ox, y: y}, {x: xm, y: y}),
  2416. topRight: bezierCurve({x: x, y: y}, {x: x + ox,y: y}, {x: xm, y: ym - oy}, {x: xm, y: ym}),
  2417. bottomRight: bezierCurve({x: xm, y: y}, {x: xm, y: y + oy}, {x: x + ox, y: ym}, {x: x, y: ym}),
  2418. bottomLeft: bezierCurve({x: xm, y: ym}, {x: xm - ox, y: ym}, {x: x, y: y + oy}, {x: x, y:y})
  2419. };
  2420. }
  2421.  
  2422. function calculateCurvePoints(bounds, borderRadius, borders) {
  2423. var x = bounds.left,
  2424. y = bounds.top,
  2425. width = bounds.width,
  2426. height = bounds.height,
  2427.  
  2428. tlh = borderRadius[0][0] < width / 2 ? borderRadius[0][0] : width / 2,
  2429. tlv = borderRadius[0][1] < height / 2 ? borderRadius[0][1] : height / 2,
  2430. trh = borderRadius[1][0] < width / 2 ? borderRadius[1][0] : width / 2,
  2431. trv = borderRadius[1][1] < height / 2 ? borderRadius[1][1] : height / 2,
  2432. brh = borderRadius[2][0] < width / 2 ? borderRadius[2][0] : width / 2,
  2433. brv = borderRadius[2][1] < height / 2 ? borderRadius[2][1] : height / 2,
  2434. blh = borderRadius[3][0] < width / 2 ? borderRadius[3][0] : width / 2,
  2435. blv = borderRadius[3][1] < height / 2 ? borderRadius[3][1] : height / 2;
  2436.  
  2437. var topWidth = width - trh,
  2438. rightHeight = height - brv,
  2439. bottomWidth = width - brh,
  2440. leftHeight = height - blv;
  2441.  
  2442. return {
  2443. topLeftOuter: getCurvePoints(x, y, tlh, tlv).topLeft.subdivide(0.5),
  2444. topLeftInner: getCurvePoints(x + borders[3].width, y + borders[0].width, Math.max(0, tlh - borders[3].width), Math.max(0, tlv - borders[0].width)).topLeft.subdivide(0.5),
  2445. topRightOuter: getCurvePoints(x + topWidth, y, trh, trv).topRight.subdivide(0.5),
  2446. topRightInner: getCurvePoints(x + Math.min(topWidth, width + borders[3].width), y + borders[0].width, (topWidth > width + borders[3].width) ? 0 :trh - borders[3].width, trv - borders[0].width).topRight.subdivide(0.5),
  2447. bottomRightOuter: getCurvePoints(x + bottomWidth, y + rightHeight, brh, brv).bottomRight.subdivide(0.5),
  2448. bottomRightInner: getCurvePoints(x + Math.min(bottomWidth, width - borders[3].width), y + Math.min(rightHeight, height + borders[0].width), Math.max(0, brh - borders[1].width), brv - borders[2].width).bottomRight.subdivide(0.5),
  2449. bottomLeftOuter: getCurvePoints(x, y + leftHeight, blh, blv).bottomLeft.subdivide(0.5),
  2450. bottomLeftInner: getCurvePoints(x + borders[3].width, y + leftHeight, Math.max(0, blh - borders[3].width), blv - borders[2].width).bottomLeft.subdivide(0.5)
  2451. };
  2452. }
  2453.  
  2454. function bezierCurve(start, startControl, endControl, end) {
  2455. var lerp = function (a, b, t) {
  2456. return {
  2457. x: a.x + (b.x - a.x) * t,
  2458. y: a.y + (b.y - a.y) * t
  2459. };
  2460. };
  2461.  
  2462. return {
  2463. start: start,
  2464. startControl: startControl,
  2465. endControl: endControl,
  2466. end: end,
  2467. subdivide: function(t) {
  2468. var ab = lerp(start, startControl, t),
  2469. bc = lerp(startControl, endControl, t),
  2470. cd = lerp(endControl, end, t),
  2471. abbc = lerp(ab, bc, t),
  2472. bccd = lerp(bc, cd, t),
  2473. dest = lerp(abbc, bccd, t);
  2474. return [bezierCurve(start, ab, abbc, dest), bezierCurve(dest, bccd, cd, end)];
  2475. },
  2476. curveTo: function(borderArgs) {
  2477. borderArgs.push(["bezierCurve", startControl.x, startControl.y, endControl.x, endControl.y, end.x, end.y]);
  2478. },
  2479. curveToReversed: function(borderArgs) {
  2480. borderArgs.push(["bezierCurve", endControl.x, endControl.y, startControl.x, startControl.y, start.x, start.y]);
  2481. }
  2482. };
  2483. }
  2484.  
  2485. function drawSide(borderData, radius1, radius2, outer1, inner1, outer2, inner2) {
  2486. var borderArgs = [];
  2487.  
  2488. if (radius1[0] > 0 || radius1[1] > 0) {
  2489. borderArgs.push(["line", outer1[1].start.x, outer1[1].start.y]);
  2490. outer1[1].curveTo(borderArgs);
  2491. } else {
  2492. borderArgs.push([ "line", borderData.c1[0], borderData.c1[1]]);
  2493. }
  2494.  
  2495. if (radius2[0] > 0 || radius2[1] > 0) {
  2496. borderArgs.push(["line", outer2[0].start.x, outer2[0].start.y]);
  2497. outer2[0].curveTo(borderArgs);
  2498. borderArgs.push(["line", inner2[0].end.x, inner2[0].end.y]);
  2499. inner2[0].curveToReversed(borderArgs);
  2500. } else {
  2501. borderArgs.push(["line", borderData.c2[0], borderData.c2[1]]);
  2502. borderArgs.push(["line", borderData.c3[0], borderData.c3[1]]);
  2503. }
  2504.  
  2505. if (radius1[0] > 0 || radius1[1] > 0) {
  2506. borderArgs.push(["line", inner1[1].end.x, inner1[1].end.y]);
  2507. inner1[1].curveToReversed(borderArgs);
  2508. } else {
  2509. borderArgs.push(["line", borderData.c4[0], borderData.c4[1]]);
  2510. }
  2511.  
  2512. return borderArgs;
  2513. }
  2514.  
  2515. function parseCorner(borderArgs, radius1, radius2, corner1, corner2, x, y) {
  2516. if (radius1[0] > 0 || radius1[1] > 0) {
  2517. borderArgs.push(["line", corner1[0].start.x, corner1[0].start.y]);
  2518. corner1[0].curveTo(borderArgs);
  2519. corner1[1].curveTo(borderArgs);
  2520. } else {
  2521. borderArgs.push(["line", x, y]);
  2522. }
  2523.  
  2524. if (radius2[0] > 0 || radius2[1] > 0) {
  2525. borderArgs.push(["line", corner2[0].start.x, corner2[0].start.y]);
  2526. }
  2527. }
  2528.  
  2529. function negativeZIndex(container) {
  2530. return container.cssInt("zIndex") < 0;
  2531. }
  2532.  
  2533. function positiveZIndex(container) {
  2534. return container.cssInt("zIndex") > 0;
  2535. }
  2536.  
  2537. function zIndex0(container) {
  2538. return container.cssInt("zIndex") === 0;
  2539. }
  2540.  
  2541. function inlineLevel(container) {
  2542. return ["inline", "inline-block", "inline-table"].indexOf(container.css("display")) !== -1;
  2543. }
  2544.  
  2545. function isStackingContext(container) {
  2546. return (container instanceof StackingContext);
  2547. }
  2548.  
  2549. function hasText(container) {
  2550. return container.node.data.trim().length > 0;
  2551. }
  2552.  
  2553. function noLetterSpacing(container) {
  2554. return (/^(normal|none|0px)$/.test(container.parent.css("letterSpacing")));
  2555. }
  2556.  
  2557. function getBorderRadiusData(container) {
  2558. return ["TopLeft", "TopRight", "BottomRight", "BottomLeft"].map(function(side) {
  2559. var value = container.css('border' + side + 'Radius');
  2560. var arr = value.split(" ");
  2561. if (arr.length <= 1) {
  2562. arr[1] = arr[0];
  2563. }
  2564. return arr.map(asInt);
  2565. });
  2566. }
  2567.  
  2568. function renderableNode(node) {
  2569. return (node.nodeType === Node.TEXT_NODE || node.nodeType === Node.ELEMENT_NODE);
  2570. }
  2571.  
  2572. function isPositionedForStacking(container) {
  2573. var position = container.css("position");
  2574. var zIndex = (["absolute", "relative", "fixed"].indexOf(position) !== -1) ? container.css("zIndex") : "auto";
  2575. return zIndex !== "auto";
  2576. }
  2577.  
  2578. function isPositioned(container) {
  2579. return container.css("position") !== "static";
  2580. }
  2581.  
  2582. function isFloating(container) {
  2583. return container.css("float") !== "none";
  2584. }
  2585.  
  2586. function isInlineBlock(container) {
  2587. return ["inline-block", "inline-table"].indexOf(container.css("display")) !== -1;
  2588. }
  2589.  
  2590. function not(callback) {
  2591. var context = this;
  2592. return function() {
  2593. return !callback.apply(context, arguments);
  2594. };
  2595. }
  2596.  
  2597. function isElement(container) {
  2598. return container.node.nodeType === Node.ELEMENT_NODE;
  2599. }
  2600.  
  2601. function isPseudoElement(container) {
  2602. return container.isPseudoElement === true;
  2603. }
  2604.  
  2605. function isTextNode(container) {
  2606. return container.node.nodeType === Node.TEXT_NODE;
  2607. }
  2608.  
  2609. function zIndexSort(contexts) {
  2610. return function(a, b) {
  2611. return (a.cssInt("zIndex") + (contexts.indexOf(a) / contexts.length)) - (b.cssInt("zIndex") + (contexts.indexOf(b) / contexts.length));
  2612. };
  2613. }
  2614.  
  2615. function hasOpacity(container) {
  2616. return container.getOpacity() < 1;
  2617. }
  2618.  
  2619. function asInt(value) {
  2620. return parseInt(value, 10);
  2621. }
  2622.  
  2623. function getWidth(border) {
  2624. return border.width;
  2625. }
  2626.  
  2627. function nonIgnoredElement(nodeContainer) {
  2628. return (nodeContainer.node.nodeType !== Node.ELEMENT_NODE || ["SCRIPT", "HEAD", "TITLE", "OBJECT", "BR", "OPTION"].indexOf(nodeContainer.node.nodeName) === -1);
  2629. }
  2630.  
  2631. function flatten(arrays) {
  2632. return [].concat.apply([], arrays);
  2633. }
  2634.  
  2635. function stripQuotes(content) {
  2636. var first = content.substr(0, 1);
  2637. return (first === content.substr(content.length - 1) && first.match(/'|"/)) ? content.substr(1, content.length - 2) : content;
  2638. }
  2639.  
  2640. function getWords(characters) {
  2641. var words = [], i = 0, onWordBoundary = false, word;
  2642. while(characters.length) {
  2643. if (isWordBoundary(characters[i]) === onWordBoundary) {
  2644. word = characters.splice(0, i);
  2645. if (word.length) {
  2646. words.push(punycode.ucs2.encode(word));
  2647. }
  2648. onWordBoundary =! onWordBoundary;
  2649. i = 0;
  2650. } else {
  2651. i++;
  2652. }
  2653.  
  2654. if (i >= characters.length) {
  2655. word = characters.splice(0, i);
  2656. if (word.length) {
  2657. words.push(punycode.ucs2.encode(word));
  2658. }
  2659. }
  2660. }
  2661. return words;
  2662. }
  2663.  
  2664. function isWordBoundary(characterCode) {
  2665. return [
  2666. 32, // <space>
  2667. 13, // \r
  2668. 10, // \n
  2669. 9, // \t
  2670. 45 // -
  2671. ].indexOf(characterCode) !== -1;
  2672. }
  2673.  
  2674. function hasUnicode(string) {
  2675. return (/[^\u0000-\u00ff]/).test(string);
  2676. }
  2677.  
  2678. module.exports = NodeParser;
  2679.  
  2680. },{"./color":3,"./fontmetrics":7,"./log":13,"./nodecontainer":14,"./pseudoelementcontainer":18,"./stackingcontext":21,"./textcontainer":25,"./utils":26,"punycode":1}],16:[function(_dereq_,module,exports){
  2681. var XHR = _dereq_('./xhr');
  2682. var utils = _dereq_('./utils');
  2683. var log = _dereq_('./log');
  2684. var createWindowClone = _dereq_('./clone');
  2685. var decode64 = utils.decode64;
  2686.  
  2687. function Proxy(src, proxyUrl, document) {
  2688. var supportsCORS = ('withCredentials' in new XMLHttpRequest());
  2689. if (!proxyUrl) {
  2690. return Promise.reject("No proxy configured");
  2691. }
  2692. var callback = createCallback(supportsCORS);
  2693. var url = createProxyUrl(proxyUrl, src, callback);
  2694.  
  2695. return supportsCORS ? XHR(url) : (jsonp(document, url, callback).then(function(response) {
  2696. return decode64(response.content);
  2697. }));
  2698. }
  2699. var proxyCount = 0;
  2700.  
  2701. function ProxyURL(src, proxyUrl, document) {
  2702. var supportsCORSImage = ('crossOrigin' in new Image());
  2703. var callback = createCallback(supportsCORSImage);
  2704. var url = createProxyUrl(proxyUrl, src, callback);
  2705. return (supportsCORSImage ? Promise.resolve(url) : jsonp(document, url, callback).then(function(response) {
  2706. return "data:" + response.type + ";base64," + response.content;
  2707. }));
  2708. }
  2709.  
  2710. function jsonp(document, url, callback) {
  2711. return new Promise(function(resolve, reject) {
  2712. var s = document.createElement("script");
  2713. var cleanup = function() {
  2714. delete window.html2canvas.proxy[callback];
  2715. document.body.removeChild(s);
  2716. };
  2717. window.html2canvas.proxy[callback] = function(response) {
  2718. cleanup();
  2719. resolve(response);
  2720. };
  2721. s.src = url;
  2722. s.onerror = function(e) {
  2723. cleanup();
  2724. reject(e);
  2725. };
  2726. document.body.appendChild(s);
  2727. });
  2728. }
  2729.  
  2730. function createCallback(useCORS) {
  2731. return !useCORS ? "html2canvas_" + Date.now() + "_" + (++proxyCount) + "_" + Math.round(Math.random() * 100000) : "";
  2732. }
  2733.  
  2734. function createProxyUrl(proxyUrl, src, callback) {
  2735. return proxyUrl + "?url=" + encodeURIComponent(src) + (callback.length ? "&callback=html2canvas.proxy." + callback : "");
  2736. }
  2737.  
  2738. function documentFromHTML(src) {
  2739. return function(html) {
  2740. var parser = new DOMParser(), doc;
  2741. try {
  2742. doc = parser.parseFromString(html, "text/html");
  2743. } catch(e) {
  2744. log("DOMParser not supported, falling back to createHTMLDocument");
  2745. doc = document.implementation.createHTMLDocument("");
  2746. try {
  2747. doc.open();
  2748. doc.write(html);
  2749. doc.close();
  2750. } catch(ee) {
  2751. log("createHTMLDocument write not supported, falling back to document.body.innerHTML");
  2752. doc.body.innerHTML = html; // ie9 doesnt support writing to documentElement
  2753. }
  2754. }
  2755.  
  2756. var b = doc.querySelector("base");
  2757. if (!b || !b.href.host) {
  2758. var base = doc.createElement("base");
  2759. base.href = src;
  2760. doc.head.insertBefore(base, doc.head.firstChild);
  2761. }
  2762.  
  2763. return doc;
  2764. };
  2765. }
  2766.  
  2767. function loadUrlDocument(src, proxy, document, width, height, options) {
  2768. return new Proxy(src, proxy, window.document).then(documentFromHTML(src)).then(function(doc) {
  2769. return createWindowClone(doc, document, width, height, options, 0, 0);
  2770. });
  2771. }
  2772.  
  2773. exports.Proxy = Proxy;
  2774. exports.ProxyURL = ProxyURL;
  2775. exports.loadUrlDocument = loadUrlDocument;
  2776.  
  2777. },{"./clone":2,"./log":13,"./utils":26,"./xhr":28}],17:[function(_dereq_,module,exports){
  2778. var ProxyURL = _dereq_('./proxy').ProxyURL;
  2779.  
  2780. function ProxyImageContainer(src, proxy) {
  2781. var link = document.createElement("a");
  2782. link.href = src;
  2783. src = link.href;
  2784. this.src = src;
  2785. this.image = new Image();
  2786. var self = this;
  2787. this.promise = new Promise(function(resolve, reject) {
  2788. self.image.crossOrigin = "Anonymous";
  2789. self.image.onload = resolve;
  2790. self.image.onerror = reject;
  2791.  
  2792. new ProxyURL(src, proxy, document).then(function(url) {
  2793. self.image.src = url;
  2794. })['catch'](reject);
  2795. });
  2796. }
  2797.  
  2798. module.exports = ProxyImageContainer;
  2799.  
  2800. },{"./proxy":16}],18:[function(_dereq_,module,exports){
  2801. var NodeContainer = _dereq_('./nodecontainer');
  2802.  
  2803. function PseudoElementContainer(node, parent, type) {
  2804. NodeContainer.call(this, node, parent);
  2805. this.isPseudoElement = true;
  2806. this.before = type === ":before";
  2807. }
  2808.  
  2809. PseudoElementContainer.prototype.cloneTo = function(stack) {
  2810. PseudoElementContainer.prototype.cloneTo.call(this, stack);
  2811. stack.isPseudoElement = true;
  2812. stack.before = this.before;
  2813. };
  2814.  
  2815. PseudoElementContainer.prototype = Object.create(NodeContainer.prototype);
  2816.  
  2817. PseudoElementContainer.prototype.appendToDOM = function() {
  2818. if (this.before) {
  2819. this.parent.node.insertBefore(this.node, this.parent.node.firstChild);
  2820. } else {
  2821. this.parent.node.appendChild(this.node);
  2822. }
  2823. this.parent.node.className += " " + this.getHideClass();
  2824. };
  2825.  
  2826. PseudoElementContainer.prototype.cleanDOM = function() {
  2827. this.node.parentNode.removeChild(this.node);
  2828. this.parent.node.className = this.parent.node.className.replace(this.getHideClass(), "");
  2829. };
  2830.  
  2831. PseudoElementContainer.prototype.getHideClass = function() {
  2832. return this["PSEUDO_HIDE_ELEMENT_CLASS_" + (this.before ? "BEFORE" : "AFTER")];
  2833. };
  2834.  
  2835. PseudoElementContainer.prototype.PSEUDO_HIDE_ELEMENT_CLASS_BEFORE = "___html2canvas___pseudoelement_before";
  2836. PseudoElementContainer.prototype.PSEUDO_HIDE_ELEMENT_CLASS_AFTER = "___html2canvas___pseudoelement_after";
  2837.  
  2838. module.exports = PseudoElementContainer;
  2839.  
  2840. },{"./nodecontainer":14}],19:[function(_dereq_,module,exports){
  2841. var log = _dereq_('./log');
  2842.  
  2843. function Renderer(width, height, images, options, document) {
  2844. this.width = width;
  2845. this.height = height;
  2846. this.images = images;
  2847. this.options = options;
  2848. this.document = document;
  2849. }
  2850.  
  2851. Renderer.prototype.renderImage = function(container, bounds, borderData, imageContainer) {
  2852. var paddingLeft = container.cssInt('paddingLeft'),
  2853. paddingTop = container.cssInt('paddingTop'),
  2854. paddingRight = container.cssInt('paddingRight'),
  2855. paddingBottom = container.cssInt('paddingBottom'),
  2856. borders = borderData.borders;
  2857.  
  2858. var width = bounds.width - (borders[1].width + borders[3].width + paddingLeft + paddingRight);
  2859. var height = bounds.height - (borders[0].width + borders[2].width + paddingTop + paddingBottom);
  2860. this.drawImage(
  2861. imageContainer,
  2862. 0,
  2863. 0,
  2864. imageContainer.image.width || width,
  2865. imageContainer.image.height || height,
  2866. bounds.left + paddingLeft + borders[3].width,
  2867. bounds.top + paddingTop + borders[0].width,
  2868. width,
  2869. height
  2870. );
  2871. };
  2872.  
  2873. Renderer.prototype.renderBackground = function(container, bounds, borderData) {
  2874. if (bounds.height > 0 && bounds.width > 0) {
  2875. this.renderBackgroundColor(container, bounds);
  2876. this.renderBackgroundImage(container, bounds, borderData);
  2877. }
  2878. };
  2879.  
  2880. Renderer.prototype.renderBackgroundColor = function(container, bounds) {
  2881. var color = container.color("backgroundColor");
  2882. if (!color.isTransparent()) {
  2883. this.rectangle(bounds.left, bounds.top, bounds.width, bounds.height, color);
  2884. }
  2885. };
  2886.  
  2887. Renderer.prototype.renderBorders = function(borders) {
  2888. borders.forEach(this.renderBorder, this);
  2889. };
  2890.  
  2891. Renderer.prototype.renderBorder = function(data) {
  2892. if (!data.color.isTransparent() && data.args !== null) {
  2893. this.drawShape(data.args, data.color);
  2894. }
  2895. };
  2896.  
  2897. Renderer.prototype.renderBackgroundImage = function(container, bounds, borderData) {
  2898. var backgroundImages = container.parseBackgroundImages();
  2899. backgroundImages.reverse().forEach(function(backgroundImage, index, arr) {
  2900. switch(backgroundImage.method) {
  2901. case "url":
  2902. var image = this.images.get(backgroundImage.args[0]);
  2903. if (image) {
  2904. this.renderBackgroundRepeating(container, bounds, image, arr.length - (index+1), borderData);
  2905. } else {
  2906. log("Error loading background-image", backgroundImage.args[0]);
  2907. }
  2908. break;
  2909. case "linear-gradient":
  2910. case "gradient":
  2911. var gradientImage = this.images.get(backgroundImage.value);
  2912. if (gradientImage) {
  2913. this.renderBackgroundGradient(gradientImage, bounds, borderData);
  2914. } else {
  2915. log("Error loading background-image", backgroundImage.args[0]);
  2916. }
  2917. break;
  2918. case "none":
  2919. break;
  2920. default:
  2921. log("Unknown background-image type", backgroundImage.args[0]);
  2922. }
  2923. }, this);
  2924. };
  2925.  
  2926. Renderer.prototype.renderBackgroundRepeating = function(container, bounds, imageContainer, index, borderData) {
  2927. var size = container.parseBackgroundSize(bounds, imageContainer.image, index);
  2928. var position = container.parseBackgroundPosition(bounds, imageContainer.image, index, size);
  2929. var repeat = container.parseBackgroundRepeat(index);
  2930. switch (repeat) {
  2931. case "repeat-x":
  2932. case "repeat no-repeat":
  2933. this.backgroundRepeatShape(imageContainer, position, size, bounds, bounds.left + borderData[3], bounds.top + position.top + borderData[0], 99999, size.height, borderData);
  2934. break;
  2935. case "repeat-y":
  2936. case "no-repeat repeat":
  2937. this.backgroundRepeatShape(imageContainer, position, size, bounds, bounds.left + position.left + borderData[3], bounds.top + borderData[0], size.width, 99999, borderData);
  2938. break;
  2939. case "no-repeat":
  2940. this.backgroundRepeatShape(imageContainer, position, size, bounds, bounds.left + position.left + borderData[3], bounds.top + position.top + borderData[0], size.width, size.height, borderData);
  2941. break;
  2942. default:
  2943. this.renderBackgroundRepeat(imageContainer, position, size, {top: bounds.top, left: bounds.left}, borderData[3], borderData[0]);
  2944. break;
  2945. }
  2946. };
  2947.  
  2948. module.exports = Renderer;
  2949.  
  2950. },{"./log":13}],20:[function(_dereq_,module,exports){
  2951. var Renderer = _dereq_('../renderer');
  2952. var LinearGradientContainer = _dereq_('../lineargradientcontainer');
  2953. var log = _dereq_('../log');
  2954.  
  2955. function CanvasRenderer(width, height) {
  2956. Renderer.apply(this, arguments);
  2957. this.canvas = this.options.canvas || this.document.createElement("canvas");
  2958. if (!this.options.canvas) {
  2959. this.canvas.width = width;
  2960. this.canvas.height = height;
  2961. }
  2962. this.ctx = this.canvas.getContext("2d");
  2963. this.taintCtx = this.document.createElement("canvas").getContext("2d");
  2964. this.ctx.textBaseline = "bottom";
  2965. this.variables = {};
  2966. log("Initialized CanvasRenderer with size", width, "x", height);
  2967. }
  2968.  
  2969. CanvasRenderer.prototype = Object.create(Renderer.prototype);
  2970.  
  2971. CanvasRenderer.prototype.setFillStyle = function(fillStyle) {
  2972. this.ctx.fillStyle = typeof(fillStyle) === "object" && !!fillStyle.isColor ? fillStyle.toString() : fillStyle;
  2973. return this.ctx;
  2974. };
  2975.  
  2976. CanvasRenderer.prototype.rectangle = function(left, top, width, height, color) {
  2977. this.setFillStyle(color).fillRect(left, top, width, height);
  2978. };
  2979.  
  2980. CanvasRenderer.prototype.circle = function(left, top, size, color) {
  2981. this.setFillStyle(color);
  2982. this.ctx.beginPath();
  2983. this.ctx.arc(left + size / 2, top + size / 2, size / 2, 0, Math.PI*2, true);
  2984. this.ctx.closePath();
  2985. this.ctx.fill();
  2986. };
  2987.  
  2988. CanvasRenderer.prototype.circleStroke = function(left, top, size, color, stroke, strokeColor) {
  2989. this.circle(left, top, size, color);
  2990. this.ctx.strokeStyle = strokeColor.toString();
  2991. this.ctx.stroke();
  2992. };
  2993.  
  2994. CanvasRenderer.prototype.drawShape = function(shape, color) {
  2995. this.shape(shape);
  2996. this.setFillStyle(color).fill();
  2997. };
  2998.  
  2999. CanvasRenderer.prototype.taints = function(imageContainer) {
  3000. if (imageContainer.tainted === null) {
  3001. this.taintCtx.drawImage(imageContainer.image, 0, 0);
  3002. try {
  3003. this.taintCtx.getImageData(0, 0, 1, 1);
  3004. imageContainer.tainted = false;
  3005. } catch(e) {
  3006. this.taintCtx = document.createElement("canvas").getContext("2d");
  3007. imageContainer.tainted = true;
  3008. }
  3009. }
  3010.  
  3011. return imageContainer.tainted;
  3012. };
  3013.  
  3014. CanvasRenderer.prototype.drawImage = function(imageContainer, sx, sy, sw, sh, dx, dy, dw, dh) {
  3015. if (!this.taints(imageContainer) || this.options.allowTaint) {
  3016. this.ctx.drawImage(imageContainer.image, sx, sy, sw, sh, dx, dy, dw, dh);
  3017. }
  3018. };
  3019.  
  3020. CanvasRenderer.prototype.clip = function(shapes, callback, context) {
  3021. this.ctx.save();
  3022. shapes.filter(hasEntries).forEach(function(shape) {
  3023. this.shape(shape).clip();
  3024. }, this);
  3025. callback.call(context);
  3026. this.ctx.restore();
  3027. };
  3028.  
  3029. CanvasRenderer.prototype.shape = function(shape) {
  3030. this.ctx.beginPath();
  3031. shape.forEach(function(point, index) {
  3032. if (point[0] === "rect") {
  3033. this.ctx.rect.apply(this.ctx, point.slice(1));
  3034. } else {
  3035. this.ctx[(index === 0) ? "moveTo" : point[0] + "To" ].apply(this.ctx, point.slice(1));
  3036. }
  3037. }, this);
  3038. this.ctx.closePath();
  3039. return this.ctx;
  3040. };
  3041.  
  3042. CanvasRenderer.prototype.font = function(color, style, variant, weight, size, family) {
  3043. this.setFillStyle(color).font = [style, variant, weight, size, family].join(" ").split(",")[0];
  3044. };
  3045.  
  3046. CanvasRenderer.prototype.fontShadow = function(color, offsetX, offsetY, blur) {
  3047. this.setVariable("shadowColor", color.toString())
  3048. .setVariable("shadowOffsetY", offsetX)
  3049. .setVariable("shadowOffsetX", offsetY)
  3050. .setVariable("shadowBlur", blur);
  3051. };
  3052.  
  3053. CanvasRenderer.prototype.clearShadow = function() {
  3054. this.setVariable("shadowColor", "rgba(0,0,0,0)");
  3055. };
  3056.  
  3057. CanvasRenderer.prototype.setOpacity = function(opacity) {
  3058. this.ctx.globalAlpha = opacity;
  3059. };
  3060.  
  3061. CanvasRenderer.prototype.setTransform = function(transform) {
  3062. this.ctx.translate(transform.origin[0], transform.origin[1]);
  3063. this.ctx.transform.apply(this.ctx, transform.matrix);
  3064. this.ctx.translate(-transform.origin[0], -transform.origin[1]);
  3065. };
  3066.  
  3067. CanvasRenderer.prototype.setVariable = function(property, value) {
  3068. if (this.variables[property] !== value) {
  3069. this.variables[property] = this.ctx[property] = value;
  3070. }
  3071.  
  3072. return this;
  3073. };
  3074.  
  3075. CanvasRenderer.prototype.text = function(text, left, bottom) {
  3076. this.ctx.fillText(text, left, bottom);
  3077. };
  3078.  
  3079. CanvasRenderer.prototype.backgroundRepeatShape = function(imageContainer, backgroundPosition, size, bounds, left, top, width, height, borderData) {
  3080. var shape = [
  3081. ["line", Math.round(left), Math.round(top)],
  3082. ["line", Math.round(left + width), Math.round(top)],
  3083. ["line", Math.round(left + width), Math.round(height + top)],
  3084. ["line", Math.round(left), Math.round(height + top)]
  3085. ];
  3086. this.clip([shape], function() {
  3087. this.renderBackgroundRepeat(imageContainer, backgroundPosition, size, bounds, borderData[3], borderData[0]);
  3088. }, this);
  3089. };
  3090.  
  3091. CanvasRenderer.prototype.renderBackgroundRepeat = function(imageContainer, backgroundPosition, size, bounds, borderLeft, borderTop) {
  3092. var offsetX = Math.round(bounds.left + backgroundPosition.left + borderLeft), offsetY = Math.round(bounds.top + backgroundPosition.top + borderTop);
  3093. this.setFillStyle(this.ctx.createPattern(this.resizeImage(imageContainer, size), "repeat"));
  3094. this.ctx.translate(offsetX, offsetY);
  3095. this.ctx.fill();
  3096. this.ctx.translate(-offsetX, -offsetY);
  3097. };
  3098.  
  3099. CanvasRenderer.prototype.renderBackgroundGradient = function(gradientImage, bounds) {
  3100. if (gradientImage instanceof LinearGradientContainer) {
  3101. var gradient = this.ctx.createLinearGradient(
  3102. bounds.left + bounds.width * gradientImage.x0,
  3103. bounds.top + bounds.height * gradientImage.y0,
  3104. bounds.left + bounds.width * gradientImage.x1,
  3105. bounds.top + bounds.height * gradientImage.y1);
  3106. gradientImage.colorStops.forEach(function(colorStop) {
  3107. gradient.addColorStop(colorStop.stop, colorStop.color.toString());
  3108. });
  3109. this.rectangle(bounds.left, bounds.top, bounds.width, bounds.height, gradient);
  3110. }
  3111. };
  3112.  
  3113. CanvasRenderer.prototype.resizeImage = function(imageContainer, size) {
  3114. var image = imageContainer.image;
  3115. if(image.width === size.width && image.height === size.height) {
  3116. return image;
  3117. }
  3118.  
  3119. var ctx, canvas = document.createElement('canvas');
  3120. canvas.width = size.width;
  3121. canvas.height = size.height;
  3122. ctx = canvas.getContext("2d");
  3123. ctx.drawImage(image, 0, 0, image.width, image.height, 0, 0, size.width, size.height );
  3124. return canvas;
  3125. };
  3126.  
  3127. function hasEntries(array) {
  3128. return array.length > 0;
  3129. }
  3130.  
  3131. module.exports = CanvasRenderer;
  3132.  
  3133. },{"../lineargradientcontainer":12,"../log":13,"../renderer":19}],21:[function(_dereq_,module,exports){
  3134. var NodeContainer = _dereq_('./nodecontainer');
  3135.  
  3136. function StackingContext(hasOwnStacking, opacity, element, parent) {
  3137. NodeContainer.call(this, element, parent);
  3138. this.ownStacking = hasOwnStacking;
  3139. this.contexts = [];
  3140. this.children = [];
  3141. this.opacity = (this.parent ? this.parent.stack.opacity : 1) * opacity;
  3142. }
  3143.  
  3144. StackingContext.prototype = Object.create(NodeContainer.prototype);
  3145.  
  3146. StackingContext.prototype.getParentStack = function(context) {
  3147. var parentStack = (this.parent) ? this.parent.stack : null;
  3148. return parentStack ? (parentStack.ownStacking ? parentStack : parentStack.getParentStack(context)) : context.stack;
  3149. };
  3150.  
  3151. module.exports = StackingContext;
  3152.  
  3153. },{"./nodecontainer":14}],22:[function(_dereq_,module,exports){
  3154. function Support(document) {
  3155. this.rangeBounds = this.testRangeBounds(document);
  3156. this.cors = this.testCORS();
  3157. this.svg = this.testSVG();
  3158. }
  3159.  
  3160. Support.prototype.testRangeBounds = function(document) {
  3161. var range, testElement, rangeBounds, rangeHeight, support = false;
  3162.  
  3163. if (document.createRange) {
  3164. range = document.createRange();
  3165. if (range.getBoundingClientRect) {
  3166. testElement = document.createElement('boundtest');
  3167. testElement.style.height = "123px";
  3168. testElement.style.display = "block";
  3169. document.body.appendChild(testElement);
  3170.  
  3171. range.selectNode(testElement);
  3172. rangeBounds = range.getBoundingClientRect();
  3173. rangeHeight = rangeBounds.height;
  3174.  
  3175. if (rangeHeight === 123) {
  3176. support = true;
  3177. }
  3178. document.body.removeChild(testElement);
  3179. }
  3180. }
  3181.  
  3182. return support;
  3183. };
  3184.  
  3185. Support.prototype.testCORS = function() {
  3186. return typeof((new Image()).crossOrigin) !== "undefined";
  3187. };
  3188.  
  3189. Support.prototype.testSVG = function() {
  3190. var img = new Image();
  3191. var canvas = document.createElement("canvas");
  3192. var ctx = canvas.getContext("2d");
  3193. img.src = "data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'></svg>";
  3194.  
  3195. try {
  3196. ctx.drawImage(img, 0, 0);
  3197. canvas.toDataURL();
  3198. } catch(e) {
  3199. return false;
  3200. }
  3201. return true;
  3202. };
  3203.  
  3204. module.exports = Support;
  3205.  
  3206. },{}],23:[function(_dereq_,module,exports){
  3207. var XHR = _dereq_('./xhr');
  3208. var decode64 = _dereq_('./utils').decode64;
  3209.  
  3210. function SVGContainer(src) {
  3211. this.src = src;
  3212. this.image = null;
  3213. var self = this;
  3214.  
  3215. this.promise = this.hasFabric().then(function() {
  3216. return (self.isInline(src) ? Promise.resolve(self.inlineFormatting(src)) : XHR(src));
  3217. }).then(function(svg) {
  3218. return new Promise(function(resolve) {
  3219. window.html2canvas.svg.fabric.loadSVGFromString(svg, self.createCanvas.call(self, resolve));
  3220. });
  3221. });
  3222. }
  3223.  
  3224. SVGContainer.prototype.hasFabric = function() {
  3225. return !window.html2canvas.svg || !window.html2canvas.svg.fabric ? Promise.reject(new Error("html2canvas.svg.js is not loaded, cannot render svg")) : Promise.resolve();
  3226. };
  3227.  
  3228. SVGContainer.prototype.inlineFormatting = function(src) {
  3229. return (/^data:image\/svg\+xml;base64,/.test(src)) ? this.decode64(this.removeContentType(src)) : this.removeContentType(src);
  3230. };
  3231.  
  3232. SVGContainer.prototype.removeContentType = function(src) {
  3233. return src.replace(/^data:image\/svg\+xml(;base64)?,/,'');
  3234. };
  3235.  
  3236. SVGContainer.prototype.isInline = function(src) {
  3237. return (/^data:image\/svg\+xml/i.test(src));
  3238. };
  3239.  
  3240. SVGContainer.prototype.createCanvas = function(resolve) {
  3241. var self = this;
  3242. return function (objects, options) {
  3243. var canvas = new window.html2canvas.svg.fabric.StaticCanvas('c');
  3244. self.image = canvas.lowerCanvasEl;
  3245. canvas
  3246. .setWidth(options.width)
  3247. .setHeight(options.height)
  3248. .add(window.html2canvas.svg.fabric.util.groupSVGElements(objects, options))
  3249. .renderAll();
  3250. resolve(canvas.lowerCanvasEl);
  3251. };
  3252. };
  3253.  
  3254. SVGContainer.prototype.decode64 = function(str) {
  3255. return (typeof(window.atob) === "function") ? window.atob(str) : decode64(str);
  3256. };
  3257.  
  3258. module.exports = SVGContainer;
  3259.  
  3260. },{"./utils":26,"./xhr":28}],24:[function(_dereq_,module,exports){
  3261. var SVGContainer = _dereq_('./svgcontainer');
  3262.  
  3263. function SVGNodeContainer(node, _native) {
  3264. this.src = node;
  3265. this.image = null;
  3266. var self = this;
  3267.  
  3268. this.promise = _native ? new Promise(function(resolve, reject) {
  3269. self.image = new Image();
  3270. self.image.onload = resolve;
  3271. self.image.onerror = reject;
  3272. self.image.src = "data:image/svg+xml," + (new XMLSerializer()).serializeToString(node);
  3273. if (self.image.complete === true) {
  3274. resolve(self.image);
  3275. }
  3276. }) : this.hasFabric().then(function() {
  3277. return new Promise(function(resolve) {
  3278. window.html2canvas.svg.fabric.parseSVGDocument(node, self.createCanvas.call(self, resolve));
  3279. });
  3280. });
  3281. }
  3282.  
  3283. SVGNodeContainer.prototype = Object.create(SVGContainer.prototype);
  3284.  
  3285. module.exports = SVGNodeContainer;
  3286.  
  3287. },{"./svgcontainer":23}],25:[function(_dereq_,module,exports){
  3288. var NodeContainer = _dereq_('./nodecontainer');
  3289.  
  3290. function TextContainer(node, parent) {
  3291. NodeContainer.call(this, node, parent);
  3292. }
  3293.  
  3294. TextContainer.prototype = Object.create(NodeContainer.prototype);
  3295.  
  3296. TextContainer.prototype.applyTextTransform = function() {
  3297. this.node.data = this.transform(this.parent.css("textTransform"));
  3298. };
  3299.  
  3300. TextContainer.prototype.transform = function(transform) {
  3301. var text = this.node.data;
  3302. switch(transform){
  3303. case "lowercase":
  3304. return text.toLowerCase();
  3305. case "capitalize":
  3306. return text.replace(/(^|\s|:|-|\(|\))([a-z])/g, capitalize);
  3307. case "uppercase":
  3308. return text.toUpperCase();
  3309. default:
  3310. return text;
  3311. }
  3312. };
  3313.  
  3314. function capitalize(m, p1, p2) {
  3315. if (m.length > 0) {
  3316. return p1 + p2.toUpperCase();
  3317. }
  3318. }
  3319.  
  3320. module.exports = TextContainer;
  3321.  
  3322. },{"./nodecontainer":14}],26:[function(_dereq_,module,exports){
  3323. exports.smallImage = function smallImage() {
  3324. return "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";
  3325. };
  3326.  
  3327. exports.bind = function(callback, context) {
  3328. return function() {
  3329. return callback.apply(context, arguments);
  3330. };
  3331. };
  3332.  
  3333. /*
  3334. * base64-arraybuffer
  3335. * https://github.com/niklasvh/base64-arraybuffer
  3336. *
  3337. * Copyright (c) 2012 Niklas von Hertzen
  3338. * Licensed under the MIT license.
  3339. */
  3340.  
  3341. exports.decode64 = function(base64) {
  3342. var chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
  3343. var len = base64.length, i, encoded1, encoded2, encoded3, encoded4, byte1, byte2, byte3;
  3344.  
  3345. var output = "";
  3346.  
  3347. for (i = 0; i < len; i+=4) {
  3348. encoded1 = chars.indexOf(base64[i]);
  3349. encoded2 = chars.indexOf(base64[i+1]);
  3350. encoded3 = chars.indexOf(base64[i+2]);
  3351. encoded4 = chars.indexOf(base64[i+3]);
  3352.  
  3353. byte1 = (encoded1 << 2) | (encoded2 >> 4);
  3354. byte2 = ((encoded2 & 15) << 4) | (encoded3 >> 2);
  3355. byte3 = ((encoded3 & 3) << 6) | encoded4;
  3356. if (encoded3 === 64) {
  3357. output += String.fromCharCode(byte1);
  3358. } else if (encoded4 === 64 || encoded4 === -1) {
  3359. output += String.fromCharCode(byte1, byte2);
  3360. } else{
  3361. output += String.fromCharCode(byte1, byte2, byte3);
  3362. }
  3363. }
  3364.  
  3365. return output;
  3366. };
  3367.  
  3368. exports.getBounds = function(node) {
  3369. if (node.getBoundingClientRect) {
  3370. var clientRect = node.getBoundingClientRect();
  3371. var width = node.offsetWidth == null ? clientRect.width : node.offsetWidth;
  3372. return {
  3373. top: clientRect.top,
  3374. bottom: clientRect.bottom || (clientRect.top + clientRect.height),
  3375. right: clientRect.left + width,
  3376. left: clientRect.left,
  3377. width: width,
  3378. height: node.offsetHeight == null ? clientRect.height : node.offsetHeight
  3379. };
  3380. }
  3381. return {};
  3382. };
  3383.  
  3384. exports.offsetBounds = function(node) {
  3385. var parent = node.offsetParent ? exports.offsetBounds(node.offsetParent) : {top: 0, left: 0};
  3386.  
  3387. return {
  3388. top: node.offsetTop + parent.top,
  3389. bottom: node.offsetTop + node.offsetHeight + parent.top,
  3390. right: node.offsetLeft + parent.left + node.offsetWidth,
  3391. left: node.offsetLeft + parent.left,
  3392. width: node.offsetWidth,
  3393. height: node.offsetHeight
  3394. };
  3395. };
  3396.  
  3397. exports.parseBackgrounds = function(backgroundImage) {
  3398. var whitespace = ' \r\n\t',
  3399. method, definition, prefix, prefix_i, block, results = [],
  3400. mode = 0, numParen = 0, quote, args;
  3401. var appendResult = function() {
  3402. if(method) {
  3403. if (definition.substr(0, 1) === '"') {
  3404. definition = definition.substr(1, definition.length - 2);
  3405. }
  3406. if (definition) {
  3407. args.push(definition);
  3408. }
  3409. if (method.substr(0, 1) === '-' && (prefix_i = method.indexOf('-', 1 ) + 1) > 0) {
  3410. prefix = method.substr(0, prefix_i);
  3411. method = method.substr(prefix_i);
  3412. }
  3413. results.push({
  3414. prefix: prefix,
  3415. method: method.toLowerCase(),
  3416. value: block,
  3417. args: args,
  3418. image: null
  3419. });
  3420. }
  3421. args = [];
  3422. method = prefix = definition = block = '';
  3423. };
  3424. args = [];
  3425. method = prefix = definition = block = '';
  3426. backgroundImage.split("").forEach(function(c) {
  3427. if (mode === 0 && whitespace.indexOf(c) > -1) {
  3428. return;
  3429. }
  3430. switch(c) {
  3431. case '"':
  3432. if(!quote) {
  3433. quote = c;
  3434. } else if(quote === c) {
  3435. quote = null;
  3436. }
  3437. break;
  3438. case '(':
  3439. if(quote) {
  3440. break;
  3441. } else if(mode === 0) {
  3442. mode = 1;
  3443. block += c;
  3444. return;
  3445. } else {
  3446. numParen++;
  3447. }
  3448. break;
  3449. case ')':
  3450. if (quote) {
  3451. break;
  3452. } else if(mode === 1) {
  3453. if(numParen === 0) {
  3454. mode = 0;
  3455. block += c;
  3456. appendResult();
  3457. return;
  3458. } else {
  3459. numParen--;
  3460. }
  3461. }
  3462. break;
  3463.  
  3464. case ',':
  3465. if (quote) {
  3466. break;
  3467. } else if(mode === 0) {
  3468. appendResult();
  3469. return;
  3470. } else if (mode === 1) {
  3471. if (numParen === 0 && !method.match(/^url$/i)) {
  3472. args.push(definition);
  3473. definition = '';
  3474. block += c;
  3475. return;
  3476. }
  3477. }
  3478. break;
  3479. }
  3480.  
  3481. block += c;
  3482. if (mode === 0) {
  3483. method += c;
  3484. } else {
  3485. definition += c;
  3486. }
  3487. });
  3488.  
  3489. appendResult();
  3490. return results;
  3491. };
  3492.  
  3493. },{}],27:[function(_dereq_,module,exports){
  3494. var GradientContainer = _dereq_('./gradientcontainer');
  3495.  
  3496. function WebkitGradientContainer(imageData) {
  3497. GradientContainer.apply(this, arguments);
  3498. this.type = imageData.args[0] === "linear" ? GradientContainer.TYPES.LINEAR : GradientContainer.TYPES.RADIAL;
  3499. }
  3500.  
  3501. WebkitGradientContainer.prototype = Object.create(GradientContainer.prototype);
  3502.  
  3503. module.exports = WebkitGradientContainer;
  3504.  
  3505. },{"./gradientcontainer":9}],28:[function(_dereq_,module,exports){
  3506. function XHR(url) {
  3507. return new Promise(function(resolve, reject) {
  3508. var xhr = new XMLHttpRequest();
  3509. xhr.open('GET', url);
  3510.  
  3511. xhr.onload = function() {
  3512. if (xhr.status === 200) {
  3513. resolve(xhr.responseText);
  3514. } else {
  3515. reject(new Error(xhr.statusText));
  3516. }
  3517. };
  3518.  
  3519. xhr.onerror = function() {
  3520. reject(new Error("Network Error"));
  3521. };
  3522.  
  3523. xhr.send();
  3524. });
  3525. }
  3526.  
  3527. module.exports = XHR;
  3528.  
  3529. },{}]},{},[4])(4)
  3530. });
  3531. (function() {
  3532. 'use strict';
  3533. document.addEventListener("keydown", function(e) {
  3534. if(e.keyCode == 121 && e.ctrlKey) {
  3535. var focusedElement = document.activeElement;
  3536. html2canvas(focusedElement).then(function(canvas) {
  3537. var img = canvas.toDataURL();
  3538. GM_openInTab(img);
  3539. });
  3540. }
  3541. });
  3542. })();