JAVASCRIPT   23

html2canvas.js

Guest on 4th August 2021 02:41:44 PM

  1. /*
  2.  html2canvas 0.4.1 <http://html2canvas.hertzen.com>
  3.  Copyright (c) Niklas von Hertzen
  4.  
  5.  Released under MIT License
  6.  */
  7.  
  8. (function(window, document, undefined){
  9.  
  10.     "use strict";
  11.  
  12.     var _html2canvas = {},
  13.         previousElement,
  14.         computedCSS,
  15.         html2canvas;
  16.  
  17.     _html2canvas.Util = {};
  18.  
  19.     _html2canvas.Util.log = function(a) {
  20.         if (_html2canvas.logging && window.console && window.console.log) {
  21.             window.console.log(a);
  22.         }
  23.     };
  24.  
  25.     _html2canvas.Util.trimText = (function(isNative){
  26.         return function(input) {
  27.             return isNative ? isNative.apply(input) : ((input || '') + '').replace( /^\s+|\s+$/g , '' );
  28.         };
  29.     })(String.prototype.trim);
  30.  
  31.     _html2canvas.Util.asFloat = function(v) {
  32.         return parseFloat(v);
  33.     };
  34.  
  35.     (function() {
  36.         // TODO: support all possible length values
  37.         var TEXT_SHADOW_PROPERTY = /((rgba|rgb)\([^\)]+\)(\s-?\d+px){0,})/g;
  38.         var TEXT_SHADOW_VALUES = /(-?\d+px)|(#.+)|(rgb\(.+\))|(rgba\(.+\))/g;
  39.         _html2canvas.Util.parseTextShadows = function (value) {
  40.             if (!value || value === 'none') {
  41.                 return [];
  42.             }
  43.  
  44.             // find multiple shadow declarations
  45.             var shadows = value.match(TEXT_SHADOW_PROPERTY),
  46.                 results = [];
  47.             for (var i = 0; shadows && (i < shadows.length); i++) {
  48.                 var s = shadows[i].match(TEXT_SHADOW_VALUES);
  49.                 results.push({
  50.                     color: s[0],
  51.                     offsetX: s[1] ? s[1].replace('px', '') : 0,
  52.                     offsetY: s[2] ? s[2].replace('px', '') : 0,
  53.                     blur: s[3] ? s[3].replace('px', '') : 0
  54.                 });
  55.             }
  56.             return results;
  57.         };
  58.     })();
  59.  
  60.  
  61.     _html2canvas.Util.parseBackgroundImage = function (value) {
  62.         var whitespace = ' \r\n\t',
  63.             method, definition, prefix, prefix_i, block, results = [],
  64.             c, mode = 0, numParen = 0, quote, args;
  65.  
  66.         var appendResult = function(){
  67.             if(method) {
  68.                 if(definition.substr( 0, 1 ) === '"') {
  69.                     definition = definition.substr( 1, definition.length - 2 );
  70.                 }
  71.                 if(definition) {
  72.                     args.push(definition);
  73.                 }
  74.                 if(method.substr( 0, 1 ) === '-' &&
  75.                     (prefix_i = method.indexOf( '-', 1 ) + 1) > 0) {
  76.                     prefix = method.substr( 0, prefix_i);
  77.                     method = method.substr( prefix_i );
  78.                 }
  79.                 results.push({
  80.                     prefix: prefix,
  81.                     method: method.toLowerCase(),
  82.                     value: block,
  83.                     args: args
  84.                 });
  85.             }
  86.             args = []; //for some odd reason, setting .length = 0 didn't work in safari
  87.             method =
  88.                 prefix =
  89.                     definition =
  90.                         block = '';
  91.         };
  92.  
  93.         appendResult();
  94.         for(var i = 0, ii = value.length; i<ii; i++) {
  95.             c = value[i];
  96.             if(mode === 0 && whitespace.indexOf( c ) > -1){
  97.                 continue;
  98.             }
  99.             switch(c) {
  100.                 case '"':
  101.                     if(!quote) {
  102.                         quote = c;
  103.                     }
  104.                     else if(quote === c) {
  105.                         quote = null;
  106.                     }
  107.                     break;
  108.  
  109.                 case '(':
  110.                     if(quote) { break; }
  111.                     else if(mode === 0) {
  112.                         mode = 1;
  113.                         block += c;
  114.                         continue;
  115.                     } else {
  116.                         numParen++;
  117.                     }
  118.                     break;
  119.  
  120.                 case ')':
  121.                     if(quote) { break; }
  122.                     else if(mode === 1) {
  123.                         if(numParen === 0) {
  124.                             mode = 0;
  125.                             block += c;
  126.                             appendResult();
  127.                             continue;
  128.                         } else {
  129.                             numParen--;
  130.                         }
  131.                     }
  132.                     break;
  133.  
  134.                 case ',':
  135.                     if(quote) { break; }
  136.                     else if(mode === 0) {
  137.                         appendResult();
  138.                         continue;
  139.                     }
  140.                     else if (mode === 1) {
  141.                         if(numParen === 0 && !method.match(/^url$/i)) {
  142.                             args.push(definition);
  143.                             definition = '';
  144.                             block += c;
  145.                             continue;
  146.                         }
  147.                     }
  148.                     break;
  149.             }
  150.  
  151.             block += c;
  152.             if(mode === 0) { method += c; }
  153.             else { definition += c; }
  154.         }
  155.         appendResult();
  156.  
  157.         return results;
  158.     };
  159.  
  160.     _html2canvas.Util.Bounds = function (element) {
  161.         var clientRect, bounds = {};
  162.  
  163.         if (element.getBoundingClientRect){
  164.             clientRect = element.getBoundingClientRect();
  165.  
  166.             // TODO add scroll position to bounds, so no scrolling of window necessary
  167.             bounds.top = clientRect.top;
  168.             bounds.bottom = clientRect.bottom || (clientRect.top + clientRect.height);
  169.             bounds.left = clientRect.left;
  170.  
  171.             bounds.width = element.offsetWidth;
  172.             bounds.height = element.offsetHeight;
  173.         }
  174.  
  175.         return bounds;
  176.     };
  177.  
  178. // TODO ideally, we'd want everything to go through this function instead of Util.Bounds,
  179. // but would require further work to calculate the correct positions for elements with offsetParents
  180.     _html2canvas.Util.OffsetBounds = function (element) {
  181.         var parent = element.offsetParent ? _html2canvas.Util.OffsetBounds(element.offsetParent) : {top: 0, left: 0};
  182.  
  183.         return {
  184.             top: element.offsetTop + parent.top,
  185.             bottom: element.offsetTop + element.offsetHeight + parent.top,
  186.             left: element.offsetLeft + parent.left,
  187.             width: element.offsetWidth,
  188.             height: element.offsetHeight
  189.         };
  190.     };
  191.  
  192.     function toPX(element, attribute, value ) {
  193.         var rsLeft = element.runtimeStyle && element.runtimeStyle[attribute],
  194.             left,
  195.             style = element.style;
  196.  
  197.         // Check if we are not dealing with pixels, (Opera has issues with this)
  198.         // Ported from jQuery css.js
  199.         // From the awesome hack by Dean Edwards
  200.         // http://erik.eae.net/archives/2007/07/27/18.54.15/#comment-102291
  201.  
  202.         // If we're not dealing with a regular pixel number
  203.         // but a number that has a weird ending, we need to convert it to pixels
  204.  
  205.         if ( !/^-?[0-9]+\.?[0-9]*(?:px)?$/i.test( value ) && /^-?\d/.test(value) ) {
  206.             // Remember the original values
  207.             left = style.left;
  208.  
  209.             // Put in the new values to get a computed value out
  210.             if (rsLeft) {
  211.                 element.runtimeStyle.left = element.currentStyle.left;
  212.             }
  213.             style.left = attribute === "fontSize" ? "1em" : (value || 0);
  214.             value = style.pixelLeft + "px";
  215.  
  216.             // Revert the changed values
  217.             style.left = left;
  218.             if (rsLeft) {
  219.                 element.runtimeStyle.left = rsLeft;
  220.             }
  221.         }
  222.  
  223.         if (!/^(thin|medium|thick)$/i.test(value)) {
  224.             return Math.round(parseFloat(value)) + "px";
  225.         }
  226.  
  227.         return value;
  228.     }
  229.  
  230.     function asInt(val) {
  231.         return parseInt(val, 10);
  232.     }
  233.  
  234.     function parseBackgroundSizePosition(value, element, attribute, index) {
  235.         value = (value || '').split(',');
  236.         value = value[index || 0] || value[0] || 'auto';
  237.         value = _html2canvas.Util.trimText(value).split(' ');
  238.  
  239.         if(attribute === 'backgroundSize' && (!value[0] || value[0].match(/cover|contain|auto/))) {
  240.             //these values will be handled in the parent function
  241.         } else {
  242.             value[0] = (value[0].indexOf( "%" ) === -1) ? toPX(element, attribute + "X", value[0]) : value[0];
  243.             if(value[1] === undefined) {
  244.                 if(attribute === 'backgroundSize') {
  245.                     value[1] = 'auto';
  246.                     return value;
  247.                 } else {
  248.                     // IE 9 doesn't return double digit always
  249.                     value[1] = value[0];
  250.                 }
  251.             }
  252.             value[1] = (value[1].indexOf("%") === -1) ? toPX(element, attribute + "Y", value[1]) : value[1];
  253.         }
  254.         return value;
  255.     }
  256.  
  257.     _html2canvas.Util.getCSS = function (element, attribute, index) {
  258.         if (previousElement !== element) {
  259.             computedCSS = document.defaultView.getComputedStyle(element, null);
  260.         }
  261.  
  262.         var value = computedCSS[attribute];
  263.  
  264.         if (/^background(Size|Position)$/.test(attribute)) {
  265.             return parseBackgroundSizePosition(value, element, attribute, index);
  266.         } else if (/border(Top|Bottom)(Left|Right)Radius/.test(attribute)) {
  267.             var arr = value.split(" ");
  268.             if (arr.length <= 1) {
  269.                 arr[1] = arr[0];
  270.             }
  271.             return arr.map(asInt);
  272.         }
  273.  
  274.         return value;
  275.     };
  276.  
  277.     _html2canvas.Util.resizeBounds = function( current_width, current_height, target_width, target_height, stretch_mode ){
  278.         var target_ratio = target_width / target_height,
  279.             current_ratio = current_width / current_height,
  280.             output_width, output_height;
  281.  
  282.         if(!stretch_mode || stretch_mode === 'auto') {
  283.             output_width = target_width;
  284.             output_height = target_height;
  285.         } else if(target_ratio < current_ratio ^ stretch_mode === 'contain') {
  286.             output_height = target_height;
  287.             output_width = target_height * current_ratio;
  288.         } else {
  289.             output_width = target_width;
  290.             output_height = target_width / current_ratio;
  291.         }
  292.  
  293.         return {
  294.             width: output_width,
  295.             height: output_height
  296.         };
  297.     };
  298.  
  299.     function backgroundBoundsFactory( prop, el, bounds, image, imageIndex, backgroundSize ) {
  300.         var bgposition =  _html2canvas.Util.getCSS( el, prop, imageIndex ) ,
  301.             topPos,
  302.             left,
  303.             percentage,
  304.             val;
  305.  
  306.         if (bgposition.length === 1){
  307.             val = bgposition[0];
  308.  
  309.             bgposition = [];
  310.  
  311.             bgposition[0] = val;
  312.             bgposition[1] = val;
  313.         }
  314.  
  315.         if (bgposition[0].toString().indexOf("%") !== -1){
  316.             percentage = (parseFloat(bgposition[0])/100);
  317.             left = bounds.width * percentage;
  318.             if(prop !== 'backgroundSize') {
  319.                 left -= (backgroundSize || image).width*percentage;
  320.             }
  321.         } else {
  322.             if(prop === 'backgroundSize') {
  323.                 if(bgposition[0] === 'auto') {
  324.                     left = image.width;
  325.                 } else {
  326.                     if (/contain|cover/.test(bgposition[0])) {
  327.                         var resized = _html2canvas.Util.resizeBounds(image.width, image.height, bounds.width, bounds.height, bgposition[0]);
  328.                         left = resized.width;
  329.                         topPos = resized.height;
  330.                     } else {
  331.                         left = parseInt(bgposition[0], 10);
  332.                     }
  333.                 }
  334.             } else {
  335.                 left = parseInt( bgposition[0], 10);
  336.             }
  337.         }
  338.  
  339.  
  340.         if(bgposition[1] === 'auto') {
  341.             topPos = left / image.width * image.height;
  342.         } else if (bgposition[1].toString().indexOf("%") !== -1){
  343.             percentage = (parseFloat(bgposition[1])/100);
  344.             topPos =  bounds.height * percentage;
  345.             if(prop !== 'backgroundSize') {
  346.                 topPos -= (backgroundSize || image).height * percentage;
  347.             }
  348.  
  349.         } else {
  350.             topPos = parseInt(bgposition[1],10);
  351.         }
  352.  
  353.         return [left, topPos];
  354.     }
  355.  
  356.     _html2canvas.Util.BackgroundPosition = function( el, bounds, image, imageIndex, backgroundSize ) {
  357.         var result = backgroundBoundsFactory( 'backgroundPosition', el, bounds, image, imageIndex, backgroundSize );
  358.         return { left: result[0], top: result[1] };
  359.     };
  360.  
  361.     _html2canvas.Util.BackgroundSize = function( el, bounds, image, imageIndex ) {
  362.         var result = backgroundBoundsFactory( 'backgroundSize', el, bounds, image, imageIndex );
  363.         return { width: result[0], height: result[1] };
  364.     };
  365.  
  366.     _html2canvas.Util.Extend = function (options, defaults) {
  367.         for (var key in options) {
  368.             if (options.hasOwnProperty(key)) {
  369.                 defaults[key] = options[key];
  370.             }
  371.         }
  372.         return defaults;
  373.     };
  374.  
  375.  
  376.     /*
  377.      * Derived from jQuery.contents()
  378.      * Copyright 2010, John Resig
  379.      * Dual licensed under the MIT or GPL Version 2 licenses.
  380.      * http://jquery.org/license
  381.      */
  382.     _html2canvas.Util.Children = function( elem ) {
  383.         var children;
  384.         try {
  385.             children = (elem.nodeName && elem.nodeName.toUpperCase() === "IFRAME") ? elem.contentDocument || elem.contentWindow.document : (function(array) {
  386.                 var ret = [];
  387.                 if (array !== null) {
  388.                     (function(first, second ) {
  389.                         var i = first.length,
  390.                             j = 0;
  391.  
  392.                         if (typeof second.length === "number") {
  393.                             for (var l = second.length; j < l; j++) {
  394.                                 first[i++] = second[j];
  395.                             }
  396.                         } else {
  397.                             while (second[j] !== undefined) {
  398.                                 first[i++] = second[j++];
  399.                             }
  400.                         }
  401.  
  402.                         first.length = i;
  403.  
  404.                         return first;
  405.                     })(ret, array);
  406.                 }
  407.                 return ret;
  408.             })(elem.childNodes);
  409.  
  410.         } catch (ex) {
  411.             _html2canvas.Util.log("html2canvas.Util.Children failed with exception: " + ex.message);
  412.             children = [];
  413.         }
  414.         return children;
  415.     };
  416.  
  417.     _html2canvas.Util.isTransparent = function(backgroundColor) {
  418.         return (backgroundColor === "transparent" || backgroundColor === "rgba(0, 0, 0, 0)");
  419.     };
  420.     _html2canvas.Util.Font = (function () {
  421.  
  422.         var fontData = {};
  423.  
  424.         return function(font, fontSize, doc) {
  425.             if (fontData[font + "-" + fontSize] !== undefined) {
  426.                 return fontData[font + "-" + fontSize];
  427.             }
  428.  
  429.             var container = doc.createElement('div'),
  430.                 img = doc.createElement('img'),
  431.                 span = doc.createElement('span'),
  432.                 sampleText = 'Hidden Text',
  433.                 baseline,
  434.                 middle,
  435.                 metricsObj;
  436.  
  437.             container.style.visibility = "hidden";
  438.             container.style.fontFamily = font;
  439.             container.style.fontSize = fontSize;
  440.             container.style.margin = 0;
  441.             container.style.padding = 0;
  442.  
  443.             doc.body.appendChild(container);
  444.  
  445.             // http://probablyprogramming.com/2009/03/15/the-tiniest-gif-ever (handtinywhite.gif)
  446.             img.src = "data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACwAAAAAAQABAAACAkQBADs=";
  447.             img.width = 1;
  448.             img.height = 1;
  449.  
  450.             img.style.margin = 0;
  451.             img.style.padding = 0;
  452.             img.style.verticalAlign = "baseline";
  453.  
  454.             span.style.fontFamily = font;
  455.             span.style.fontSize = fontSize;
  456.             span.style.margin = 0;
  457.             span.style.padding = 0;
  458.  
  459.             span.appendChild(doc.createTextNode(sampleText));
  460.             container.appendChild(span);
  461.             container.appendChild(img);
  462.             baseline = (img.offsetTop - span.offsetTop) + 1;
  463.  
  464.             container.removeChild(span);
  465.             container.appendChild(doc.createTextNode(sampleText));
  466.  
  467.             container.style.lineHeight = "normal";
  468.             img.style.verticalAlign = "super";
  469.  
  470.             middle = (img.offsetTop-container.offsetTop) + 1;
  471.             metricsObj = {
  472.                 baseline: baseline,
  473.                 lineWidth: 1,
  474.                 middle: middle
  475.             };
  476.  
  477.             fontData[font + "-" + fontSize] = metricsObj;
  478.  
  479.             doc.body.removeChild(container);
  480.  
  481.             return metricsObj;
  482.         };
  483.     })();
  484.  
  485.     (function(){
  486.         var Util = _html2canvas.Util,
  487.             Generate = {};
  488.  
  489.         _html2canvas.Generate = Generate;
  490.  
  491.         var reGradients = [
  492.             /^(-webkit-linear-gradient)\(([a-z\s]+)([\w\d\.\s,%\(\)]+)\)$/,
  493.             /^(-o-linear-gradient)\(([a-z\s]+)([\w\d\.\s,%\(\)]+)\)$/,
  494.             /^(-webkit-gradient)\((linear|radial),\s((?:\d{1,3}%?)\s(?:\d{1,3}%?),\s(?:\d{1,3}%?)\s(?:\d{1,3}%?))([\w\d\.\s,%\(\)\-]+)\)$/,
  495.             /^(-moz-linear-gradient)\(((?:\d{1,3}%?)\s(?:\d{1,3}%?))([\w\d\.\s,%\(\)]+)\)$/,
  496.             /^(-webkit-radial-gradient)\(((?:\d{1,3}%?)\s(?:\d{1,3}%?)),\s(\w+)\s([a-z\-]+)([\w\d\.\s,%\(\)]+)\)$/,
  497.             /^(-moz-radial-gradient)\(((?:\d{1,3}%?)\s(?:\d{1,3}%?)),\s(\w+)\s?([a-z\-]*)([\w\d\.\s,%\(\)]+)\)$/,
  498.             /^(-o-radial-gradient)\(((?:\d{1,3}%?)\s(?:\d{1,3}%?)),\s(\w+)\s([a-z\-]+)([\w\d\.\s,%\(\)]+)\)$/
  499.         ];
  500.  
  501.         /*
  502.          * TODO: Add IE10 vendor prefix (-ms) support
  503.          * TODO: Add W3C gradient (linear-gradient) support
  504.          * TODO: Add old Webkit -webkit-gradient(radial, ...) support
  505.          * TODO: Maybe some RegExp optimizations are possible ;o)
  506.          */
  507.         Generate.parseGradient = function(css, bounds) {
  508.             var gradient, i, len = reGradients.length, m1, stop, m2, m2Len, step, m3, tl,tr,br,bl;
  509.  
  510.             for(i = 0; i < len; i+=1){
  511.                 m1 = css.match(reGradients[i]);
  512.                 if(m1) {
  513.                     break;
  514.                 }
  515.             }
  516.  
  517.             if(m1) {
  518.                 switch(m1[1]) {
  519.                     case '-webkit-linear-gradient':
  520.                     case '-o-linear-gradient':
  521.  
  522.                         gradient = {
  523.                             type: 'linear',
  524.                             x0: null,
  525.                             y0: null,
  526.                             x1: null,
  527.                             y1: null,
  528.                             colorStops: []
  529.                         };
  530.  
  531.                         // get coordinates
  532.                         m2 = m1[2].match(/\w+/g);
  533.                         if(m2){
  534.                             m2Len = m2.length;
  535.                             for(i = 0; i < m2Len; i+=1){
  536.                                 switch(m2[i]) {
  537.                                     case 'top':
  538.                                         gradient.y0 = 0;
  539.                                         gradient.y1 = bounds.height;
  540.                                         break;
  541.  
  542.                                     case 'right':
  543.                                         gradient.x0 = bounds.width;
  544.                                         gradient.x1 = 0;
  545.                                         break;
  546.  
  547.                                     case 'bottom':
  548.                                         gradient.y0 = bounds.height;
  549.                                         gradient.y1 = 0;
  550.                                         break;
  551.  
  552.                                     case 'left':
  553.                                         gradient.x0 = 0;
  554.                                         gradient.x1 = bounds.width;
  555.                                         break;
  556.                                 }
  557.                             }
  558.                         }
  559.                         if(gradient.x0 === null && gradient.x1 === null){ // center
  560.                             gradient.x0 = gradient.x1 = bounds.width / 2;
  561.                         }
  562.                         if(gradient.y0 === null && gradient.y1 === null){ // center
  563.                             gradient.y0 = gradient.y1 = bounds.height / 2;
  564.                         }
  565.  
  566.                         // get colors and stops
  567.                         m2 = m1[3].match(/((?:rgb|rgba)\(\d{1,3},\s\d{1,3},\s\d{1,3}(?:,\s[0-9\.]+)?\)(?:\s\d{1,3}(?:%|px))?)+/g);
  568.                         if(m2){
  569.                             m2Len = m2.length;
  570.                             step = 1 / Math.max(m2Len - 1, 1);
  571.                             for(i = 0; i < m2Len; i+=1){
  572.                                 m3 = m2[i].match(/((?:rgb|rgba)\(\d{1,3},\s\d{1,3},\s\d{1,3}(?:,\s[0-9\.]+)?\))\s*(\d{1,3})?(%|px)?/);
  573.                                 if(m3[2]){
  574.                                     stop = parseFloat(m3[2]);
  575.                                     if(m3[3] === '%'){
  576.                                         stop /= 100;
  577.                                     } else { // px - stupid opera
  578.                                         stop /= bounds.width;
  579.                                     }
  580.                                 } else {
  581.                                     stop = i * step;
  582.                                 }
  583.                                 gradient.colorStops.push({
  584.                                     color: m3[1],
  585.                                     stop: stop
  586.                                 });
  587.                             }
  588.                         }
  589.                         break;
  590.  
  591.                     case '-webkit-gradient':
  592.  
  593.                         gradient = {
  594.                             type: m1[2] === 'radial' ? 'circle' : m1[2], // TODO: Add radial gradient support for older mozilla definitions
  595.                             x0: 0,
  596.                             y0: 0,
  597.                             x1: 0,
  598.                             y1: 0,
  599.                             colorStops: []
  600.                         };
  601.  
  602.                         // get coordinates
  603.                         m2 = m1[3].match(/(\d{1,3})%?\s(\d{1,3})%?,\s(\d{1,3})%?\s(\d{1,3})%?/);
  604.                         if(m2){
  605.                             gradient.x0 = (m2[1] * bounds.width) / 100;
  606.                             gradient.y0 = (m2[2] * bounds.height) / 100;
  607.                             gradient.x1 = (m2[3] * bounds.width) / 100;
  608.                             gradient.y1 = (m2[4] * bounds.height) / 100;
  609.                         }
  610.  
  611.                         // get colors and stops
  612.                         m2 = m1[4].match(/((?:from|to|color-stop)\((?:[0-9\.]+,\s)?(?:rgb|rgba)\(\d{1,3},\s\d{1,3},\s\d{1,3}(?:,\s[0-9\.]+)?\)\))+/g);
  613.                         if(m2){
  614.                             m2Len = m2.length;
  615.                             for(i = 0; i < m2Len; i+=1){
  616.                                 m3 = m2[i].match(/(from|to|color-stop)\(([0-9\.]+)?(?:,\s)?((?:rgb|rgba)\(\d{1,3},\s\d{1,3},\s\d{1,3}(?:,\s[0-9\.]+)?\))\)/);
  617.                                 stop = parseFloat(m3[2]);
  618.                                 if(m3[1] === 'from') {
  619.                                     stop = 0.0;
  620.                                 }
  621.                                 if(m3[1] === 'to') {
  622.                                     stop = 1.0;
  623.                                 }
  624.                                 gradient.colorStops.push({
  625.                                     color: m3[3],
  626.                                     stop: stop
  627.                                 });
  628.                             }
  629.                         }
  630.                         break;
  631.  
  632.                     case '-moz-linear-gradient':
  633.  
  634.                         gradient = {
  635.                             type: 'linear',
  636.                             x0: 0,
  637.                             y0: 0,
  638.                             x1: 0,
  639.                             y1: 0,
  640.                             colorStops: []
  641.                         };
  642.  
  643.                         // get coordinates
  644.                         m2 = m1[2].match(/(\d{1,3})%?\s(\d{1,3})%?/);
  645.  
  646.                         // m2[1] == 0%   -> left
  647.                         // m2[1] == 50%  -> center
  648.                         // m2[1] == 100% -> right
  649.  
  650.                         // m2[2] == 0%   -> top
  651.                         // m2[2] == 50%  -> center
  652.                         // m2[2] == 100% -> bottom
  653.  
  654.                         if(m2){
  655.                             gradient.x0 = (m2[1] * bounds.width) / 100;
  656.                             gradient.y0 = (m2[2] * bounds.height) / 100;
  657.                             gradient.x1 = bounds.width - gradient.x0;
  658.                             gradient.y1 = bounds.height - gradient.y0;
  659.                         }
  660.  
  661.                         // get colors and stops
  662.                         m2 = m1[3].match(/((?:rgb|rgba)\(\d{1,3},\s\d{1,3},\s\d{1,3}(?:,\s[0-9\.]+)?\)(?:\s\d{1,3}%)?)+/g);
  663.                         if(m2){
  664.                             m2Len = m2.length;
  665.                             step = 1 / Math.max(m2Len - 1, 1);
  666.                             for(i = 0; i < m2Len; i+=1){
  667.                                 m3 = m2[i].match(/((?:rgb|rgba)\(\d{1,3},\s\d{1,3},\s\d{1,3}(?:,\s[0-9\.]+)?\))\s*(\d{1,3})?(%)?/);
  668.                                 if(m3[2]){
  669.                                     stop = parseFloat(m3[2]);
  670.                                     if(m3[3]){ // percentage
  671.                                         stop /= 100;
  672.                                     }
  673.                                 } else {
  674.                                     stop = i * step;
  675.                                 }
  676.                                 gradient.colorStops.push({
  677.                                     color: m3[1],
  678.                                     stop: stop
  679.                                 });
  680.                             }
  681.                         }
  682.                         break;
  683.  
  684.                     case '-webkit-radial-gradient':
  685.                     case '-moz-radial-gradient':
  686.                     case '-o-radial-gradient':
  687.  
  688.                         gradient = {
  689.                             type: 'circle',
  690.                             x0: 0,
  691.                             y0: 0,
  692.                             x1: bounds.width,
  693.                             y1: bounds.height,
  694.                             cx: 0,
  695.                             cy: 0,
  696.                             rx: 0,
  697.                             ry: 0,
  698.                             colorStops: []
  699.                         };
  700.  
  701.                         // center
  702.                         m2 = m1[2].match(/(\d{1,3})%?\s(\d{1,3})%?/);
  703.                         if(m2){
  704.                             gradient.cx = (m2[1] * bounds.width) / 100;
  705.                             gradient.cy = (m2[2] * bounds.height) / 100;
  706.                         }
  707.  
  708.                         // size
  709.                         m2 = m1[3].match(/\w+/);
  710.                         m3 = m1[4].match(/[a-z\-]*/);
  711.                         if(m2 && m3){
  712.                             switch(m3[0]){
  713.                                 case 'farthest-corner':
  714.                                 case 'cover': // is equivalent to farthest-corner
  715.                                 case '': // mozilla removes "cover" from definition :(
  716.                                     tl = Math.sqrt(Math.pow(gradient.cx, 2) + Math.pow(gradient.cy, 2));
  717.                                     tr = Math.sqrt(Math.pow(gradient.cx, 2) + Math.pow(gradient.y1 - gradient.cy, 2));
  718.                                     br = Math.sqrt(Math.pow(gradient.x1 - gradient.cx, 2) + Math.pow(gradient.y1 - gradient.cy, 2));
  719.                                     bl = Math.sqrt(Math.pow(gradient.x1 - gradient.cx, 2) + Math.pow(gradient.cy, 2));
  720.                                     gradient.rx = gradient.ry = Math.max(tl, tr, br, bl);
  721.                                     break;
  722.                                 case 'closest-corner':
  723.                                     tl = Math.sqrt(Math.pow(gradient.cx, 2) + Math.pow(gradient.cy, 2));
  724.                                     tr = Math.sqrt(Math.pow(gradient.cx, 2) + Math.pow(gradient.y1 - gradient.cy, 2));
  725.                                     br = Math.sqrt(Math.pow(gradient.x1 - gradient.cx, 2) + Math.pow(gradient.y1 - gradient.cy, 2));
  726.                                     bl = Math.sqrt(Math.pow(gradient.x1 - gradient.cx, 2) + Math.pow(gradient.cy, 2));
  727.                                     gradient.rx = gradient.ry = Math.min(tl, tr, br, bl);
  728.                                     break;
  729.                                 case 'farthest-side':
  730.                                     if(m2[0] === 'circle'){
  731.                                         gradient.rx = gradient.ry = Math.max(
  732.                                             gradient.cx,
  733.                                             gradient.cy,
  734.                                             gradient.x1 - gradient.cx,
  735.                                             gradient.y1 - gradient.cy
  736.                                         );
  737.                                     } else { // ellipse
  738.  
  739.                                         gradient.type = m2[0];
  740.  
  741.                                         gradient.rx = Math.max(
  742.                                             gradient.cx,
  743.                                             gradient.x1 - gradient.cx
  744.                                         );
  745.                                         gradient.ry = Math.max(
  746.                                             gradient.cy,
  747.                                             gradient.y1 - gradient.cy
  748.                                         );
  749.                                     }
  750.                                     break;
  751.                                 case 'closest-side':
  752.                                 case 'contain': // is equivalent to closest-side
  753.                                     if(m2[0] === 'circle'){
  754.                                         gradient.rx = gradient.ry = Math.min(
  755.                                             gradient.cx,
  756.                                             gradient.cy,
  757.                                             gradient.x1 - gradient.cx,
  758.                                             gradient.y1 - gradient.cy
  759.                                         );
  760.                                     } else { // ellipse
  761.  
  762.                                         gradient.type = m2[0];
  763.  
  764.                                         gradient.rx = Math.min(
  765.                                             gradient.cx,
  766.                                             gradient.x1 - gradient.cx
  767.                                         );
  768.                                         gradient.ry = Math.min(
  769.                                             gradient.cy,
  770.                                             gradient.y1 - gradient.cy
  771.                                         );
  772.                                     }
  773.                                     break;
  774.  
  775.                                 // TODO: add support for "30px 40px" sizes (webkit only)
  776.                             }
  777.                         }
  778.  
  779.                         // color stops
  780.                         m2 = m1[5].match(/((?:rgb|rgba)\(\d{1,3},\s\d{1,3},\s\d{1,3}(?:,\s[0-9\.]+)?\)(?:\s\d{1,3}(?:%|px))?)+/g);
  781.                         if(m2){
  782.                             m2Len = m2.length;
  783.                             step = 1 / Math.max(m2Len - 1, 1);
  784.                             for(i = 0; i < m2Len; i+=1){
  785.                                 m3 = m2[i].match(/((?:rgb|rgba)\(\d{1,3},\s\d{1,3},\s\d{1,3}(?:,\s[0-9\.]+)?\))\s*(\d{1,3})?(%|px)?/);
  786.                                 if(m3[2]){
  787.                                     stop = parseFloat(m3[2]);
  788.                                     if(m3[3] === '%'){
  789.                                         stop /= 100;
  790.                                     } else { // px - stupid opera
  791.                                         stop /= bounds.width;
  792.                                     }
  793.                                 } else {
  794.                                     stop = i * step;
  795.                                 }
  796.                                 gradient.colorStops.push({
  797.                                     color: m3[1],
  798.                                     stop: stop
  799.                                 });
  800.                             }
  801.                         }
  802.                         break;
  803.                 }
  804.             }
  805.  
  806.             return gradient;
  807.         };
  808.  
  809.         function addScrollStops(grad) {
  810.             return function(colorStop) {
  811.                 try {
  812.                     grad.addColorStop(colorStop.stop, colorStop.color);
  813.                 }
  814.                 catch(e) {
  815.                     Util.log(['failed to add color stop: ', e, '; tried to add: ', colorStop]);
  816.                 }
  817.             };
  818.         }
  819.  
  820.         Generate.Gradient = function(src, bounds) {
  821.             if(bounds.width === 0 || bounds.height === 0) {
  822.                 return;
  823.             }
  824.  
  825.             var canvas = document.createElement('canvas'),
  826.                 ctx = canvas.getContext('2d'),
  827.                 gradient, grad;
  828.  
  829.             canvas.width = bounds.width;
  830.             canvas.height = bounds.height;
  831.  
  832.             // TODO: add support for multi defined background gradients
  833.             gradient = _html2canvas.Generate.parseGradient(src, bounds);
  834.  
  835.             if(gradient) {
  836.                 switch(gradient.type) {
  837.                     case 'linear':
  838.                         grad = ctx.createLinearGradient(gradient.x0, gradient.y0, gradient.x1, gradient.y1);
  839.                         gradient.colorStops.forEach(addScrollStops(grad));
  840.                         ctx.fillStyle = grad;
  841.                         ctx.fillRect(0, 0, bounds.width, bounds.height);
  842.                         break;
  843.  
  844.                     case 'circle':
  845.                         grad = ctx.createRadialGradient(gradient.cx, gradient.cy, 0, gradient.cx, gradient.cy, gradient.rx);
  846.                         gradient.colorStops.forEach(addScrollStops(grad));
  847.                         ctx.fillStyle = grad;
  848.                         ctx.fillRect(0, 0, bounds.width, bounds.height);
  849.                         break;
  850.  
  851.                     case 'ellipse':
  852.                         var canvasRadial = document.createElement('canvas'),
  853.                             ctxRadial = canvasRadial.getContext('2d'),
  854.                             ri = Math.max(gradient.rx, gradient.ry),
  855.                             di = ri * 2;
  856.  
  857.                         canvasRadial.width = canvasRadial.height = di;
  858.  
  859.                         grad = ctxRadial.createRadialGradient(gradient.rx, gradient.ry, 0, gradient.rx, gradient.ry, ri);
  860.                         gradient.colorStops.forEach(addScrollStops(grad));
  861.  
  862.                         ctxRadial.fillStyle = grad;
  863.                         ctxRadial.fillRect(0, 0, di, di);
  864.  
  865.                         ctx.fillStyle = gradient.colorStops[gradient.colorStops.length - 1].color;
  866.                         ctx.fillRect(0, 0, canvas.width, canvas.height);
  867.                         ctx.drawImage(canvasRadial, gradient.cx - gradient.rx, gradient.cy - gradient.ry, 2 * gradient.rx, 2 * gradient.ry);
  868.                         break;
  869.                 }
  870.             }
  871.  
  872.             return canvas;
  873.         };
  874.  
  875.         Generate.ListAlpha = function(number) {
  876.             var tmp = "",
  877.                 modulus;
  878.  
  879.             do {
  880.                 modulus = number % 26;
  881.                 tmp = String.fromCharCode((modulus) + 64) + tmp;
  882.                 number = number / 26;
  883.             }while((number*26) > 26);
  884.  
  885.             return tmp;
  886.         };
  887.  
  888.         Generate.ListRoman = function(number) {
  889.             var romanArray = ["M", "CM", "D", "CD", "C", "XC", "L", "XL", "X", "IX", "V", "IV", "I"],
  890.                 decimal = [1000, 900, 500, 400, 100, 90, 50, 40, 10, 9, 5, 4, 1],
  891.                 roman = "",
  892.                 v,
  893.                 len = romanArray.length;
  894.  
  895.             if (number <= 0 || number >= 4000) {
  896.                 return number;
  897.             }
  898.  
  899.             for (v=0; v < len; v+=1) {
  900.                 while (number >= decimal[v]) {
  901.                     number -= decimal[v];
  902.                     roman += romanArray[v];
  903.                 }
  904.             }
  905.  
  906.             return roman;
  907.         };
  908.     })();
  909.     function h2cRenderContext(width, height) {
  910.         var storage = [];
  911.         return {
  912.             storage: storage,
  913.             width: width,
  914.             height: height,
  915.             clip: function() {
  916.                 storage.push({
  917.                     type: "function",
  918.                     name: "clip",
  919.                     'arguments': arguments
  920.                 });
  921.             },
  922.             translate: function() {
  923.                 storage.push({
  924.                     type: "function",
  925.                     name: "translate",
  926.                     'arguments': arguments
  927.                 });
  928.             },
  929.             fill: function() {
  930.                 storage.push({
  931.                     type: "function",
  932.                     name: "fill",
  933.                     'arguments': arguments
  934.                 });
  935.             },
  936.             save: function() {
  937.                 storage.push({
  938.                     type: "function",
  939.                     name: "save",
  940.                     'arguments': arguments
  941.                 });
  942.             },
  943.             restore: function() {
  944.                 storage.push({
  945.                     type: "function",
  946.                     name: "restore",
  947.                     'arguments': arguments
  948.                 });
  949.             },
  950.             fillRect: function () {
  951.                 storage.push({
  952.                     type: "function",
  953.                     name: "fillRect",
  954.                     'arguments': arguments
  955.                 });
  956.             },
  957.             createPattern: function() {
  958.                 storage.push({
  959.                     type: "function",
  960.                     name: "createPattern",
  961.                     'arguments': arguments
  962.                 });
  963.             },
  964.             drawShape: function() {
  965.  
  966.                 var shape = [];
  967.  
  968.                 storage.push({
  969.                     type: "function",
  970.                     name: "drawShape",
  971.                     'arguments': shape
  972.                 });
  973.  
  974.                 return {
  975.                     moveTo: function() {
  976.                         shape.push({
  977.                             name: "moveTo",
  978.                             'arguments': arguments
  979.                         });
  980.                     },
  981.                     lineTo: function() {
  982.                         shape.push({
  983.                             name: "lineTo",
  984.                             'arguments': arguments
  985.                         });
  986.                     },
  987.                     arcTo: function() {
  988.                         shape.push({
  989.                             name: "arcTo",
  990.                             'arguments': arguments
  991.                         });
  992.                     },
  993.                     bezierCurveTo: function() {
  994.                         shape.push({
  995.                             name: "bezierCurveTo",
  996.                             'arguments': arguments
  997.                         });
  998.                     },
  999.                     quadraticCurveTo: function() {
  1000.                         shape.push({
  1001.                             name: "quadraticCurveTo",
  1002.                             'arguments': arguments
  1003.                         });
  1004.                     }
  1005.                 };
  1006.  
  1007.             },
  1008.             drawImage: function () {
  1009.                 storage.push({
  1010.                     type: "function",
  1011.                     name: "drawImage",
  1012.                     'arguments': arguments
  1013.                 });
  1014.             },
  1015.             fillText: function () {
  1016.                 storage.push({
  1017.                     type: "function",
  1018.                     name: "fillText",
  1019.                     'arguments': arguments
  1020.                 });
  1021.             },
  1022.             setVariable: function (variable, value) {
  1023.                 storage.push({
  1024.                     type: "variable",
  1025.                     name: variable,
  1026.                     'arguments': value
  1027.                 });
  1028.                 return value;
  1029.             }
  1030.         };
  1031.     }
  1032.     _html2canvas.Parse = function (images, options) {
  1033.         window.scroll(0,0);
  1034.  
  1035.         var element = (( options.elements === undefined ) ? document.body : options.elements[0]), // select body by default
  1036.             numDraws = 0,
  1037.             doc = element.ownerDocument,
  1038.             Util = _html2canvas.Util,
  1039.             support = Util.Support(options, doc),
  1040.             ignoreElementsRegExp = new RegExp("(" + options.ignoreElements + ")"),
  1041.             body = doc.body,
  1042.             getCSS = Util.getCSS,
  1043.             pseudoHide = "___html2canvas___pseudoelement",
  1044.             hidePseudoElements = doc.createElement('style');
  1045.  
  1046.         hidePseudoElements.innerHTML = '.' + pseudoHide + '-before:before { content: "" !important; display: none !important; }' +
  1047.             '.' + pseudoHide + '-after:after { content: "" !important; display: none !important; }';
  1048.  
  1049.         body.appendChild(hidePseudoElements);
  1050.  
  1051.         images = images || {};
  1052.  
  1053.         function documentWidth () {
  1054.             return Math.max(
  1055.                 Math.max(doc.body.scrollWidth, doc.documentElement.scrollWidth),
  1056.                 Math.max(doc.body.offsetWidth, doc.documentElement.offsetWidth),
  1057.                 Math.max(doc.body.clientWidth, doc.documentElement.clientWidth)
  1058.             );
  1059.         }
  1060.  
  1061.         function documentHeight () {
  1062.             return Math.max(
  1063.                 Math.max(doc.body.scrollHeight, doc.documentElement.scrollHeight),
  1064.                 Math.max(doc.body.offsetHeight, doc.documentElement.offsetHeight),
  1065.                 Math.max(doc.body.clientHeight, doc.documentElement.clientHeight)
  1066.             );
  1067.         }
  1068.  
  1069.         function getCSSInt(element, attribute) {
  1070.             var val = parseInt(getCSS(element, attribute), 10);
  1071.             return (isNaN(val)) ? 0 : val; // borders in old IE are throwing 'medium' for demo.html
  1072.         }
  1073.  
  1074.         function renderRect (ctx, x, y, w, h, bgcolor) {
  1075.             if (bgcolor !== "transparent"){
  1076.                 ctx.setVariable("fillStyle", bgcolor);
  1077.                 ctx.fillRect(x, y, w, h);
  1078.                 numDraws+=1;
  1079.             }
  1080.         }
  1081.  
  1082.         function capitalize(m, p1, p2) {
  1083.             if (m.length > 0) {
  1084.                 return p1 + p2.toUpperCase();
  1085.             }
  1086.         }
  1087.  
  1088.         function textTransform (text, transform) {
  1089.             switch(transform){
  1090.                 case "lowercase":
  1091.                     return text.toLowerCase();
  1092.                 case "capitalize":
  1093.                     return text.replace( /(^|\s|:|-|\(|\))([a-z])/g, capitalize);
  1094.                 case "uppercase":
  1095.                     return text.toUpperCase();
  1096.                 default:
  1097.                     return text;
  1098.             }
  1099.         }
  1100.  
  1101.         function noLetterSpacing(letter_spacing) {
  1102.             return (/^(normal|none|0px)$/.test(letter_spacing));
  1103.         }
  1104.  
  1105.         function drawText(currentText, x, y, ctx){
  1106.             if (currentText !== null && Util.trimText(currentText).length > 0) {
  1107.                 ctx.fillText(currentText, x, y);
  1108.                 numDraws+=1;
  1109.             }
  1110.         }
  1111.  
  1112.         function setTextVariables(ctx, el, text_decoration, color) {
  1113.             var align = false,
  1114.                 bold = getCSS(el, "fontWeight"),
  1115.                 family = getCSS(el, "fontFamily"),
  1116.                 size = getCSS(el, "fontSize"),
  1117.                 shadows = Util.parseTextShadows(getCSS(el, "textShadow"));
  1118.  
  1119.             switch(parseInt(bold, 10)){
  1120.                 case 401:
  1121.                     bold = "bold";
  1122.                     break;
  1123.                 case 400:
  1124.                     bold = "normal";
  1125.                     break;
  1126.             }
  1127.  
  1128.             ctx.setVariable("fillStyle", color);
  1129.             ctx.setVariable("font", [getCSS(el, "fontStyle"), getCSS(el, "fontVariant"), bold, size, family].join(" "));
  1130.             ctx.setVariable("textAlign", (align) ? "right" : "left");
  1131.  
  1132.             if (shadows.length) {
  1133.                 // TODO: support multiple text shadows
  1134.                 // apply the first text shadow
  1135.                 ctx.setVariable("shadowColor", shadows[0].color);
  1136.                 ctx.setVariable("shadowOffsetX", shadows[0].offsetX);
  1137.                 ctx.setVariable("shadowOffsetY", shadows[0].offsetY);
  1138.                 ctx.setVariable("shadowBlur", shadows[0].blur);
  1139.             }
  1140.  
  1141.             if (text_decoration !== "none"){
  1142.                 return Util.Font(family, size, doc);
  1143.             }
  1144.         }
  1145.  
  1146.         function renderTextDecoration(ctx, text_decoration, bounds, metrics, color) {
  1147.             switch(text_decoration) {
  1148.                 case "underline":
  1149.                     // Draws a line at the baseline of the font
  1150.                     // 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
  1151.                     renderRect(ctx, bounds.left, Math.round(bounds.top + metrics.baseline + metrics.lineWidth), bounds.width, 1, color);
  1152.                     break;
  1153.                 case "overline":
  1154.                     renderRect(ctx, bounds.left, Math.round(bounds.top), bounds.width, 1, color);
  1155.                     break;
  1156.                 case "line-through":
  1157.                     // TODO try and find exact position for line-through
  1158.                     renderRect(ctx, bounds.left, Math.ceil(bounds.top + metrics.middle + metrics.lineWidth), bounds.width, 1, color);
  1159.                     break;
  1160.             }
  1161.         }
  1162.  
  1163.         function getTextBounds(state, text, textDecoration, isLast, transform) {
  1164.             var bounds;
  1165.             if (support.rangeBounds && !transform) {
  1166.                 if (textDecoration !== "none" || Util.trimText(text).length !== 0) {
  1167.                     bounds = textRangeBounds(text, state.node, state.textOffset);
  1168.                 }
  1169.                 state.textOffset += text.length;
  1170.             } else if (state.node && typeof state.node.nodeValue === "string" ){
  1171.                 var newTextNode = (isLast) ? state.node.splitText(text.length) : null;
  1172.                 bounds = textWrapperBounds(state.node, transform);
  1173.                 state.node = newTextNode;
  1174.             }
  1175.             return bounds;
  1176.         }
  1177.  
  1178.         function textRangeBounds(text, textNode, textOffset) {
  1179.             var range = doc.createRange();
  1180.             range.setStart(textNode, textOffset);
  1181.             range.setEnd(textNode, textOffset + text.length);
  1182.             return range.getBoundingClientRect();
  1183.         }
  1184.  
  1185.         function textWrapperBounds(oldTextNode, transform) {
  1186.             var parent = oldTextNode.parentNode,
  1187.                 wrapElement = doc.createElement('wrapper'),
  1188.                 backupText = oldTextNode.cloneNode(true);
  1189.  
  1190.             wrapElement.appendChild(oldTextNode.cloneNode(true));
  1191.             parent.replaceChild(wrapElement, oldTextNode);
  1192.  
  1193.             var bounds = transform ? Util.OffsetBounds(wrapElement) : Util.Bounds(wrapElement);
  1194.             parent.replaceChild(backupText, wrapElement);
  1195.             return bounds;
  1196.         }
  1197.  
  1198.         function renderText(el, textNode, stack) {
  1199.             var ctx = stack.ctx,
  1200.                 color = getCSS(el, "color"),
  1201.                 textDecoration = getCSS(el, "textDecoration"),
  1202.                 textAlign = getCSS(el, "textAlign"),
  1203.                 metrics,
  1204.                 textList,
  1205.                 state = {
  1206.                     node: textNode,
  1207.                     textOffset: 0
  1208.                 };
  1209.  
  1210.             if (Util.trimText(textNode.nodeValue).length > 0) {
  1211.                 textNode.nodeValue = textTransform(textNode.nodeValue, getCSS(el, "textTransform"));
  1212.                 textAlign = textAlign.replace(["-webkit-auto"],["auto"]);
  1213.  
  1214.                 textList = (!options.letterRendering && /^(left|right|justify|auto)$/.test(textAlign) && noLetterSpacing(getCSS(el, "letterSpacing"))) ?
  1215.                     textNode.nodeValue.split(/(\b| )/)
  1216.                     : textNode.nodeValue.split("");
  1217.  
  1218.                 metrics = setTextVariables(ctx, el, textDecoration, color);
  1219.  
  1220.                 if (options.chinese) {
  1221.                     textList.forEach(function(word, index) {
  1222.                         if (/.*[\u4E00-\u9FA5].*$/.test(word)) {
  1223.                             word = word.split("");
  1224.                             word.unshift(index, 1);
  1225.                             textList.splice.apply(textList, word);
  1226.                         }
  1227.                     });
  1228.                 }
  1229.  
  1230.                 textList.forEach(function(text, index) {
  1231.                     var bounds = getTextBounds(state, text, textDecoration, (index < textList.length - 1), stack.transform.matrix);
  1232.                     if (bounds) {
  1233.                         drawText(text, bounds.left, bounds.bottom, ctx);
  1234.                         renderTextDecoration(ctx, textDecoration, bounds, metrics, color);
  1235.                     }
  1236.                 });
  1237.             }
  1238.         }
  1239.  
  1240.         function listPosition (element, val) {
  1241.             var boundElement = doc.createElement( "boundelement" ),
  1242.                 originalType,
  1243.                 bounds;
  1244.  
  1245.             boundElement.style.display = "inline";
  1246.  
  1247.             originalType = element.style.listStyleType;
  1248.             element.style.listStyleType = "none";
  1249.  
  1250.             boundElement.appendChild(doc.createTextNode(val));
  1251.  
  1252.             element.insertBefore(boundElement, element.firstChild);
  1253.  
  1254.             bounds = Util.Bounds(boundElement);
  1255.             element.removeChild(boundElement);
  1256.             element.style.listStyleType = originalType;
  1257.             return bounds;
  1258.         }
  1259.  
  1260.         function elementIndex(el) {
  1261.             var i = -1,
  1262.                 count = 1,
  1263.                 childs = el.parentNode.childNodes;
  1264.  
  1265.             if (el.parentNode) {
  1266.                 while(childs[++i] !== el) {
  1267.                     if (childs[i].nodeType === 1) {
  1268.                         count++;
  1269.                     }
  1270.                 }
  1271.                 return count;
  1272.             } else {
  1273.                 return -1;
  1274.             }
  1275.         }
  1276.  
  1277.         function listItemText(element, type) {
  1278.             var currentIndex = elementIndex(element), text;
  1279.             switch(type){
  1280.                 case "decimal":
  1281.                     text = currentIndex;
  1282.                     break;
  1283.                 case "decimal-leading-zero":
  1284.                     text = (currentIndex.toString().length === 1) ? currentIndex = "0" + currentIndex.toString() : currentIndex.toString();
  1285.                     break;
  1286.                 case "upper-roman":
  1287.                     text = _html2canvas.Generate.ListRoman( currentIndex );
  1288.                     break;
  1289.                 case "lower-roman":
  1290.                     text = _html2canvas.Generate.ListRoman( currentIndex ).toLowerCase();
  1291.                     break;
  1292.                 case "lower-alpha":
  1293.                     text = _html2canvas.Generate.ListAlpha( currentIndex ).toLowerCase();
  1294.                     break;
  1295.                 case "upper-alpha":
  1296.                     text = _html2canvas.Generate.ListAlpha( currentIndex );
  1297.                     break;
  1298.             }
  1299.  
  1300.             return text + ". ";
  1301.         }
  1302.  
  1303.         function renderListItem(element, stack, elBounds) {
  1304.             var x,
  1305.                 text,
  1306.                 ctx = stack.ctx,
  1307.                 type = getCSS(element, "listStyleType"),
  1308.                 listBounds;
  1309.  
  1310.             if (/^(decimal|decimal-leading-zero|upper-alpha|upper-latin|upper-roman|lower-alpha|lower-greek|lower-latin|lower-roman)$/i.test(type)) {
  1311.                 text = listItemText(element, type);
  1312.                 listBounds = listPosition(element, text);
  1313.                 setTextVariables(ctx, element, "none", getCSS(element, "color"));
  1314.  
  1315.                 if (getCSS(element, "listStylePosition") === "inside") {
  1316.                     ctx.setVariable("textAlign", "left");
  1317.                     x = elBounds.left;
  1318.                 } else {
  1319.                     return;
  1320.                 }
  1321.  
  1322.                 drawText(text, x, listBounds.bottom, ctx);
  1323.             }
  1324.         }
  1325.  
  1326.         function loadImage (src){
  1327.             var img = images[src];
  1328.             return (img && img.succeeded === true) ? img.img : false;
  1329.         }
  1330.  
  1331.         function clipBounds(src, dst){
  1332.             var x = Math.max(src.left, dst.left),
  1333.                 y = Math.max(src.top, dst.top),
  1334.                 x2 = Math.min((src.left + src.width), (dst.left + dst.width)),
  1335.                 y2 = Math.min((src.top + src.height), (dst.top + dst.height));
  1336.  
  1337.             return {
  1338.                 left:x,
  1339.                 top:y,
  1340.                 width:x2-x,
  1341.                 height:y2-y
  1342.             };
  1343.         }
  1344.  
  1345.         function setZ(element, stack, parentStack){
  1346.             var newContext,
  1347.                 isPositioned = stack.cssPosition !== 'static',
  1348.                 zIndex = isPositioned ? getCSS(element, 'zIndex') : 'auto',
  1349.                 opacity = getCSS(element, 'opacity'),
  1350.                 isFloated = getCSS(element, 'cssFloat') !== 'none';
  1351.  
  1352.             // https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context
  1353.             // When a new stacking context should be created:
  1354.             // the root element (HTML),
  1355.             // positioned (absolutely or relatively) with a z-index value other than "auto",
  1356.             // elements with an opacity value less than 1. (See the specification for opacity),
  1357.             // on mobile WebKit and Chrome 22+, position: fixed always creates a new stacking context, even when z-index is "auto" (See this post)
  1358.  
  1359.             stack.zIndex = newContext = h2czContext(zIndex);
  1360.             newContext.isPositioned = isPositioned;
  1361.             newContext.isFloated = isFloated;
  1362.             newContext.opacity = opacity;
  1363.             newContext.ownStacking = (zIndex !== 'auto' || opacity < 1);
  1364.  
  1365.             if (parentStack) {
  1366.                 parentStack.zIndex.children.push(stack);
  1367.             }
  1368.         }
  1369.  
  1370.         function renderImage(ctx, element, image, bounds, borders) {
  1371.  
  1372.             var paddingLeft = getCSSInt(element, 'paddingLeft'),
  1373.                 paddingTop = getCSSInt(element, 'paddingTop'),
  1374.                 paddingRight = getCSSInt(element, 'paddingRight'),
  1375.                 paddingBottom = getCSSInt(element, 'paddingBottom');
  1376.  
  1377.             drawImage(
  1378.                 ctx,
  1379.                 image,
  1380.                 0, //sx
  1381.                 0, //sy
  1382.                 image.width, //sw
  1383.                 image.height, //sh
  1384.                 bounds.left + paddingLeft + borders[3].width, //dx
  1385.                 bounds.top + paddingTop + borders[0].width, // dy
  1386.                 bounds.width - (borders[1].width + borders[3].width + paddingLeft + paddingRight), //dw
  1387.                 bounds.height - (borders[0].width + borders[2].width + paddingTop + paddingBottom) //dh
  1388.             );
  1389.         }
  1390.  
  1391.         function getBorderData(element) {
  1392.             return ["Top", "Right", "Bottom", "Left"].map(function(side) {
  1393.                 return {
  1394.                     width: getCSSInt(element, 'border' + side + 'Width'),
  1395.                     color: getCSS(element, 'border' + side + 'Color')
  1396.                 };
  1397.             });
  1398.         }
  1399.  
  1400.         function getBorderRadiusData(element) {
  1401.             return ["TopLeft", "TopRight", "BottomRight", "BottomLeft"].map(function(side) {
  1402.                 return getCSS(element, 'border' + side + 'Radius');
  1403.             });
  1404.         }
  1405.  
  1406.         var getCurvePoints = (function(kappa) {
  1407.  
  1408.             return function(x, y, r1, r2) {
  1409.                 var ox = (r1) * kappa, // control point offset horizontal
  1410.                     oy = (r2) * kappa, // control point offset vertical
  1411.                     xm = x + r1, // x-middle
  1412.                     ym = y + r2; // y-middle
  1413.                 return {
  1414.                     topLeft: bezierCurve({
  1415.                         x:x,
  1416.                         y:ym
  1417.                     }, {
  1418.                         x:x,
  1419.                         y:ym - oy
  1420.                     }, {
  1421.                         x:xm - ox,
  1422.                         y:y
  1423.                     }, {
  1424.                         x:xm,
  1425.                         y:y
  1426.                     }),
  1427.                     topRight: bezierCurve({
  1428.                         x:x,
  1429.                         y:y
  1430.                     }, {
  1431.                         x:x + ox,
  1432.                         y:y
  1433.                     }, {
  1434.                         x:xm,
  1435.                         y:ym - oy
  1436.                     }, {
  1437.                         x:xm,
  1438.                         y:ym
  1439.                     }),
  1440.                     bottomRight: bezierCurve({
  1441.                         x:xm,
  1442.                         y:y
  1443.                     }, {
  1444.                         x:xm,
  1445.                         y:y + oy
  1446.                     }, {
  1447.                         x:x + ox,
  1448.                         y:ym
  1449.                     }, {
  1450.                         x:x,
  1451.                         y:ym
  1452.                     }),
  1453.                     bottomLeft: bezierCurve({
  1454.                         x:xm,
  1455.                         y:ym
  1456.                     }, {
  1457.                         x:xm - ox,
  1458.                         y:ym
  1459.                     }, {
  1460.                         x:x,
  1461.                         y:y + oy
  1462.                     }, {
  1463.                         x:x,
  1464.                         y:y
  1465.                     })
  1466.                 };
  1467.             };
  1468.         })(4 * ((Math.sqrt(2) - 1) / 3));
  1469.  
  1470.         function bezierCurve(start, startControl, endControl, end) {
  1471.  
  1472.             var lerp = function (a, b, t) {
  1473.                 return {
  1474.                     x:a.x + (b.x - a.x) * t,
  1475.                     y:a.y + (b.y - a.y) * t
  1476.                 };
  1477.             };
  1478.  
  1479.             return {
  1480.                 start: start,
  1481.                 startControl: startControl,
  1482.                 endControl: endControl,
  1483.                 end: end,
  1484.                 subdivide: function(t) {
  1485.                     var ab = lerp(start, startControl, t),
  1486.                         bc = lerp(startControl, endControl, t),
  1487.                         cd = lerp(endControl, end, t),
  1488.                         abbc = lerp(ab, bc, t),
  1489.                         bccd = lerp(bc, cd, t),
  1490.                         dest = lerp(abbc, bccd, t);
  1491.                     return [bezierCurve(start, ab, abbc, dest), bezierCurve(dest, bccd, cd, end)];
  1492.                 },
  1493.                 curveTo: function(borderArgs) {
  1494.                     borderArgs.push(["bezierCurve", startControl.x, startControl.y, endControl.x, endControl.y, end.x, end.y]);
  1495.                 },
  1496.                 curveToReversed: function(borderArgs) {
  1497.                     borderArgs.push(["bezierCurve", endControl.x, endControl.y, startControl.x, startControl.y, start.x, start.y]);
  1498.                 }
  1499.             };
  1500.         }
  1501.  
  1502.         function parseCorner(borderArgs, radius1, radius2, corner1, corner2, x, y) {
  1503.             if (radius1[0] > 0 || radius1[1] > 0) {
  1504.                 borderArgs.push(["line", corner1[0].start.x, corner1[0].start.y]);
  1505.                 corner1[0].curveTo(borderArgs);
  1506.                 corner1[1].curveTo(borderArgs);
  1507.             } else {
  1508.                 borderArgs.push(["line", x, y]);
  1509.             }
  1510.  
  1511.             if (radius2[0] > 0 || radius2[1] > 0) {
  1512.                 borderArgs.push(["line", corner2[0].start.x, corner2[0].start.y]);
  1513.             }
  1514.         }
  1515.  
  1516.         function drawSide(borderData, radius1, radius2, outer1, inner1, outer2, inner2) {
  1517.             var borderArgs = [];
  1518.  
  1519.             if (radius1[0] > 0 || radius1[1] > 0) {
  1520.                 borderArgs.push(["line", outer1[1].start.x, outer1[1].start.y]);
  1521.                 outer1[1].curveTo(borderArgs);
  1522.             } else {
  1523.                 borderArgs.push([ "line", borderData.c1[0], borderData.c1[1]]);
  1524.             }
  1525.  
  1526.             if (radius2[0] > 0 || radius2[1] > 0) {
  1527.                 borderArgs.push(["line", outer2[0].start.x, outer2[0].start.y]);
  1528.                 outer2[0].curveTo(borderArgs);
  1529.                 borderArgs.push(["line", inner2[0].end.x, inner2[0].end.y]);
  1530.                 inner2[0].curveToReversed(borderArgs);
  1531.             } else {
  1532.                 borderArgs.push([ "line", borderData.c2[0], borderData.c2[1]]);
  1533.                 borderArgs.push([ "line", borderData.c3[0], borderData.c3[1]]);
  1534.             }
  1535.  
  1536.             if (radius1[0] > 0 || radius1[1] > 0) {
  1537.                 borderArgs.push(["line", inner1[1].end.x, inner1[1].end.y]);
  1538.                 inner1[1].curveToReversed(borderArgs);
  1539.             } else {
  1540.                 borderArgs.push([ "line", borderData.c4[0], borderData.c4[1]]);
  1541.             }
  1542.  
  1543.             return borderArgs;
  1544.         }
  1545.  
  1546.         function calculateCurvePoints(bounds, borderRadius, borders) {
  1547.  
  1548.             var x = bounds.left,
  1549.                 y = bounds.top,
  1550.                 width = bounds.width,
  1551.                 height = bounds.height,
  1552.  
  1553.                 tlh = borderRadius[0][0],
  1554.                 tlv = borderRadius[0][1],
  1555.                 trh = borderRadius[1][0],
  1556.                 trv = borderRadius[1][1],
  1557.                 brh = borderRadius[2][0],
  1558.                 brv = borderRadius[2][1],
  1559.                 blh = borderRadius[3][0],
  1560.                 blv = borderRadius[3][1],
  1561.  
  1562.                 topWidth = width - trh,
  1563.                 rightHeight = height - brv,
  1564.                 bottomWidth = width - brh,
  1565.                 leftHeight = height - blv;
  1566.  
  1567.             return {
  1568.                 topLeftOuter: getCurvePoints(
  1569.                     x,
  1570.                     y,
  1571.                     tlh,
  1572.                     tlv
  1573.                 ).topLeft.subdivide(0.5),
  1574.  
  1575.                 topLeftInner: getCurvePoints(
  1576.                     x + borders[3].width,
  1577.                     y + borders[0].width,
  1578.                     Math.max(0, tlh - borders[3].width),
  1579.                     Math.max(0, tlv - borders[0].width)
  1580.                 ).topLeft.subdivide(0.5),
  1581.  
  1582.                 topRightOuter: getCurvePoints(
  1583.                     x + topWidth,
  1584.                     y,
  1585.                     trh,
  1586.                     trv
  1587.                 ).topRight.subdivide(0.5),
  1588.  
  1589.                 topRightInner: getCurvePoints(
  1590.                     x + Math.min(topWidth, width + borders[3].width),
  1591.                     y + borders[0].width,
  1592.                     (topWidth > width + borders[3].width) ? 0 :trh - borders[3].width,
  1593.                     trv - borders[0].width
  1594.                 ).topRight.subdivide(0.5),
  1595.  
  1596.                 bottomRightOuter: getCurvePoints(
  1597.                     x + bottomWidth,
  1598.                     y + rightHeight,
  1599.                     brh,
  1600.                     brv
  1601.                 ).bottomRight.subdivide(0.5),
  1602.  
  1603.                 bottomRightInner: getCurvePoints(
  1604.                     x + Math.min(bottomWidth, width + borders[3].width),
  1605.                     y + Math.min(rightHeight, height + borders[0].width),
  1606.                     Math.max(0, brh - borders[1].width),
  1607.                     Math.max(0, brv - borders[2].width)
  1608.                 ).bottomRight.subdivide(0.5),
  1609.  
  1610.                 bottomLeftOuter: getCurvePoints(
  1611.                     x,
  1612.                     y + leftHeight,
  1613.                     blh,
  1614.                     blv
  1615.                 ).bottomLeft.subdivide(0.5),
  1616.  
  1617.                 bottomLeftInner: getCurvePoints(
  1618.                     x + borders[3].width,
  1619.                     y + leftHeight,
  1620.                     Math.max(0, blh - borders[3].width),
  1621.                     Math.max(0, blv - borders[2].width)
  1622.                 ).bottomLeft.subdivide(0.5)
  1623.             };
  1624.         }
  1625.  
  1626.         function getBorderClip(element, borderPoints, borders, radius, bounds) {
  1627.             var backgroundClip = getCSS(element, 'backgroundClip'),
  1628.                 borderArgs = [];
  1629.  
  1630.             switch(backgroundClip) {
  1631.                 case "content-box":
  1632.                 case "padding-box":
  1633.                     parseCorner(borderArgs, radius[0], radius[1], borderPoints.topLeftInner, borderPoints.topRightInner, bounds.left + borders[3].width, bounds.top + borders[0].width);
  1634.                     parseCorner(borderArgs, radius[1], radius[2], borderPoints.topRightInner, borderPoints.bottomRightInner, bounds.left + bounds.width - borders[1].width, bounds.top + borders[0].width);
  1635.                     parseCorner(borderArgs, radius[2], radius[3], borderPoints.bottomRightInner, borderPoints.bottomLeftInner, bounds.left + bounds.width - borders[1].width, bounds.top + bounds.height - borders[2].width);
  1636.                     parseCorner(borderArgs, radius[3], radius[0], borderPoints.bottomLeftInner, borderPoints.topLeftInner, bounds.left + borders[3].width, bounds.top + bounds.height - borders[2].width);
  1637.                     break;
  1638.  
  1639.                 default:
  1640.                     parseCorner(borderArgs, radius[0], radius[1], borderPoints.topLeftOuter, borderPoints.topRightOuter, bounds.left, bounds.top);
  1641.                     parseCorner(borderArgs, radius[1], radius[2], borderPoints.topRightOuter, borderPoints.bottomRightOuter, bounds.left + bounds.width, bounds.top);
  1642.                     parseCorner(borderArgs, radius[2], radius[3], borderPoints.bottomRightOuter, borderPoints.bottomLeftOuter, bounds.left + bounds.width, bounds.top + bounds.height);
  1643.                     parseCorner(borderArgs, radius[3], radius[0], borderPoints.bottomLeftOuter, borderPoints.topLeftOuter, bounds.left, bounds.top + bounds.height);
  1644.                     break;
  1645.             }
  1646.  
  1647.             return borderArgs;
  1648.         }
  1649.  
  1650.         function parseBorders(element, bounds, borders){
  1651.             var x = bounds.left,
  1652.                 y = bounds.top,
  1653.                 width = bounds.width,
  1654.                 height = bounds.height,
  1655.                 borderSide,
  1656.                 bx,
  1657.                 by,
  1658.                 bw,
  1659.                 bh,
  1660.                 borderArgs,
  1661.             // http://www.w3.org/TR/css3-background/#the-border-radius
  1662.                 borderRadius = getBorderRadiusData(element),
  1663.                 borderPoints = calculateCurvePoints(bounds, borderRadius, borders),
  1664.                 borderData = {
  1665.                     clip: getBorderClip(element, borderPoints, borders, borderRadius, bounds),
  1666.                     borders: []
  1667.                 };
  1668.  
  1669.             for (borderSide = 0; borderSide < 4; borderSide++) {
  1670.  
  1671.                 if (borders[borderSide].width > 0) {
  1672.                     bx = x;
  1673.                     by = y;
  1674.                     bw = width;
  1675.                     bh = height - (borders[2].width);
  1676.  
  1677.                     switch(borderSide) {
  1678.                         case 0:
  1679.                             // top border
  1680.                             bh = borders[0].width;
  1681.  
  1682.                             borderArgs = drawSide({
  1683.                                     c1: [bx, by],
  1684.                                     c2: [bx + bw, by],
  1685.                                     c3: [bx + bw - borders[1].width, by + bh],
  1686.                                     c4: [bx + borders[3].width, by + bh]
  1687.                                 }, borderRadius[0], borderRadius[1],
  1688.                                 borderPoints.topLeftOuter, borderPoints.topLeftInner, borderPoints.topRightOuter, borderPoints.topRightInner);
  1689.                             break;
  1690.                         case 1:
  1691.                             // right border
  1692.                             bx = x + width - (borders[1].width);
  1693.                             bw = borders[1].width;
  1694.  
  1695.                             borderArgs = drawSide({
  1696.                                     c1: [bx + bw, by],
  1697.                                     c2: [bx + bw, by + bh + borders[2].width],
  1698.                                     c3: [bx, by + bh],
  1699.                                     c4: [bx, by + borders[0].width]
  1700.                                 }, borderRadius[1], borderRadius[2],
  1701.                                 borderPoints.topRightOuter, borderPoints.topRightInner, borderPoints.bottomRightOuter, borderPoints.bottomRightInner);
  1702.                             break;
  1703.                         case 2:
  1704.                             // bottom border
  1705.                             by = (by + height) - (borders[2].width);
  1706.                             bh = borders[2].width;
  1707.  
  1708.                             borderArgs = drawSide({
  1709.                                     c1: [bx + bw, by + bh],
  1710.                                     c2: [bx, by + bh],
  1711.                                     c3: [bx + borders[3].width, by],
  1712.                                     c4: [bx + bw - borders[3].width, by]
  1713.                                 }, borderRadius[2], borderRadius[3],
  1714.                                 borderPoints.bottomRightOuter, borderPoints.bottomRightInner, borderPoints.bottomLeftOuter, borderPoints.bottomLeftInner);
  1715.                             break;
  1716.                         case 3:
  1717.                             // left border
  1718.                             bw = borders[3].width;
  1719.  
  1720.                             borderArgs = drawSide({
  1721.                                     c1: [bx, by + bh + borders[2].width],
  1722.                                     c2: [bx, by],
  1723.                                     c3: [bx + bw, by + borders[0].width],
  1724.                                     c4: [bx + bw, by + bh]
  1725.                                 }, borderRadius[3], borderRadius[0],
  1726.                                 borderPoints.bottomLeftOuter, borderPoints.bottomLeftInner, borderPoints.topLeftOuter, borderPoints.topLeftInner);
  1727.                             break;
  1728.                     }
  1729.  
  1730.                     borderData.borders.push({
  1731.                         args: borderArgs,
  1732.                         color: borders[borderSide].color
  1733.                     });
  1734.  
  1735.                 }
  1736.             }
  1737.  
  1738.             return borderData;
  1739.         }
  1740.  
  1741.         function createShape(ctx, args) {
  1742.             var shape = ctx.drawShape();
  1743.             args.forEach(function(border, index) {
  1744.                 shape[(index === 0) ? "moveTo" : border[0] + "To" ].apply(null, border.slice(1));
  1745.             });
  1746.             return shape;
  1747.         }
  1748.  
  1749.         function renderBorders(ctx, borderArgs, color) {
  1750.             if (color !== "transparent") {
  1751.                 ctx.setVariable( "fillStyle", color);
  1752.                 createShape(ctx, borderArgs);
  1753.                 ctx.fill();
  1754.                 numDraws+=1;
  1755.             }
  1756.         }
  1757.  
  1758.         function renderFormValue (el, bounds, stack){
  1759.  
  1760.             var valueWrap = doc.createElement('valuewrap'),
  1761.                 cssPropertyArray = ['lineHeight','textAlign','fontFamily','color','fontSize','paddingLeft','paddingTop','width','height','border','borderLeftWidth','borderTopWidth'],
  1762.                 textValue,
  1763.                 textNode;
  1764.  
  1765.             cssPropertyArray.forEach(function(property) {
  1766.                 try {
  1767.                     valueWrap.style[property] = getCSS(el, property);
  1768.                 } catch(e) {
  1769.                     // Older IE has issues with "border"
  1770.                     Util.log("html2canvas: Parse: Exception caught in renderFormValue: " + e.message);
  1771.                 }
  1772.             });
  1773.  
  1774.             valueWrap.style.borderColor = "black";
  1775.             valueWrap.style.borderStyle = "solid";
  1776.             valueWrap.style.display = "block";
  1777.             valueWrap.style.position = "absolute";
  1778.  
  1779.             if (/^(submit|reset|button|text|password)$/.test(el.type) || el.nodeName === "SELECT"){
  1780.                 valueWrap.style.lineHeight = getCSS(el, "height");
  1781.             }
  1782.  
  1783.             valueWrap.style.top = bounds.top + "px";
  1784.             valueWrap.style.left = bounds.left + "px";
  1785.  
  1786.             textValue = (el.nodeName === "SELECT") ? (el.options[el.selectedIndex] || 0).text : el.value;
  1787.             if(!textValue) {
  1788.                 textValue = el.placeholder;
  1789.             }
  1790.  
  1791.             textNode = doc.createTextNode(textValue);
  1792.  
  1793.             valueWrap.appendChild(textNode);
  1794.             body.appendChild(valueWrap);
  1795.  
  1796.             renderText(el, textNode, stack);
  1797.             body.removeChild(valueWrap);
  1798.         }
  1799.  
  1800.         function drawImage (ctx) {
  1801.             ctx.drawImage.apply(ctx, Array.prototype.slice.call(arguments, 1));
  1802.             numDraws+=1;
  1803.         }
  1804.  
  1805.         function getPseudoElement(el, which) {
  1806.             var elStyle = window.getComputedStyle(el, which);
  1807.             if(!elStyle || !elStyle.content || elStyle.content === "none" || elStyle.content === "-moz-alt-content" || elStyle.display === "none") {
  1808.                 return;
  1809.             }
  1810.             var content = elStyle.content + '',
  1811.                 first = content.substr( 0, 1 );
  1812.             //strips quotes
  1813.             if(first === content.substr( content.length - 1 ) && first.match(/'|"/)) {
  1814.                 content = content.substr( 1, content.length - 2 );
  1815.             }
  1816.  
  1817.             var isImage = content.substr( 0, 3 ) === 'url',
  1818.                 elps = document.createElement( isImage ? 'img' : 'span' );
  1819.  
  1820.             elps.className = pseudoHide + "-before " + pseudoHide + "-after";
  1821.  
  1822.             Object.keys(elStyle).filter(indexedProperty).forEach(function(prop) {
  1823.                 // Prevent assigning of read only CSS Rules, ex. length, parentRule
  1824.                 try {
  1825.                     elps.style[prop] = elStyle[prop];
  1826.                 } catch (e) {
  1827.                     Util.log(['Tried to assign readonly property ', prop, 'Error:', e]);
  1828.                 }
  1829.             });
  1830.  
  1831.             if(isImage) {
  1832.                 elps.src = Util.parseBackgroundImage(content)[0].args[0];
  1833.             } else {
  1834.                 elps.innerHTML = content;
  1835.             }
  1836.             return elps;
  1837.         }
  1838.  
  1839.         function indexedProperty(property) {
  1840.             return (isNaN(window.parseInt(property, 10)));
  1841.         }
  1842.  
  1843.         function injectPseudoElements(el, stack) {
  1844.             var before = getPseudoElement(el, ':before'),
  1845.                 after = getPseudoElement(el, ':after');
  1846.             if(!before && !after) {
  1847.                 return;
  1848.             }
  1849.  
  1850.             if(before) {
  1851.                 el.className += " " + pseudoHide + "-before";
  1852.                 el.parentNode.insertBefore(before, el);
  1853.                 parseElement(before, stack, true);
  1854.                 el.parentNode.removeChild(before);
  1855.                 el.className = el.className.replace(pseudoHide + "-before", "").trim();
  1856.             }
  1857.  
  1858.             if (after) {
  1859.                 el.className += " " + pseudoHide + "-after";
  1860.                 el.appendChild(after);
  1861.                 parseElement(after, stack, true);
  1862.                 el.removeChild(after);
  1863.                 el.className = el.className.replace(pseudoHide + "-after", "").trim();
  1864.             }
  1865.  
  1866.         }
  1867.  
  1868.         function renderBackgroundRepeat(ctx, image, backgroundPosition, bounds) {
  1869.             var offsetX = Math.round(bounds.left + backgroundPosition.left),
  1870.                 offsetY = Math.round(bounds.top + backgroundPosition.top);
  1871.  
  1872.             ctx.createPattern(image);
  1873.             ctx.translate(offsetX, offsetY);
  1874.             ctx.fill();
  1875.             ctx.translate(-offsetX, -offsetY);
  1876.         }
  1877.  
  1878.         function backgroundRepeatShape(ctx, image, backgroundPosition, bounds, left, top, width, height) {
  1879.             var args = [];
  1880.             args.push(["line", Math.round(left), Math.round(top)]);
  1881.             args.push(["line", Math.round(left + width), Math.round(top)]);
  1882.             args.push(["line", Math.round(left + width), Math.round(height + top)]);
  1883.             args.push(["line", Math.round(left), Math.round(height + top)]);
  1884.             createShape(ctx, args);
  1885.             ctx.save();
  1886.             ctx.clip();
  1887.             renderBackgroundRepeat(ctx, image, backgroundPosition, bounds);
  1888.             ctx.restore();
  1889.         }
  1890.  
  1891.         function renderBackgroundColor(ctx, backgroundBounds, bgcolor) {
  1892.             renderRect(
  1893.                 ctx,
  1894.                 backgroundBounds.left,
  1895.                 backgroundBounds.top,
  1896.                 backgroundBounds.width,
  1897.                 backgroundBounds.height,
  1898.                 bgcolor
  1899.             );
  1900.         }
  1901.  
  1902.         function renderBackgroundRepeating(el, bounds, ctx, image, imageIndex) {
  1903.             var backgroundSize = Util.BackgroundSize(el, bounds, image, imageIndex),
  1904.                 backgroundPosition = Util.BackgroundPosition(el, bounds, image, imageIndex, backgroundSize),
  1905.                 backgroundRepeat = getCSS(el, "backgroundRepeat").split(",").map(Util.trimText);
  1906.  
  1907.             image = resizeImage(image, backgroundSize);
  1908.  
  1909.             backgroundRepeat = backgroundRepeat[imageIndex] || backgroundRepeat[0];
  1910.  
  1911.             switch (backgroundRepeat) {
  1912.                 case "repeat-x":
  1913.                     backgroundRepeatShape(ctx, image, backgroundPosition, bounds,
  1914.                         bounds.left, bounds.top + backgroundPosition.top, 99999, image.height);
  1915.                     break;
  1916.  
  1917.                 case "repeat-y":
  1918.                     backgroundRepeatShape(ctx, image, backgroundPosition, bounds,
  1919.                         bounds.left + backgroundPosition.left, bounds.top, image.width, 99999);
  1920.                     break;
  1921.  
  1922.                 case "no-repeat":
  1923.                     backgroundRepeatShape(ctx, image, backgroundPosition, bounds,
  1924.                         bounds.left + backgroundPosition.left, bounds.top + backgroundPosition.top, image.width, image.height);
  1925.                     break;
  1926.  
  1927.                 default:
  1928.                     renderBackgroundRepeat(ctx, image, backgroundPosition, {
  1929.                         top: bounds.top,
  1930.                         left: bounds.left,
  1931.                         width: image.width,
  1932.                         height: image.height
  1933.                     });
  1934.                     break;
  1935.             }
  1936.         }
  1937.  
  1938.         function renderBackgroundImage(element, bounds, ctx) {
  1939.             var backgroundImage = getCSS(element, "backgroundImage"),
  1940.                 backgroundImages = Util.parseBackgroundImage(backgroundImage),
  1941.                 image,
  1942.                 imageIndex = backgroundImages.length;
  1943.  
  1944.             while(imageIndex--) {
  1945.                 backgroundImage = backgroundImages[imageIndex];
  1946.  
  1947.                 if (!backgroundImage.args || backgroundImage.args.length === 0) {
  1948.                     continue;
  1949.                 }
  1950.  
  1951.                 var key = backgroundImage.method === 'url' ?
  1952.                     backgroundImage.args[0] :
  1953.                     backgroundImage.value;
  1954.  
  1955.                 image = loadImage(key);
  1956.  
  1957.                 // TODO add support for background-origin
  1958.                 if (image) {
  1959.                     renderBackgroundRepeating(element, bounds, ctx, image, imageIndex);
  1960.                 } else {
  1961.                     Util.log("html2canvas: Error loading background:", backgroundImage);
  1962.                 }
  1963.             }
  1964.         }
  1965.  
  1966.         function resizeImage(image, bounds) {
  1967.             if(image.width === bounds.width && image.height === bounds.height) {
  1968.                 return image;
  1969.             }
  1970.  
  1971.             var ctx, canvas = doc.createElement('canvas');
  1972.             canvas.width = bounds.width;
  1973.             canvas.height = bounds.height;
  1974.             ctx = canvas.getContext("2d");
  1975.             drawImage(ctx, image, 0, 0, image.width, image.height, 0, 0, bounds.width, bounds.height );
  1976.             return canvas;
  1977.         }
  1978.  
  1979.         function setOpacity(ctx, element, parentStack) {
  1980.             return ctx.setVariable("globalAlpha", getCSS(element, "opacity") * ((parentStack) ? parentStack.opacity : 1));
  1981.         }
  1982.  
  1983.         function removePx(str) {
  1984.             return str.replace("px", "");
  1985.         }
  1986.  
  1987.         var transformRegExp = /(matrix)\((.+)\)/;
  1988.  
  1989.         function getTransform(element, parentStack) {
  1990.             var transform = getCSS(element, "transform") || getCSS(element, "-webkit-transform") || getCSS(element, "-moz-transform") || getCSS(element, "-ms-transform") || getCSS(element, "-o-transform");
  1991.             var transformOrigin = getCSS(element, "transform-origin") || getCSS(element, "-webkit-transform-origin") || getCSS(element, "-moz-transform-origin") || getCSS(element, "-ms-transform-origin") || getCSS(element, "-o-transform-origin") || "0px 0px";
  1992.  
  1993.             transformOrigin = transformOrigin.split(" ").map(removePx).map(Util.asFloat);
  1994.  
  1995.             var matrix;
  1996.             if (transform && transform !== "none") {
  1997.                 var match = transform.match(transformRegExp);
  1998.                 if (match) {
  1999.                     switch(match[1]) {
  2000.                         case "matrix":
  2001.                             matrix = match[2].split(",").map(Util.trimText).map(Util.asFloat);
  2002.                             break;
  2003.                     }
  2004.                 }
  2005.             }
  2006.  
  2007.             return {
  2008.                 origin: transformOrigin,
  2009.                 matrix: matrix
  2010.             };
  2011.         }
  2012.  
  2013.         function createStack(element, parentStack, bounds, transform) {
  2014.             var ctx = h2cRenderContext((!parentStack) ? documentWidth() : bounds.width , (!parentStack) ? documentHeight() : bounds.height),
  2015.                 stack = {
  2016.                     ctx: ctx,
  2017.                     opacity: setOpacity(ctx, element, parentStack),
  2018.                     cssPosition: getCSS(element, "position"),
  2019.                     borders: getBorderData(element),
  2020.                     transform: transform,
  2021.                     clip: (parentStack && parentStack.clip) ? Util.Extend( {}, parentStack.clip ) : null
  2022.                 };
  2023.  
  2024.             setZ(element, stack, parentStack);
  2025.  
  2026.             // TODO correct overflow for absolute content residing under a static position
  2027.             if (options.useOverflow === true && /(hidden|scroll|auto)/.test(getCSS(element, "overflow")) === true && /(BODY)/i.test(element.nodeName) === false){
  2028.                 stack.clip = (stack.clip) ? clipBounds(stack.clip, bounds) : bounds;
  2029.             }
  2030.  
  2031.             return stack;
  2032.         }
  2033.  
  2034.         function getBackgroundBounds(borders, bounds, clip) {
  2035.             var backgroundBounds = {
  2036.                 left: bounds.left + borders[3].width,
  2037.                 top: bounds.top + borders[0].width,
  2038.                 width: bounds.width - (borders[1].width + borders[3].width),
  2039.                 height: bounds.height - (borders[0].width + borders[2].width)
  2040.             };
  2041.  
  2042.             if (clip) {
  2043.                 backgroundBounds = clipBounds(backgroundBounds, clip);
  2044.             }
  2045.  
  2046.             return backgroundBounds;
  2047.         }
  2048.  
  2049.         function getBounds(element, transform) {
  2050.             var bounds = (transform.matrix) ? Util.OffsetBounds(element) : Util.Bounds(element);
  2051.             transform.origin[0] += bounds.left;
  2052.             transform.origin[1] += bounds.top;
  2053.             return bounds;
  2054.         }
  2055.  
  2056.         function renderElement(element, parentStack, pseudoElement, ignoreBackground) {
  2057.             var transform = getTransform(element, parentStack),
  2058.                 bounds = getBounds(element, transform),
  2059.                 image,
  2060.                 stack = createStack(element, parentStack, bounds, transform),
  2061.                 borders = stack.borders,
  2062.                 ctx = stack.ctx,
  2063.                 backgroundBounds = getBackgroundBounds(borders, bounds, stack.clip),
  2064.                 borderData = parseBorders(element, bounds, borders),
  2065.                 backgroundColor = (ignoreElementsRegExp.test(element.nodeName)) ? "#efefef" : getCSS(element, "backgroundColor");
  2066.  
  2067.  
  2068.             createShape(ctx, borderData.clip);
  2069.  
  2070.             ctx.save();
  2071.             ctx.clip();
  2072.  
  2073.             if (backgroundBounds.height > 0 && backgroundBounds.width > 0 && !ignoreBackground) {
  2074.                 renderBackgroundColor(ctx, bounds, backgroundColor);
  2075.                 renderBackgroundImage(element, backgroundBounds, ctx);
  2076.             } else if (ignoreBackground) {
  2077.                 stack.backgroundColor =  backgroundColor;
  2078.             }
  2079.  
  2080.             ctx.restore();
  2081.  
  2082.             borderData.borders.forEach(function(border) {
  2083.                 renderBorders(ctx, border.args, border.color);
  2084.             });
  2085.  
  2086.             if (!pseudoElement) {
  2087.                 injectPseudoElements(element, stack);
  2088.             }
  2089.  
  2090.             switch(element.nodeName){
  2091.                 case "IMG":
  2092.                     if ((image = loadImage(element.getAttribute('src')))) {
  2093.                         renderImage(ctx, element, image, bounds, borders);
  2094.                     } else {
  2095.                         Util.log("html2canvas: Error loading <img>:" + element.getAttribute('src'));
  2096.                     }
  2097.                     break;
  2098.                 case "INPUT":
  2099.                     // TODO add all relevant type's, i.e. HTML5 new stuff
  2100.                     // todo add support for placeholder attribute for browsers which support it
  2101.                     if (/^(text|url|email|submit|button|reset)$/.test(element.type) && (element.value || element.placeholder || "").length > 0){
  2102.                         renderFormValue(element, bounds, stack);
  2103.                     }
  2104.                     break;
  2105.                 case "TEXTAREA":
  2106.                     if ((element.value || element.placeholder || "").length > 0){
  2107.                         renderFormValue(element, bounds, stack);
  2108.                     }
  2109.                     break;
  2110.                 case "SELECT":
  2111.                     if ((element.options||element.placeholder || "").length > 0){
  2112.                         renderFormValue(element, bounds, stack);
  2113.                     }
  2114.                     break;
  2115.                 case "LI":
  2116.                     renderListItem(element, stack, backgroundBounds);
  2117.                     break;
  2118.                 case "CANVAS":
  2119.                     renderImage(ctx, element, element, bounds, borders);
  2120.                     break;
  2121.             }
  2122.  
  2123.             return stack;
  2124.         }
  2125.  
  2126.         function isElementVisible(element) {
  2127.             return (getCSS(element, 'display') !== "none" && getCSS(element, 'visibility') !== "hidden" && !element.hasAttribute("data-html2canvas-ignore"));
  2128.         }
  2129.  
  2130.         function parseElement (element, stack, pseudoElement) {
  2131.             if (isElementVisible(element)) {
  2132.                 stack = renderElement(element, stack, pseudoElement, false) || stack;
  2133.                 if (!ignoreElementsRegExp.test(element.nodeName)) {
  2134.                     parseChildren(element, stack, pseudoElement);
  2135.                 }
  2136.             }
  2137.         }
  2138.  
  2139.         function parseChildren(element, stack, pseudoElement) {
  2140.             Util.Children(element).forEach(function(node) {
  2141.                 if (node.nodeType === node.ELEMENT_NODE) {
  2142.                     parseElement(node, stack, pseudoElement);
  2143.                 } else if (node.nodeType === node.TEXT_NODE) {
  2144.                     renderText(element, node, stack);
  2145.                 }
  2146.             });
  2147.         }
  2148.  
  2149.         function init() {
  2150.             var background = getCSS(document.documentElement, "backgroundColor"),
  2151.                 transparentBackground = (Util.isTransparent(background) && element === document.body),
  2152.                 stack = renderElement(element, null, false, transparentBackground);
  2153.             parseChildren(element, stack);
  2154.  
  2155.             if (transparentBackground) {
  2156.                 background = stack.backgroundColor;
  2157.             }
  2158.  
  2159.             body.removeChild(hidePseudoElements);
  2160.             return {
  2161.                 backgroundColor: background,
  2162.                 stack: stack
  2163.             };
  2164.         }
  2165.  
  2166.         return init();
  2167.     };
  2168.  
  2169.     function h2czContext(zindex) {
  2170.         return {
  2171.             zindex: zindex,
  2172.             children: []
  2173.         };
  2174.     }
  2175.  
  2176.     _html2canvas.Preload = function( options ) {
  2177.  
  2178.         var images = {
  2179.                 numLoaded: 0,   // also failed are counted here
  2180.                 numFailed: 0,
  2181.                 numTotal: 0,
  2182.                 cleanupDone: false
  2183.             },
  2184.             pageOrigin,
  2185.             Util = _html2canvas.Util,
  2186.             methods,
  2187.             i,
  2188.             count = 0,
  2189.             element = options.elements[0] || document.body,
  2190.             doc = element.ownerDocument,
  2191.             domImages = element.getElementsByTagName('img'), // Fetch images of the present element only
  2192.             imgLen = domImages.length,
  2193.             link = doc.createElement("a"),
  2194.             supportCORS = (function( img ){
  2195.                 return (img.crossOrigin !== undefined);
  2196.             })(new Image()),
  2197.             timeoutTimer;
  2198.  
  2199.         link.href = window.location.href;
  2200.         pageOrigin  = link.protocol + link.host;
  2201.  
  2202.         function isSameOrigin(url){
  2203.             link.href = url;
  2204.             link.href = link.href; // YES, BELIEVE IT OR NOT, that is required for IE9 - http://jsfiddle.net/niklasvh/2e48b/
  2205.             var origin = link.protocol + link.host;
  2206.             return (origin === pageOrigin);
  2207.         }
  2208.  
  2209.         function start(){
  2210.             Util.log("html2canvas: start: images: " + images.numLoaded + " / " + images.numTotal + " (failed: " + images.numFailed + ")");
  2211.             if (!images.firstRun && images.numLoaded >= images.numTotal){
  2212.                 Util.log("Finished loading images: # " + images.numTotal + " (failed: " + images.numFailed + ")");
  2213.  
  2214.                 if (typeof options.complete === "function"){
  2215.                     options.complete(images);
  2216.                 }
  2217.  
  2218.             }
  2219.         }
  2220.  
  2221.         // TODO modify proxy to serve images with CORS enabled, where available
  2222.         function proxyGetImage(url, img, imageObj){
  2223.             var callback_name,
  2224.                 scriptUrl = options.proxy,
  2225.                 script;
  2226.  
  2227.             link.href = url;
  2228.             url = link.href; // work around for pages with base href="" set - WARNING: this may change the url
  2229.  
  2230.             callback_name = 'html2canvas_' + (count++);
  2231.             imageObj.callbackname = callback_name;
  2232.  
  2233.             if (scriptUrl.indexOf("?") > -1) {
  2234.                 scriptUrl += "&";
  2235.             } else {
  2236.                 scriptUrl += "?";
  2237.             }
  2238.             scriptUrl += 'url=' + encodeURIComponent(url) + '&callback=' + callback_name;
  2239.             script = doc.createElement("script");
  2240.  
  2241.             window[callback_name] = function(a){
  2242.                 if (a.substring(0,6) === "error:"){
  2243.                     imageObj.succeeded = false;
  2244.                     images.numLoaded++;
  2245.                     images.numFailed++;
  2246.                     start();
  2247.                 } else {
  2248.                     setImageLoadHandlers(img, imageObj);
  2249.                     img.src = a;
  2250.                 }
  2251.                 window[callback_name] = undefined; // to work with IE<9  // NOTE: that the undefined callback property-name still exists on the window object (for IE<9)
  2252.                 try {
  2253.                     delete window[callback_name];  // for all browser that support this
  2254.                 } catch(ex) {}
  2255.                 script.parentNode.removeChild(script);
  2256.                 script = null;
  2257.                 delete imageObj.script;
  2258.                 delete imageObj.callbackname;
  2259.             };
  2260.  
  2261.             script.setAttribute("type", "text/javascript");
  2262.             script.setAttribute("src", scriptUrl);
  2263.             imageObj.script = script;
  2264.             window.document.body.appendChild(script);
  2265.  
  2266.         }
  2267.  
  2268.         function loadPseudoElement(element, type) {
  2269.             var style = window.getComputedStyle(element, type),
  2270.                 content = style.content;
  2271.             if (content.substr(0, 3) === 'url') {
  2272.                 methods.loadImage(_html2canvas.Util.parseBackgroundImage(content)[0].args[0]);
  2273.             }
  2274.             loadBackgroundImages(style.backgroundImage, element);
  2275.         }
  2276.  
  2277.         function loadPseudoElementImages(element) {
  2278.             loadPseudoElement(element, ":before");
  2279.             loadPseudoElement(element, ":after");
  2280.         }
  2281.  
  2282.         function loadGradientImage(backgroundImage, bounds) {
  2283.             var img = _html2canvas.Generate.Gradient(backgroundImage, bounds);
  2284.  
  2285.             if (img !== undefined){
  2286.                 images[backgroundImage] = {
  2287.                     img: img,
  2288.                     succeeded: true
  2289.                 };
  2290.                 images.numTotal++;
  2291.                 images.numLoaded++;
  2292.                 start();
  2293.             }
  2294.         }
  2295.  
  2296.         function invalidBackgrounds(background_image) {
  2297.             return (background_image && background_image.method && background_image.args && background_image.args.length > 0 );
  2298.         }
  2299.  
  2300.         function loadBackgroundImages(background_image, el) {
  2301.             var bounds;
  2302.  
  2303.             _html2canvas.Util.parseBackgroundImage(background_image).filter(invalidBackgrounds).forEach(function(background_image) {
  2304.                 if (background_image.method === 'url') {
  2305.                     methods.loadImage(background_image.args[0]);
  2306.                 } else if(background_image.method.match(/\-?gradient$/)) {
  2307.                     if(bounds === undefined) {
  2308.                         bounds = _html2canvas.Util.Bounds(el);
  2309.                     }
  2310.                     loadGradientImage(background_image.value, bounds);
  2311.                 }
  2312.             });
  2313.         }
  2314.  
  2315.         function getImages (el) {
  2316.             var elNodeType = false;
  2317.  
  2318.             // Firefox fails with permission denied on pages with iframes
  2319.             try {
  2320.                 Util.Children(el).forEach(getImages);
  2321.             }
  2322.             catch( e ) {}
  2323.  
  2324.             try {
  2325.                 elNodeType = el.nodeType;
  2326.             } catch (ex) {
  2327.                 elNodeType = false;
  2328.                 Util.log("html2canvas: failed to access some element's nodeType - Exception: " + ex.message);
  2329.             }
  2330.  
  2331.             if (elNodeType === 1 || elNodeType === undefined) {
  2332.                 loadPseudoElementImages(el);
  2333.                 try {
  2334.                     loadBackgroundImages(Util.getCSS(el, 'backgroundImage'), el);
  2335.                 } catch(e) {
  2336.                     Util.log("html2canvas: failed to get background-image - Exception: " + e.message);
  2337.                 }
  2338.                 loadBackgroundImages(el);
  2339.             }
  2340.         }
  2341.  
  2342.         function setImageLoadHandlers(img, imageObj) {
  2343.             img.onload = function() {
  2344.                 if ( imageObj.timer !== undefined ) {
  2345.                     // CORS succeeded
  2346.                     window.clearTimeout( imageObj.timer );
  2347.                 }
  2348.  
  2349.                 images.numLoaded++;
  2350.                 imageObj.succeeded = true;
  2351.                 img.onerror = img.onload = null;
  2352.                 start();
  2353.             };
  2354.             img.onerror = function() {
  2355.                 if (img.crossOrigin === "anonymous") {
  2356.                     // CORS failed
  2357.                     window.clearTimeout( imageObj.timer );
  2358.  
  2359.                     // let's try with proxy instead
  2360.                     if ( options.proxy ) {
  2361.                         var src = img.src;
  2362.                         img = new Image();
  2363.                         imageObj.img = img;
  2364.                         img.src = src;
  2365.  
  2366.                         proxyGetImage( img.src, img, imageObj );
  2367.                         return;
  2368.                     }
  2369.                 }
  2370.  
  2371.                 images.numLoaded++;
  2372.                 images.numFailed++;
  2373.                 imageObj.succeeded = false;
  2374.                 img.onerror = img.onload = null;
  2375.                 start();
  2376.             };
  2377.         }
  2378.  
  2379.         methods = {
  2380.             loadImage: function( src ) {
  2381.                 var img, imageObj;
  2382.                 if ( src && images[src] === undefined ) {
  2383.                     img = new Image();
  2384.                     if ( src.match(/data:image\/.*;base64,/i) ) {
  2385.                         img.src = src.replace(/url\(['"]{0,}|['"]{0,}\)$/ig, '');
  2386.                         imageObj = images[src] = {
  2387.                             img: img
  2388.                         };
  2389.                         images.numTotal++;
  2390.                         setImageLoadHandlers(img, imageObj);
  2391.                     } else if ( isSameOrigin( src ) || options.allowTaint ===  true ) {
  2392.                         imageObj = images[src] = {
  2393.                             img: img
  2394.                         };
  2395.                         images.numTotal++;
  2396.                         setImageLoadHandlers(img, imageObj);
  2397.                         img.src = src;
  2398.                     } else if ( supportCORS && !options.allowTaint && options.useCORS ) {
  2399.                         // attempt to load with CORS
  2400.  
  2401.                         img.crossOrigin = "anonymous";
  2402.                         imageObj = images[src] = {
  2403.                             img: img
  2404.                         };
  2405.                         images.numTotal++;
  2406.                         setImageLoadHandlers(img, imageObj);
  2407.                         img.src = src;
  2408.                     } else if ( options.proxy ) {
  2409.                         imageObj = images[src] = {
  2410.                             img: img
  2411.                         };
  2412.                         images.numTotal++;
  2413.                         proxyGetImage( src, img, imageObj );
  2414.                     }
  2415.                 }
  2416.  
  2417.             },
  2418.             cleanupDOM: function(cause) {
  2419.                 var img, src;
  2420.                 if (!images.cleanupDone) {
  2421.                     if (cause && typeof cause === "string") {
  2422.                         Util.log("html2canvas: Cleanup because: " + cause);
  2423.                     } else {
  2424.                         Util.log("html2canvas: Cleanup after timeout: " + options.timeout + " ms.");
  2425.                     }
  2426.  
  2427.                     for (src in images) {
  2428.                         if (images.hasOwnProperty(src)) {
  2429.                             img = images[src];
  2430.                             if (typeof img === "object" && img.callbackname && img.succeeded === undefined) {
  2431.                                 // cancel proxy image request
  2432.                                 window[img.callbackname] = undefined; // to work with IE<9  // NOTE: that the undefined callback property-name still exists on the window object (for IE<9)
  2433.                                 try {
  2434.                                     delete window[img.callbackname];  // for all browser that support this
  2435.                                 } catch(ex) {}
  2436.                                 if (img.script && img.script.parentNode) {
  2437.                                     img.script.setAttribute("src", "about:blank");  // try to cancel running request
  2438.                                     img.script.parentNode.removeChild(img.script);
  2439.                                 }
  2440.                                 images.numLoaded++;
  2441.                                 images.numFailed++;
  2442.                                 Util.log("html2canvas: Cleaned up failed img: '" + src + "' Steps: " + images.numLoaded + " / " + images.numTotal);
  2443.                             }
  2444.                         }
  2445.                     }
  2446.  
  2447.                     // cancel any pending requests
  2448.                     if(window.stop !== undefined) {
  2449.                         window.stop();
  2450.                     } else if(document.execCommand !== undefined) {
  2451.                         document.execCommand("Stop", false);
  2452.                     }
  2453.                     if (document.close !== undefined) {
  2454.                         document.close();
  2455.                     }
  2456.                     images.cleanupDone = true;
  2457.                     if (!(cause && typeof cause === "string")) {
  2458.                         start();
  2459.                     }
  2460.                 }
  2461.             },
  2462.  
  2463.             renderingDone: function() {
  2464.                 if (timeoutTimer) {
  2465.                     window.clearTimeout(timeoutTimer);
  2466.                 }
  2467.             }
  2468.         };
  2469.  
  2470.         if (options.timeout > 0) {
  2471.             timeoutTimer = window.setTimeout(methods.cleanupDOM, options.timeout);
  2472.         }
  2473.  
  2474.         Util.log('html2canvas: Preload starts: finding background-images');
  2475.         images.firstRun = true;
  2476.  
  2477.         getImages(element);
  2478.  
  2479.         Util.log('html2canvas: Preload: Finding images');
  2480.         // load <img> images
  2481.         for (i = 0; i < imgLen; i+=1){
  2482.             methods.loadImage( domImages[i].getAttribute( "src" ) );
  2483.         }
  2484.  
  2485.         images.firstRun = false;
  2486.         Util.log('html2canvas: Preload: Done.');
  2487.         if (images.numTotal === images.numLoaded) {
  2488.             start();
  2489.         }
  2490.  
  2491.         return methods;
  2492.     };
  2493.  
  2494.     _html2canvas.Renderer = function(parseQueue, options){
  2495.  
  2496.         // http://www.w3.org/TR/CSS21/zindex.html
  2497.         function createRenderQueue(parseQueue) {
  2498.             var queue = [],
  2499.                 rootContext;
  2500.  
  2501.             rootContext = (function buildStackingContext(rootNode) {
  2502.                 var rootContext = {};
  2503.                 function insert(context, node, specialParent) {
  2504.                     var zi = (node.zIndex.zindex === 'auto') ? 0 : Number(node.zIndex.zindex),
  2505.                         contextForChildren = context, // the stacking context for children
  2506.                         isPositioned = node.zIndex.isPositioned,
  2507.                         isFloated = node.zIndex.isFloated,
  2508.                         stub = {node: node},
  2509.                         childrenDest = specialParent; // where children without z-index should be pushed into
  2510.  
  2511.                     if (node.zIndex.ownStacking) {
  2512.                         // '!' comes before numbers in sorted array
  2513.                         contextForChildren = stub.context = { '!': [{node:node, children: []}]};
  2514.                         childrenDest = undefined;
  2515.                     } else if (isPositioned || isFloated) {
  2516.                         childrenDest = stub.children = [];
  2517.                     }
  2518.  
  2519.                     if (zi === 0 && specialParent) {
  2520.                         specialParent.push(stub);
  2521.                     } else {
  2522.                         if (!context[zi]) { context[zi] = []; }
  2523.                         context[zi].push(stub);
  2524.                     }
  2525.  
  2526.                     node.zIndex.children.forEach(function(childNode) {
  2527.                         insert(contextForChildren, childNode, childrenDest);
  2528.                     });
  2529.                 }
  2530.                 insert(rootContext, rootNode);
  2531.                 return rootContext;
  2532.             })(parseQueue);
  2533.  
  2534.             function sortZ(context) {
  2535.                 Object.keys(context).sort().forEach(function(zi) {
  2536.                     var nonPositioned = [],
  2537.                         floated = [],
  2538.                         positioned = [],
  2539.                         list = [];
  2540.  
  2541.                     // positioned after static
  2542.                     context[zi].forEach(function(v) {
  2543.                         if (v.node.zIndex.isPositioned || v.node.zIndex.opacity < 1) {
  2544.                             // http://www.w3.org/TR/css3-color/#transparency
  2545.                             // non-positioned element with opactiy < 1 should be stacked as if it were a positioned element with ‘z-index: 0’ and ‘opacity: 1’.
  2546. acity: 1’.
  2547.                             positioned.push(v);
  2548.                         } else if (v.node.zIndex.isFloated) {
  2549.                             floated.push(v);
  2550.                         } else {
  2551.                             nonPositioned.push(v);
  2552.                         }
  2553.                     });
  2554.  
  2555.                     (function walk(arr) {
  2556.                         arr.forEach(function(v) {
  2557.                             list.push(v);
  2558.                             if (v.children) { walk(v.children); }
  2559.                         });
  2560.                     })(nonPositioned.concat(floated, positioned));
  2561.  
  2562.                     list.forEach(function(v) {
  2563.                         if (v.context) {
  2564.                             sortZ(v.context);
  2565.                         } else {
  2566.                             queue.push(v.node);
  2567.                         }
  2568.                     });
  2569.                 });
  2570.             }
  2571.  
  2572.             sortZ(rootContext);
  2573.  
  2574.             return queue;
  2575.         }
  2576.  
  2577.         function getRenderer(rendererName) {
  2578.             var renderer;
  2579.  
  2580.             if (typeof options.renderer === "string" && _html2canvas.Renderer[rendererName] !== undefined) {
  2581.                 renderer = _html2canvas.Renderer[rendererName](options);
  2582.             } else if (typeof rendererName === "function") {
  2583.                 renderer = rendererName(options);
  2584.             } else {
  2585.                 throw new Error("Unknown renderer");
  2586.             }
  2587.  
  2588.             if ( typeof renderer !== "function" ) {
  2589.                 throw new Error("Invalid renderer defined");
  2590.             }
  2591.             return renderer;
  2592.         }
  2593.  
  2594.         return getRenderer(options.renderer)(parseQueue, options, document, createRenderQueue(parseQueue.stack), _html2canvas);
  2595.     };
  2596.  
  2597.     _html2canvas.Util.Support = function (options, doc) {
  2598.  
  2599.         function supportSVGRendering() {
  2600.             var img = new Image(),
  2601.                 canvas = doc.createElement("canvas"),
  2602.                 ctx = (canvas.getContext === undefined) ? false : canvas.getContext("2d");
  2603.             if (ctx === false) {
  2604.                 return false;
  2605.             }
  2606.             canvas.width = canvas.height = 10;
  2607.             img.src = [
  2608.                 "data:image/svg+xml,",
  2609.                 //www.w3.org/2000/svg' width='10' height='10'>",
  2610. 0' height='10'>",
  2611.                 "<foreignObject width='10' height='10'>",
  2612.                 //www.w3.org/1999/xhtml' style='width:10;height:10;'>",
  2613. 10;height:10;'>",
  2614.                 "sup",
  2615.                 "</div>",
  2616.                 "</foreignObject>",
  2617.                 "</svg>"
  2618.             ].join("");
  2619.             try {
  2620.                 ctx.drawImage(img, 0, 0);
  2621.                 canvas.toDataURL();
  2622.             } catch(e) {
  2623.                 return false;
  2624.             }
  2625.             _html2canvas.Util.log('html2canvas: Parse: SVG powered rendering available');
  2626.             return true;
  2627.  // Test whether we can use ranges to measure bounding boxes
  2628. re bound// Opera doesn't provide valid bounds.height/bottom even though it supports the method.
  2629. ports the method.
  2630.  
  2631.         function supportRangeBounds() {
  2632.             var r, testElement, rangeBounds, rangeHeight, support = false;
  2633.  
  2634.             if (doc.createRange) {
  2635.                 r = doc.createRange();
  2636.                 if (r.getBoundingClientRect) {
  2637.                     testElement = doc.createElement('boundtest');
  2638.                     testElement.style.height = "123px";
  2639.                     testElement.style.display = "block";
  2640.                     doc.body.appendChild(testElement);
  2641.  
  2642.                     r.selectNode(testElement);
  2643.                     rangeBounds = r.getBoundingClientRect();
  2644.                     rangeHeight = rangeBounds.height;
  2645.  
  2646.                     if (rangeHeight === 123) {
  2647.                         support = true;
  2648.                     }
  2649.                     doc.body.removeChild(testElement);
  2650.                 }
  2651.             }
  2652.  
  2653.             return support;
  2654.         }
  2655.  
  2656.         return {
  2657.             rangeBounds: supportRangeBounds(),
  2658.             svgRendering: options.svgRendering && supportSVGRendering()
  2659.         };
  2660.     };
  2661.     window.html2canvas = function(elements, opts) {
  2662.         elements = (elements.length) ? elements : [elements];
  2663.         var queue,
  2664.             canvas,
  2665.             options = // general
  2666.        // general
  2667.                 logging: false,
  2668.                 elements: elements,
  2669.                 background: "#fff",// preload options
  2670. / preload options
  2671.                 proxy: null,
  2672.              // no timeout
  2673.     // no timeout
  2674.               // try to load images as CORS (where available), before falling back to proxy
  2675. ing back to proxy
  2676.                 a// whether to allow images to taint the canvas, won't need proxy if set to true
  2677. xy if set to true// parse options
  2678.  // parse options
  2679.                 svg// use svg powered rendering where available (FF11+)
  2680. available (FF11+)
  2681.                 ignoreElements: "IFRAME|OBJECT|PARAM",
  2682.                 useOverflow: true,
  2683.                 letterRendering: false,
  2684.                 chinese: false,// render options
  2685. // render options
  2686.  
  2687.                 width: null,
  2688.                 height: null,
  2689.                // do a taint test with all images before applying to canvas
  2690. pplying to canvas
  2691.                 renderer: "Canvas"
  2692.             };
  2693.  
  2694.         options = _html2canvas.Util.Extend(opts, options);
  2695.  
  2696.         _html2canvas.logging = options.logging;
  2697.         options.complete = function( images ) {
  2698.  
  2699.             if (typeof options.onpreloaded === "function") {
  2700.                 if ( options.onpreloaded( images ) === false ) {
  2701.                     return;
  2702.                 }
  2703.             }
  2704.             queue = _html2canvas.Parse( images, options );
  2705.  
  2706.             if (typeof options.onparsed === "function") {
  2707.                 if ( options.onparsed( queue ) === false ) {
  2708.                     return;
  2709.                 }
  2710.             }
  2711.  
  2712.             canvas = _html2canvas.Renderer( queue, options );
  2713.  
  2714.             if (typeof options.onrendered === "function") {
  2715.                 options.onrendered( canvas );
  2716.             }
  2717.  
  2718.  
  2719.   // for pages without images, we still want this to be async, i.e. return methods before executing
  2720.  before executing
  2721.         window.setTimeout( function(){
  2722.             _html2canvas.Preload( options );
  2723.         }, 0 );
  2724.  
  2725.         return {
  2726.             render: function( queue, opts ) {
  2727.                 return _html2canvas.Renderer( queue, _html2canvas.Util.Extend(opts, options) );
  2728.             },
  2729.             parse: function( images, opts ) {
  2730.                 return _html2canvas.Parse( images, _html2canvas.Util.Extend(opts, options) );
  2731.             },
  2732.             preload: function( opts ) {
  2733.                 return _html2canvas.Preload( _html2canvas.Util.Extend(opts, options) );
  2734.             },
  2735.             log: _html2canvas.Util.log
  2736.         };
  2737.     };
  2738.  
  2739.     window.html2canvas.log = _html// for renderers
  2740.  // for renderers
  2741.     window.html2canvas.Renderer = {
  2742.         // We are assuming this will be used
  2743. this will be used
  2744.     };
  2745.     _html2canvas.Renderer.Canvas = function(options) {
  2746.         options = options || {};
  2747.  
  2748.         var doc = document,
  2749.             safeImages = [],
  2750.             testCanvas = document.createElement("canvas"),
  2751.             testctx = testCanvas.getContext("2d"),
  2752.             Util = _html2canvas.Util,
  2753.             canvas = options.canvas || doc.createElement('canvas');
  2754.  
  2755.         function createShape(ctx, args) {
  2756.             ctx.beginPath();
  2757.             args.forEach(function(arg) {
  2758.                 ctx[arg.name].apply(ctx, arg['arguments']);
  2759.             });
  2760.             ctx.closePath();
  2761.         }
  2762.  
  2763.         function safeImage(item) {
  2764.             if (safeImages.indexOf(item['arguments'][0].src ) === -1) {
  2765.                 testctx.drawImage(item['arguments'][0], 0, 0);
  2766.                 try {
  2767.                     testctx.getImageData(0, 0, 1, 1);
  2768.                 } catch(e) {
  2769.                     testCanvas = doc.createElement("canvas");
  2770.                     testctx = testCanvas.getContext("2d");
  2771.                     return false;
  2772.                 }
  2773.                 safeImages.push(item['arguments'][0].src);
  2774.             }
  2775.             return true;
  2776.         }
  2777.  
  2778.         function renderItem(ctx, item) {
  2779.             switch(item.type){
  2780.                 case "variable":
  2781.                     ctx[item.name] = item['arguments'];
  2782.                     break;
  2783.                 case "function":
  2784.                     switch(item.name) {
  2785.                         case "createPattern":
  2786.                             if (item['arguments'][0].width > 0 && item['arguments'][0].height > 0) {
  2787.                                 try {
  2788.                                     ctx.fillStyle = ctx.createPattern(item['arguments'][0], "repeat");
  2789.                                 }
  2790.                                 catch(e) {
  2791.                                     Util.log("html2canvas: Renderer: Error creating pattern", e.message);
  2792.                                 }
  2793.                             }
  2794.                             break;
  2795.                         case "drawShape":
  2796.                             createShape(ctx, item['arguments']);
  2797.                             break;
  2798.                         case "drawImage":
  2799.                             if (item['arguments'arguments'& item['arguments'][7] > 0) {
  2800.                                 if (!options.taintTest || (options.taintTest && safeImage(item))) {
  2801.                                     ctx.drawImage.apply( ctx, item['arguments'] );
  2802.                                 }
  2803.                             }
  2804.                             break;
  2805.                         default:
  2806.                             ctx[item.name].apply(ctx, item['arguments']);
  2807.                     }
  2808.                     break;
  2809.             }
  2810.         }
  2811.  
  2812.         return function(parsedData, options, document, queue, _html2canvas) {
  2813.             var ctx = canvas.getContext("2d"),
  2814.                 newCanvas,
  2815.                 bounds,
  2816.                 fstyle,
  2817.                 zStack = parsedData.stack;
  2818.  
  2819.             canvas.width = canvas.style.width =  options.width || zStack.ctx.width;
  2820.             canvas.height = canvas.style.height = options.height || zStack.ctx.height;
  2821.  
  2822.             fstyle = ctx.fillStyle;
  2823.             ctx.fillStyle = (Util.isTransparent(zStack.backgroundColor) && options.background !== undefined) ? options.background : parsedData.backgroundColor;
  2824.             ctx.fillRect(0, 0, canvas.width, canvas.height);
  2825.             ctx.fillStyle = fstyle;
  2826.  
  2827.             queue.forEach(function(storageContext) // set common settings for canvas
  2828. ttings for canvas
  2829.                 ctx.textBaseline = "bottom";
  2830.                 ctx.save();
  2831.  
  2832.                 if (storageContext.transform.matrix) {
  2833.                     ctx.translate(storageContext.transform.origin[0], storageContext.transform.origin[1]);
  2834.                     ctx.transform.apply(ctx, storageContext.transform.matrix);
  2835.                     ctx.translate(-storageContext.transform.origin[0], -storageContext.transform.origin[1]);
  2836.                 }
  2837.  
  2838.                 if (storageContext.clip){
  2839.                     ctx.beginPath();
  2840.                     ctx.rect(storageContext.clip.left, storageContext.clip.top, storageContext.clip.width, storageContext.clip.height);
  2841.                     ctx.clip();
  2842.                 }
  2843.  
  2844.                 if (storageContext.ctx.storage) {
  2845.                     storageContext.ctx.storage.forEach(function(item) {
  2846.                         renderItem(ctx, item);
  2847.                     });
  2848.                 }
  2849.  
  2850.                 ctx.restore();
  2851.             });
  2852.  
  2853.             Util.log("html2canvas: Renderer: Canvas renderer done - returning canvas obj");
  2854.  
  2855.             if (options.elements.length === 1) {
  2856.                 if (typeof options.elements[0] === "object" && options.elements[0].nodeName !== "BODY") {
  2857.   // crop image to the bounds of selected (single) element
  2858.  (single) element
  2859.                     bounds = _html2canvas.Util.Bounds(options.elements[0]);
  2860.                     newCanvas = document.createElement('canvas');
  2861.                     newCanvas.width = Math.ceil(bounds.width);
  2862.                     newCanvas.height = Math.ceil(bounds.height);
  2863.                     ctx = newCanvas.getContext("2d");
  2864.  
  2865.                     ctx.drawImage(canvas, bounds.left, bounds.top, bounds.width, bounds.height, 0, 0, bounds.width, bounds.height);
  2866.                     canvas = null;
  2867.                     return newCanvas;
  2868.                 }
  2869.             }
  2870.  
  2871.             return canvas;
  2872.         };
  2873.     };
  2874. })

Raw Paste


Login or Register to edit or fork this paste. It's free.