Created
May 27, 2013 16:05
-
-
Save polidog/5657823 to your computer and use it in GitHub Desktop.
Revisions
-
polidog created this gist
May 27, 2013 .There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,2866 @@ /* html2image 0.0.1 <http://html2canvas.hertzen.com> Copyright (c) 2013 Ryota Mochizuki (@polidog) Fork by html2canvas 0.4.0 <http://html2canvas.hertzen.com> Copyright (c) 2013 Niklas von Hertzen (@niklasvh) Released under MIT License */ (function(window, document, undefined){ "use strict"; var _html2canvas = {}, previousElement, computedCSS, html2canvas; function h2clog(a) { if (_html2canvas.logging && window.console && window.console.log) { window.console.log(a); } } _html2canvas.Util = {}; _html2canvas.Util.trimText = (function(isNative){ return function(input){ if(isNative) { return isNative.apply( input ); } else { return ((input || '') + '').replace( /^\s+|\s+$/g , '' ); } }; })( String.prototype.trim ); _html2canvas.Util.parseBackgroundImage = function (value) { var whitespace = ' \r\n\t', method, definition, prefix, prefix_i, block, results = [], c, mode = 0, numParen = 0, quote, args; var appendResult = function(){ if(method) { if(definition.substr( 0, 1 ) === '"') { definition = definition.substr( 1, definition.length - 2 ); } if(definition) { args.push(definition); } if(method.substr( 0, 1 ) === '-' && (prefix_i = method.indexOf( '-', 1 ) + 1) > 0) { prefix = method.substr( 0, prefix_i); method = method.substr( prefix_i ); } results.push({ prefix: prefix, method: method.toLowerCase(), value: block, args: args }); } args = []; //for some odd reason, setting .length = 0 didn't work in safari method = prefix = definition = block = ''; }; appendResult(); for(var i = 0, ii = value.length; i<ii; i++) { c = value[i]; if(mode === 0 && whitespace.indexOf( c ) > -1){ continue; } switch(c) { case '"': if(!quote) { quote = c; } else if(quote === c) { quote = null; } break; case '(': if(quote) { break; } else if(mode === 0) { mode = 1; block += c; continue; } else { numParen++; } break; case ')': if(quote) { break; } else if(mode === 1) { if(numParen === 0) { mode = 0; block += c; appendResult(); continue; } else { numParen--; } } break; case ',': if(quote) { break; } else if(mode === 0) { appendResult(); continue; } else if (mode === 1) { if(numParen === 0 && !method.match(/^url$/i)) { args.push(definition); definition = ''; block += c; continue; } } break; } block += c; if(mode === 0) { method += c; } else { definition += c; } } appendResult(); return results; }; _html2canvas.Util.Bounds = function getBounds (el) { var clientRect, bounds = {}; if (el.getBoundingClientRect){ clientRect = el.getBoundingClientRect(); // TODO add scroll position to bounds, so no scrolling of window necessary bounds.top = clientRect.top; bounds.bottom = clientRect.bottom || (clientRect.top + clientRect.height); bounds.left = clientRect.left; // older IE doesn't have width/height, but top/bottom instead bounds.width = clientRect.width || (clientRect.right - clientRect.left); bounds.height = clientRect.height || (clientRect.bottom - clientRect.top); return bounds; } }; _html2canvas.Util.getCSS = function (el, attribute, index) { // return $(el).css(attribute); var val, isBackgroundSizePosition = attribute.match( /^background(Size|Position)$/ ); function toPX( attribute, val ) { var rsLeft = el.runtimeStyle && el.runtimeStyle[ attribute ], left, style = el.style; // Check if we are not dealing with pixels, (Opera has issues with this) // Ported from jQuery css.js // From the awesome hack by Dean Edwards // http://erik.eae.net/archives/2007/07/27/18.54.15/#comment-102291 // If we're not dealing with a regular pixel number // but a number that has a weird ending, we need to convert it to pixels if ( !/^-?[0-9]+\.?[0-9]*(?:px)?$/i.test( val ) && /^-?\d/.test( val ) ) { // Remember the original values left = style.left; // Put in the new values to get a computed value out if ( rsLeft ) { el.runtimeStyle.left = el.currentStyle.left; } style.left = attribute === "fontSize" ? "1em" : (val || 0); val = style.pixelLeft + "px"; // Revert the changed values style.left = left; if ( rsLeft ) { el.runtimeStyle.left = rsLeft; } } if (!/^(thin|medium|thick)$/i.test( val )) { return Math.round(parseFloat( val )) + "px"; } return val; } if (previousElement !== el) { computedCSS = document.defaultView.getComputedStyle(el, null); } val = computedCSS[attribute]; if (isBackgroundSizePosition) { val = (val || '').split( ',' ); val = val[index || 0] || val[0] || 'auto'; val = _html2canvas.Util.trimText(val).split(' '); if(attribute === 'backgroundSize' && (!val[ 0 ] || val[ 0 ].match( /cover|contain|auto/ ))) { //these values will be handled in the parent function } else { val[ 0 ] = ( val[ 0 ].indexOf( "%" ) === -1 ) ? toPX( attribute + "X", val[ 0 ] ) : val[ 0 ]; if(val[ 1 ] === undefined) { if(attribute === 'backgroundSize') { val[ 1 ] = 'auto'; return val; } else { // IE 9 doesn't return double digit always val[ 1 ] = val[ 0 ]; } } val[ 1 ] = ( val[ 1 ].indexOf( "%" ) === -1 ) ? toPX( attribute + "Y", val[ 1 ] ) : val[ 1 ]; } } else if ( /border(Top|Bottom)(Left|Right)Radius/.test( attribute) ) { var arr = val.split(" "); if ( arr.length <= 1 ) { arr[ 1 ] = arr[ 0 ]; } arr[ 0 ] = parseInt( arr[ 0 ], 10 ); arr[ 1 ] = parseInt( arr[ 1 ], 10 ); val = arr; } return val; }; _html2canvas.Util.resizeBounds = function( current_width, current_height, target_width, target_height, stretch_mode ){ var target_ratio = target_width / target_height, current_ratio = current_width / current_height, output_width, output_height; if(!stretch_mode || stretch_mode === 'auto') { output_width = target_width; output_height = target_height; } else { if(target_ratio < current_ratio ^ stretch_mode === 'contain') { output_height = target_height; output_width = target_height * current_ratio; } else { output_width = target_width; output_height = target_width / current_ratio; } } return { width: output_width, height: output_height }; }; function backgroundBoundsFactory( prop, el, bounds, image, imageIndex, backgroundSize ) { var bgposition = _html2canvas.Util.getCSS( el, prop, imageIndex ) , topPos, left, percentage, val; if (bgposition.length === 1){ val = bgposition[0]; bgposition = []; bgposition[0] = val; bgposition[1] = val; } if (bgposition[0].toString().indexOf("%") !== -1){ percentage = (parseFloat(bgposition[0])/100); left = bounds.width * percentage; if(prop !== 'backgroundSize') { left -= (backgroundSize || image).width*percentage; } } else { if(prop === 'backgroundSize') { if(bgposition[0] === 'auto') { left = image.width; } else { if(bgposition[0].match(/contain|cover/)) { var resized = _html2canvas.Util.resizeBounds( image.width, image.height, bounds.width, bounds.height, bgposition[0] ); left = resized.width; topPos = resized.height; } else { left = parseInt (bgposition[0], 10 ); } } } else { left = parseInt( bgposition[0], 10 ); } } if(bgposition[1] === 'auto') { topPos = left / image.width * image.height; } else if (bgposition[1].toString().indexOf("%") !== -1){ percentage = (parseFloat(bgposition[1])/100); topPos = bounds.height * percentage; if(prop !== 'backgroundSize') { topPos -= (backgroundSize || image).height * percentage; } } else { topPos = parseInt(bgposition[1],10); } return [left, topPos]; } _html2canvas.Util.BackgroundPosition = function( el, bounds, image, imageIndex, backgroundSize ) { var result = backgroundBoundsFactory( 'backgroundPosition', el, bounds, image, imageIndex, backgroundSize ); return { left: result[0], top: result[1] }; }; _html2canvas.Util.BackgroundSize = function( el, bounds, image, imageIndex ) { var result = backgroundBoundsFactory( 'backgroundSize', el, bounds, image, imageIndex ); return { width: result[0], height: result[1] }; }; _html2canvas.Util.Extend = function (options, defaults) { for (var key in options) { if (options.hasOwnProperty(key)) { defaults[key] = options[key]; } } return defaults; }; /* * Derived from jQuery.contents() * Copyright 2010, John Resig * Dual licensed under the MIT or GPL Version 2 licenses. * http://jquery.org/license */ _html2canvas.Util.Children = function( elem ) { var children; try { children = (elem.nodeName && elem.nodeName.toUpperCase() === "IFRAME") ? elem.contentDocument || elem.contentWindow.document : (function( array ){ var ret = []; if ( array !== null ) { (function( first, second ) { var i = first.length, j = 0; if ( typeof second.length === "number" ) { for ( var l = second.length; j < l; j++ ) { first[ i++ ] = second[ j ]; } } else { while ( second[j] !== undefined ) { first[ i++ ] = second[ j++ ]; } } first.length = i; return first; })( ret, array ); } return ret; })( elem.childNodes ); } catch (ex) { h2clog("html2canvas.Util.Children failed with exception: " + ex.message); children = []; } return children; }; _html2canvas.Util.Font = (function () { var fontData = {}; return function(font, fontSize, doc) { if (fontData[font + "-" + fontSize] !== undefined) { return fontData[font + "-" + fontSize]; } var container = doc.createElement('div'), img = doc.createElement('img'), span = doc.createElement('span'), sampleText = 'Hidden Text', baseline, middle, metricsObj; container.style.visibility = "hidden"; container.style.fontFamily = font; container.style.fontSize = fontSize; container.style.margin = 0; container.style.padding = 0; doc.body.appendChild(container); // http://probablyprogramming.com/2009/03/15/the-tiniest-gif-ever (handtinywhite.gif) img.src = "data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACwAAAAAAQABAAACAkQBADs="; img.width = 1; img.height = 1; img.style.margin = 0; img.style.padding = 0; img.style.verticalAlign = "baseline"; span.style.fontFamily = font; span.style.fontSize = fontSize; span.style.margin = 0; span.style.padding = 0; span.appendChild(doc.createTextNode(sampleText)); container.appendChild(span); container.appendChild(img); baseline = (img.offsetTop - span.offsetTop) + 1; container.removeChild(span); container.appendChild(doc.createTextNode(sampleText)); container.style.lineHeight = "normal"; img.style.verticalAlign = "super"; middle = (img.offsetTop-container.offsetTop) + 1; metricsObj = { baseline: baseline, lineWidth: 1, middle: middle }; fontData[font + "-" + fontSize] = metricsObj; doc.body.removeChild(container); return metricsObj; }; })(); (function(){ _html2canvas.Generate = {}; var reGradients = [ /^(-webkit-linear-gradient)\(([a-z\s]+)([\w\d\.\s,%\(\)]+)\)$/, /^(-o-linear-gradient)\(([a-z\s]+)([\w\d\.\s,%\(\)]+)\)$/, /^(-webkit-gradient)\((linear|radial),\s((?:\d{1,3}%?)\s(?:\d{1,3}%?),\s(?:\d{1,3}%?)\s(?:\d{1,3}%?))([\w\d\.\s,%\(\)\-]+)\)$/, /^(-moz-linear-gradient)\(((?:\d{1,3}%?)\s(?:\d{1,3}%?))([\w\d\.\s,%\(\)]+)\)$/, /^(-webkit-radial-gradient)\(((?:\d{1,3}%?)\s(?:\d{1,3}%?)),\s(\w+)\s([a-z\-]+)([\w\d\.\s,%\(\)]+)\)$/, /^(-moz-radial-gradient)\(((?:\d{1,3}%?)\s(?:\d{1,3}%?)),\s(\w+)\s?([a-z\-]*)([\w\d\.\s,%\(\)]+)\)$/, /^(-o-radial-gradient)\(((?:\d{1,3}%?)\s(?:\d{1,3}%?)),\s(\w+)\s([a-z\-]+)([\w\d\.\s,%\(\)]+)\)$/ ]; /* * TODO: Add IE10 vendor prefix (-ms) support * TODO: Add W3C gradient (linear-gradient) support * TODO: Add old Webkit -webkit-gradient(radial, ...) support * TODO: Maybe some RegExp optimizations are possible ;o) */ _html2canvas.Generate.parseGradient = function(css, bounds) { var gradient, i, len = reGradients.length, m1, stop, m2, m2Len, step, m3, tl,tr,br,bl; for(i = 0; i < len; i+=1){ m1 = css.match(reGradients[i]); if(m1) { break; } } if(m1) { switch(m1[1]) { case '-webkit-linear-gradient': case '-o-linear-gradient': gradient = { type: 'linear', x0: null, y0: null, x1: null, y1: null, colorStops: [] }; // get coordinates m2 = m1[2].match(/\w+/g); if(m2){ m2Len = m2.length; for(i = 0; i < m2Len; i+=1){ switch(m2[i]) { case 'top': gradient.y0 = 0; gradient.y1 = bounds.height; break; case 'right': gradient.x0 = bounds.width; gradient.x1 = 0; break; case 'bottom': gradient.y0 = bounds.height; gradient.y1 = 0; break; case 'left': gradient.x0 = 0; gradient.x1 = bounds.width; break; } } } if(gradient.x0 === null && gradient.x1 === null){ // center gradient.x0 = gradient.x1 = bounds.width / 2; } if(gradient.y0 === null && gradient.y1 === null){ // center gradient.y0 = gradient.y1 = bounds.height / 2; } // get colors and stops 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); if(m2){ m2Len = m2.length; step = 1 / Math.max(m2Len - 1, 1); for(i = 0; i < m2Len; i+=1){ 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)?/); if(m3[2]){ stop = parseFloat(m3[2]); if(m3[3] === '%'){ stop /= 100; } else { // px - stupid opera stop /= bounds.width; } } else { stop = i * step; } gradient.colorStops.push({ color: m3[1], stop: stop }); } } break; case '-webkit-gradient': gradient = { type: m1[2] === 'radial' ? 'circle' : m1[2], // TODO: Add radial gradient support for older mozilla definitions x0: 0, y0: 0, x1: 0, y1: 0, colorStops: [] }; // get coordinates m2 = m1[3].match(/(\d{1,3})%?\s(\d{1,3})%?,\s(\d{1,3})%?\s(\d{1,3})%?/); if(m2){ gradient.x0 = (m2[1] * bounds.width) / 100; gradient.y0 = (m2[2] * bounds.height) / 100; gradient.x1 = (m2[3] * bounds.width) / 100; gradient.y1 = (m2[4] * bounds.height) / 100; } // get colors and stops 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); if(m2){ m2Len = m2.length; for(i = 0; i < m2Len; i+=1){ 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\.]+)?\))\)/); stop = parseFloat(m3[2]); if(m3[1] === 'from') { stop = 0.0; } if(m3[1] === 'to') { stop = 1.0; } gradient.colorStops.push({ color: m3[3], stop: stop }); } } break; case '-moz-linear-gradient': gradient = { type: 'linear', x0: 0, y0: 0, x1: 0, y1: 0, colorStops: [] }; // get coordinates m2 = m1[2].match(/(\d{1,3})%?\s(\d{1,3})%?/); // m2[1] == 0% -> left // m2[1] == 50% -> center // m2[1] == 100% -> right // m2[2] == 0% -> top // m2[2] == 50% -> center // m2[2] == 100% -> bottom if(m2){ gradient.x0 = (m2[1] * bounds.width) / 100; gradient.y0 = (m2[2] * bounds.height) / 100; gradient.x1 = bounds.width - gradient.x0; gradient.y1 = bounds.height - gradient.y0; } // get colors and stops 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); if(m2){ m2Len = m2.length; step = 1 / Math.max(m2Len - 1, 1); for(i = 0; i < m2Len; i+=1){ m3 = m2[i].match(/((?:rgb|rgba)\(\d{1,3},\s\d{1,3},\s\d{1,3}(?:,\s[0-9\.]+)?\))\s*(\d{1,3})?(%)?/); if(m3[2]){ stop = parseFloat(m3[2]); if(m3[3]){ // percentage stop /= 100; } } else { stop = i * step; } gradient.colorStops.push({ color: m3[1], stop: stop }); } } break; case '-webkit-radial-gradient': case '-moz-radial-gradient': case '-o-radial-gradient': gradient = { type: 'circle', x0: 0, y0: 0, x1: bounds.width, y1: bounds.height, cx: 0, cy: 0, rx: 0, ry: 0, colorStops: [] }; // center m2 = m1[2].match(/(\d{1,3})%?\s(\d{1,3})%?/); if(m2){ gradient.cx = (m2[1] * bounds.width) / 100; gradient.cy = (m2[2] * bounds.height) / 100; } // size m2 = m1[3].match(/\w+/); m3 = m1[4].match(/[a-z\-]*/); if(m2 && m3){ switch(m3[0]){ case 'farthest-corner': case 'cover': // is equivalent to farthest-corner case '': // mozilla removes "cover" from definition :( tl = Math.sqrt(Math.pow(gradient.cx, 2) + Math.pow(gradient.cy, 2)); tr = Math.sqrt(Math.pow(gradient.cx, 2) + Math.pow(gradient.y1 - gradient.cy, 2)); br = Math.sqrt(Math.pow(gradient.x1 - gradient.cx, 2) + Math.pow(gradient.y1 - gradient.cy, 2)); bl = Math.sqrt(Math.pow(gradient.x1 - gradient.cx, 2) + Math.pow(gradient.cy, 2)); gradient.rx = gradient.ry = Math.max(tl, tr, br, bl); break; case 'closest-corner': tl = Math.sqrt(Math.pow(gradient.cx, 2) + Math.pow(gradient.cy, 2)); tr = Math.sqrt(Math.pow(gradient.cx, 2) + Math.pow(gradient.y1 - gradient.cy, 2)); br = Math.sqrt(Math.pow(gradient.x1 - gradient.cx, 2) + Math.pow(gradient.y1 - gradient.cy, 2)); bl = Math.sqrt(Math.pow(gradient.x1 - gradient.cx, 2) + Math.pow(gradient.cy, 2)); gradient.rx = gradient.ry = Math.min(tl, tr, br, bl); break; case 'farthest-side': if(m2[0] === 'circle'){ gradient.rx = gradient.ry = Math.max( gradient.cx, gradient.cy, gradient.x1 - gradient.cx, gradient.y1 - gradient.cy ); } else { // ellipse gradient.type = m2[0]; gradient.rx = Math.max( gradient.cx, gradient.x1 - gradient.cx ); gradient.ry = Math.max( gradient.cy, gradient.y1 - gradient.cy ); } break; case 'closest-side': case 'contain': // is equivalent to closest-side if(m2[0] === 'circle'){ gradient.rx = gradient.ry = Math.min( gradient.cx, gradient.cy, gradient.x1 - gradient.cx, gradient.y1 - gradient.cy ); } else { // ellipse gradient.type = m2[0]; gradient.rx = Math.min( gradient.cx, gradient.x1 - gradient.cx ); gradient.ry = Math.min( gradient.cy, gradient.y1 - gradient.cy ); } break; // TODO: add support for "30px 40px" sizes (webkit only) } } // color stops 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); if(m2){ m2Len = m2.length; step = 1 / Math.max(m2Len - 1, 1); for(i = 0; i < m2Len; i+=1){ 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)?/); if(m3[2]){ stop = parseFloat(m3[2]); if(m3[3] === '%'){ stop /= 100; } else { // px - stupid opera stop /= bounds.width; } } else { stop = i * step; } gradient.colorStops.push({ color: m3[1], stop: stop }); } } break; } } return gradient; }; _html2canvas.Generate.Gradient = function(src, bounds) { if(bounds.width === 0 || bounds.height === 0) { return; } var canvas = document.createElement('canvas'), ctx = canvas.getContext('2d'), gradient, grad, i, len; canvas.width = bounds.width; canvas.height = bounds.height; // TODO: add support for multi defined background gradients gradient = _html2canvas.Generate.parseGradient(src, bounds); if(gradient) { if(gradient.type === 'linear') { grad = ctx.createLinearGradient(gradient.x0, gradient.y0, gradient.x1, gradient.y1); for (i = 0, len = gradient.colorStops.length; i < len; i+=1) { try { grad.addColorStop(gradient.colorStops[i].stop, gradient.colorStops[i].color); } catch(e) { h2clog(['failed to add color stop: ', e, '; tried to add: ', gradient.colorStops[i], '; stop: ', i, '; in: ', src]); } } ctx.fillStyle = grad; ctx.fillRect(0, 0, bounds.width, bounds.height); } else if(gradient.type === 'circle') { grad = ctx.createRadialGradient(gradient.cx, gradient.cy, 0, gradient.cx, gradient.cy, gradient.rx); for (i = 0, len = gradient.colorStops.length; i < len; i+=1) { try { grad.addColorStop(gradient.colorStops[i].stop, gradient.colorStops[i].color); } catch(e) { h2clog(['failed to add color stop: ', e, '; tried to add: ', gradient.colorStops[i], '; stop: ', i, '; in: ', src]); } } ctx.fillStyle = grad; ctx.fillRect(0, 0, bounds.width, bounds.height); } else if(gradient.type === 'ellipse') { // draw circle var canvasRadial = document.createElement('canvas'), ctxRadial = canvasRadial.getContext('2d'), ri = Math.max(gradient.rx, gradient.ry), di = ri * 2, imgRadial; canvasRadial.width = canvasRadial.height = di; grad = ctxRadial.createRadialGradient(gradient.rx, gradient.ry, 0, gradient.rx, gradient.ry, ri); for (i = 0, len = gradient.colorStops.length; i < len; i+=1) { try { grad.addColorStop(gradient.colorStops[i].stop, gradient.colorStops[i].color); } catch(e) { h2clog(['failed to add color stop: ', e, '; tried to add: ', gradient.colorStops[i], '; stop: ', i, '; in: ', src]); } } ctxRadial.fillStyle = grad; ctxRadial.fillRect(0, 0, di, di); ctx.fillStyle = gradient.colorStops[i - 1].color; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.drawImage(canvasRadial, gradient.cx - gradient.rx, gradient.cy - gradient.ry, 2 * gradient.rx, 2 * gradient.ry); } } return canvas; }; _html2canvas.Generate.ListAlpha = function(number) { var tmp = "", modulus; do { modulus = number % 26; tmp = String.fromCharCode((modulus) + 64) + tmp; number = number / 26; }while((number*26) > 26); return tmp; }; _html2canvas.Generate.ListRoman = function(number) { var romanArray = ["M", "CM", "D", "CD", "C", "XC", "L", "XL", "X", "IX", "V", "IV", "I"], decimal = [1000, 900, 500, 400, 100, 90, 50, 40, 10, 9, 5, 4, 1], roman = "", v, len = romanArray.length; if (number <= 0 || number >= 4000) { return number; } for (v=0; v < len; v+=1) { while (number >= decimal[v]) { number -= decimal[v]; roman += romanArray[v]; } } return roman; }; })(); function h2cRenderContext(width, height) { var storage = []; return { storage: storage, width: width, height: height, clip: function() { storage.push({ type: "function", name: "clip", 'arguments': arguments }); }, translate: function() { storage.push({ type: "function", name: "translate", 'arguments': arguments }); }, fill: function() { storage.push({ type: "function", name: "fill", 'arguments': arguments }); }, save: function() { storage.push({ type: "function", name: "save", 'arguments': arguments }); }, restore: function() { storage.push({ type: "function", name: "restore", 'arguments': arguments }); }, fillRect: function () { storage.push({ type: "function", name: "fillRect", 'arguments': arguments }); }, createPattern: function() { storage.push({ type: "function", name: "createPattern", 'arguments': arguments }); }, drawShape: function() { var shape = []; storage.push({ type: "function", name: "drawShape", 'arguments': shape }); return { moveTo: function() { shape.push({ name: "moveTo", 'arguments': arguments }); }, lineTo: function() { shape.push({ name: "lineTo", 'arguments': arguments }); }, arcTo: function() { shape.push({ name: "arcTo", 'arguments': arguments }); }, bezierCurveTo: function() { shape.push({ name: "bezierCurveTo", 'arguments': arguments }); }, quadraticCurveTo: function() { shape.push({ name: "quadraticCurveTo", 'arguments': arguments }); } }; }, drawImage: function () { storage.push({ type: "function", name: "drawImage", 'arguments': arguments }); }, fillText: function () { storage.push({ type: "function", name: "fillText", 'arguments': arguments }); }, setVariable: function (variable, value) { storage.push({ type: "variable", name: variable, 'arguments': value }); } }; } _html2canvas.Parse = function (images, options) { window.scroll(0,0); var element = (( options.elements === undefined ) ? document.body : options.elements[0]), // select body by default numDraws = 0, doc = element.ownerDocument, support = _html2canvas.Util.Support(options, doc), ignoreElementsRegExp = new RegExp("(" + options.ignoreElements + ")"), body = doc.body, getCSS = _html2canvas.Util.getCSS, pseudoHide = "___html2canvas___pseudoelement", hidePseudoElements = doc.createElement('style'); hidePseudoElements.innerHTML = '.' + pseudoHide + '-before:before { content: "" !important; display: none !important; }' + '.' + pseudoHide + '-after:after { content: "" !important; display: none !important; }'; body.appendChild(hidePseudoElements); images = images || {}; function documentWidth () { return Math.max( Math.max(doc.body.scrollWidth, doc.documentElement.scrollWidth), Math.max(doc.body.offsetWidth, doc.documentElement.offsetWidth), Math.max(doc.body.clientWidth, doc.documentElement.clientWidth) ); } function documentHeight () { return Math.max( Math.max(doc.body.scrollHeight, doc.documentElement.scrollHeight), Math.max(doc.body.offsetHeight, doc.documentElement.offsetHeight), Math.max(doc.body.clientHeight, doc.documentElement.clientHeight) ); } function getCSSInt(element, attribute) { var val = parseInt(getCSS(element, attribute), 10); return (isNaN(val)) ? 0 : val; // borders in old IE are throwing 'medium' for demo.html } function renderRect (ctx, x, y, w, h, bgcolor) { if (bgcolor !== "transparent"){ ctx.setVariable("fillStyle", bgcolor); ctx.fillRect(x, y, w, h); numDraws+=1; } } function textTransform (text, transform) { switch(transform){ case "lowercase": return text.toLowerCase(); case "capitalize": return text.replace( /(^|\s|:|-|\(|\))([a-z])/g , function (m, p1, p2) { if (m.length > 0) { return p1 + p2.toUpperCase(); } } ); case "uppercase": return text.toUpperCase(); default: return text; } } function noLetterSpacing(letter_spacing) { return (/^(normal|none|0px)$/.test(letter_spacing)); } function drawText(currentText, x, y, ctx){ if (currentText !== null && _html2canvas.Util.trimText(currentText).length > 0) { ctx.fillText(currentText, x, y); numDraws+=1; } } function setTextVariables(ctx, el, text_decoration, color) { var align = false, bold = getCSS(el, "fontWeight"), family = getCSS(el, "fontFamily"), size = getCSS(el, "fontSize"); switch(parseInt(bold, 10)){ case 401: bold = "bold"; break; case 400: bold = "normal"; break; } ctx.setVariable("fillStyle", color); ctx.setVariable("font", [getCSS(el, "fontStyle"), getCSS(el, "fontVariant"), bold, size, family].join(" ")); ctx.setVariable("textAlign", (align) ? "right" : "left"); if (text_decoration !== "none"){ return _html2canvas.Util.Font(family, size, doc); } } function renderTextDecoration(ctx, text_decoration, bounds, metrics, color) { switch(text_decoration) { case "underline": // Draws a line at the baseline of the font // 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 renderRect(ctx, bounds.left, Math.round(bounds.top + metrics.baseline + metrics.lineWidth), bounds.width, 1, color); break; case "overline": renderRect(ctx, bounds.left, Math.round(bounds.top), bounds.width, 1, color); break; case "line-through": // TODO try and find exact position for line-through renderRect(ctx, bounds.left, Math.ceil(bounds.top + metrics.middle + metrics.lineWidth), bounds.width, 1, color); break; } } function getTextBounds(state, text, textDecoration, isLast) { var bounds; if (support.rangeBounds) { if (textDecoration !== "none" || _html2canvas.Util.trimText(text).length !== 0) { bounds = textRangeBounds(text, state.node, state.textOffset); } state.textOffset += text.length; } else if (state.node && typeof state.node.nodeValue === "string" ){ var newTextNode = (isLast) ? state.node.splitText(text.length) : null; bounds = textWrapperBounds(state.node); state.node = newTextNode; } return bounds; } function textRangeBounds(text, textNode, textOffset) { var range = doc.createRange(); range.setStart(textNode, textOffset); range.setEnd(textNode, textOffset + text.length); return range.getBoundingClientRect(); } function textWrapperBounds(oldTextNode) { var parent = oldTextNode.parentNode, wrapElement = doc.createElement('wrapper'), backupText = oldTextNode.cloneNode(true); wrapElement.appendChild(oldTextNode.cloneNode(true)); parent.replaceChild(wrapElement, oldTextNode); var bounds = _html2canvas.Util.Bounds(wrapElement); parent.replaceChild(backupText, wrapElement); return bounds; } function renderText(el, textNode, stack) { var ctx = stack.ctx, color = getCSS(el, "color"), textDecoration = getCSS(el, "textDecoration"), textAlign = getCSS(el, "textAlign"), metrics, textList, state = { node: textNode, textOffset: 0 }; if (_html2canvas.Util.trimText(textNode.nodeValue).length > 0) { textNode.nodeValue = textTransform(textNode.nodeValue, getCSS(el, "textTransform")); textAlign = textAlign.replace(["-webkit-auto"],["auto"]); textList = (!options.letterRendering && /^(left|right|justify|auto)$/.test(textAlign) && noLetterSpacing(getCSS(el, "letterSpacing"))) ? textNode.nodeValue.split(/(\b| )/) : textNode.nodeValue.split(""); metrics = setTextVariables(ctx, el, textDecoration, color); if (options.chinese) { textList.forEach(function(word, index) { if (/.*[\u4E00-\u9FA5].*$/.test(word)) { word = word.split(""); word.unshift(index, 1); textList.splice.apply(textList, word); } }); } textList.forEach(function(text, index) { var bounds = getTextBounds(state, text, textDecoration, (index < textList.length - 1)); if (bounds) { drawText(text, bounds.left, bounds.bottom, ctx); renderTextDecoration(ctx, textDecoration, bounds, metrics, color); } }); } } function listPosition (element, val) { var boundElement = doc.createElement( "boundelement" ), originalType, bounds; boundElement.style.display = "inline"; originalType = element.style.listStyleType; element.style.listStyleType = "none"; boundElement.appendChild(doc.createTextNode(val)); element.insertBefore(boundElement, element.firstChild); bounds = _html2canvas.Util.Bounds(boundElement); element.removeChild(boundElement); element.style.listStyleType = originalType; return bounds; } function elementIndex( el ) { var i = -1, count = 1, childs = el.parentNode.childNodes; if (el.parentNode) { while( childs[ ++i ] !== el ) { if ( childs[ i ].nodeType === 1 ) { count++; } } return count; } else { return -1; } } function listItemText(element, type) { var currentIndex = elementIndex(element), text; switch(type){ case "decimal": text = currentIndex; break; case "decimal-leading-zero": text = (currentIndex.toString().length === 1) ? currentIndex = "0" + currentIndex.toString() : currentIndex.toString(); break; case "upper-roman": text = _html2canvas.Generate.ListRoman( currentIndex ); break; case "lower-roman": text = _html2canvas.Generate.ListRoman( currentIndex ).toLowerCase(); break; case "lower-alpha": text = _html2canvas.Generate.ListAlpha( currentIndex ).toLowerCase(); break; case "upper-alpha": text = _html2canvas.Generate.ListAlpha( currentIndex ); break; } text += ". "; return text; } function renderListItem(element, stack, elBounds) { var x, text, ctx = stack.ctx, type = getCSS(element, "listStyleType"), listBounds; if (/^(decimal|decimal-leading-zero|upper-alpha|upper-latin|upper-roman|lower-alpha|lower-greek|lower-latin|lower-roman)$/i.test(type)) { text = listItemText(element, type); listBounds = listPosition(element, text); setTextVariables(ctx, element, "none", getCSS(element, "color")); if (getCSS(element, "listStylePosition") === "inside") { ctx.setVariable("textAlign", "left"); x = elBounds.left; } else { return; } drawText(text, x, listBounds.bottom, ctx); } } function loadImage (src){ var img = images[src]; if (img && img.succeeded === true) { return img.img; } else { return false; } } function clipBounds(src, dst){ var x = Math.max(src.left, dst.left), y = Math.max(src.top, dst.top), x2 = Math.min((src.left + src.width), (dst.left + dst.width)), y2 = Math.min((src.top + src.height), (dst.top + dst.height)); return { left:x, top:y, width:x2-x, height:y2-y }; } function setZ(zIndex, parentZ){ // TODO fix static elements overlapping relative/absolute elements under same stack, if they are defined after them var newContext; if (!parentZ){ newContext = h2czContext(0); return newContext; } if (zIndex !== "auto"){ newContext = h2czContext(zIndex); parentZ.children.push(newContext); return newContext; } return parentZ; } function renderImage(ctx, element, image, bounds, borders) { var paddingLeft = getCSSInt(element, 'paddingLeft'), paddingTop = getCSSInt(element, 'paddingTop'), paddingRight = getCSSInt(element, 'paddingRight'), paddingBottom = getCSSInt(element, 'paddingBottom'); drawImage( ctx, image, 0, //sx 0, //sy image.width, //sw image.height, //sh bounds.left + paddingLeft + borders[3].width, //dx bounds.top + paddingTop + borders[0].width, // dy bounds.width - (borders[1].width + borders[3].width + paddingLeft + paddingRight), //dw bounds.height - (borders[0].width + borders[2].width + paddingTop + paddingBottom) //dh ); } function getBorderData(element) { return ["Top", "Right", "Bottom", "Left"].map(function(side) { return { width: getCSSInt(element, 'border' + side + 'Width'), color: getCSS(element, 'border' + side + 'Color') }; }); } function getBorderRadiusData(element) { return ["TopLeft", "TopRight", "BottomRight", "BottomLeft"].map(function(side) { return getCSS(element, 'border' + side + 'Radius'); }); } var getCurvePoints = (function(kappa) { return function(x, y, r1, r2) { var ox = (r1) * kappa, // control point offset horizontal oy = (r2) * kappa, // control point offset vertical xm = x + r1, // x-middle ym = y + r2; // y-middle return { topLeft: bezierCurve({ x:x, y:ym }, { x:x, y:ym - oy }, { x:xm - ox, y:y }, { x:xm, y:y }), topRight: bezierCurve({ x:x, y:y }, { x:x + ox, y:y }, { x:xm, y:ym - oy }, { x:xm, y:ym }), bottomRight: bezierCurve({ x:xm, y:y }, { x:xm, y:y + oy }, { x:x + ox, y:ym }, { x:x, y:ym }), bottomLeft: bezierCurve({ x:xm, y:ym }, { x:xm - ox, y:ym }, { x:x, y:y + oy }, { x:x, y:y }) }; }; })(4 * ((Math.sqrt(2) - 1) / 3)); function bezierCurve(start, startControl, endControl, end) { var lerp = function (a, b, t) { return { x:a.x + (b.x - a.x) * t, y:a.y + (b.y - a.y) * t }; }; return { start: start, startControl: startControl, endControl: endControl, end: end, subdivide: function(t) { var ab = lerp(start, startControl, t), bc = lerp(startControl, endControl, t), cd = lerp(endControl, end, t), abbc = lerp(ab, bc, t), bccd = lerp(bc, cd, t), dest = lerp(abbc, bccd, t); return [bezierCurve(start, ab, abbc, dest), bezierCurve(dest, bccd, cd, end)]; }, curveTo: function(borderArgs) { borderArgs.push(["bezierCurve", startControl.x, startControl.y, endControl.x, endControl.y, end.x, end.y]); }, curveToReversed: function(borderArgs) { borderArgs.push(["bezierCurve", endControl.x, endControl.y, startControl.x, startControl.y, start.x, start.y]); } }; } function parseCorner(borderArgs, radius1, radius2, corner1, corner2, x, y) { if (radius1[0] > 0 || radius1[1] > 0) { borderArgs.push(["line", corner1[0].start.x, corner1[0].start.y]); corner1[0].curveTo(borderArgs); corner1[1].curveTo(borderArgs); } else { borderArgs.push(["line", x, y]); } if (radius2[0] > 0 || radius2[1] > 0) { borderArgs.push(["line", corner2[0].start.x, corner2[0].start.y]); } } function drawSide(borderData, radius1, radius2, outer1, inner1, outer2, inner2) { var borderArgs = []; if (radius1[0] > 0 || radius1[1] > 0) { borderArgs.push(["line", outer1[1].start.x, outer1[1].start.y]); outer1[1].curveTo(borderArgs); } else { borderArgs.push([ "line", borderData.c1[0], borderData.c1[1]]); } if (radius2[0] > 0 || radius2[1] > 0) { borderArgs.push(["line", outer2[0].start.x, outer2[0].start.y]); outer2[0].curveTo(borderArgs); borderArgs.push(["line", inner2[0].end.x, inner2[0].end.y]); inner2[0].curveToReversed(borderArgs); } else { borderArgs.push([ "line", borderData.c2[0], borderData.c2[1]]); borderArgs.push([ "line", borderData.c3[0], borderData.c3[1]]); } if (radius1[0] > 0 || radius1[1] > 0) { borderArgs.push(["line", inner1[1].end.x, inner1[1].end.y]); inner1[1].curveToReversed(borderArgs); } else { borderArgs.push([ "line", borderData.c4[0], borderData.c4[1]]); } return borderArgs; } function calculateCurvePoints(bounds, borderRadius, borders) { var x = bounds.left, y = bounds.top, width = bounds.width, height = bounds.height, tlh = borderRadius[0][0], tlv = borderRadius[0][1], trh = borderRadius[1][0], trv = borderRadius[1][1], brh = borderRadius[2][0], brv = borderRadius[2][1], blh = borderRadius[3][0], blv = borderRadius[3][1], topWidth = width - trh, rightHeight = height - brv, bottomWidth = width - brh, leftHeight = height - blv; return { topLeftOuter: getCurvePoints( x, y, tlh, tlv ).topLeft.subdivide(0.5), topLeftInner: getCurvePoints( x + borders[3].width, y + borders[0].width, Math.max(0, tlh - borders[3].width), Math.max(0, tlv - borders[0].width) ).topLeft.subdivide(0.5), topRightOuter: getCurvePoints( x + topWidth, y, trh, trv ).topRight.subdivide(0.5), topRightInner: getCurvePoints( x + Math.min(topWidth, width + borders[3].width), y + borders[0].width, (topWidth > width + borders[3].width) ? 0 :trh - borders[3].width, trv - borders[0].width ).topRight.subdivide(0.5), bottomRightOuter: getCurvePoints( x + bottomWidth, y + rightHeight, brh, brv ).bottomRight.subdivide(0.5), bottomRightInner: getCurvePoints( x + Math.min(bottomWidth, width + borders[3].width), y + Math.min(rightHeight, height + borders[0].width), Math.max(0, brh - borders[1].width), Math.max(0, brv - borders[2].width) ).bottomRight.subdivide(0.5), bottomLeftOuter: getCurvePoints( x, y + leftHeight, blh, blv ).bottomLeft.subdivide(0.5), bottomLeftInner: getCurvePoints( x + borders[3].width, y + leftHeight, Math.max(0, blh - borders[3].width), Math.max(0, blv - borders[2].width) ).bottomLeft.subdivide(0.5) }; } function getBorderClip(element, borderPoints, borders, radius, bounds) { var backgroundClip = getCSS(element, 'backgroundClip'), borderArgs = []; switch(backgroundClip) { case "content-box": case "padding-box": parseCorner(borderArgs, radius[0], radius[1], borderPoints.topLeftInner, borderPoints.topRightInner, bounds.left + borders[3].width, bounds.top + borders[0].width); parseCorner(borderArgs, radius[1], radius[2], borderPoints.topRightInner, borderPoints.bottomRightInner, bounds.left + bounds.width - borders[1].width, bounds.top + borders[0].width); parseCorner(borderArgs, radius[2], radius[3], borderPoints.bottomRightInner, borderPoints.bottomLeftInner, bounds.left + bounds.width - borders[1].width, bounds.top + bounds.height - borders[2].width); parseCorner(borderArgs, radius[3], radius[0], borderPoints.bottomLeftInner, borderPoints.topLeftInner, bounds.left + borders[3].width, bounds.top + bounds.height - borders[2].width); break; default: parseCorner(borderArgs, radius[0], radius[1], borderPoints.topLeftOuter, borderPoints.topRightOuter, bounds.left, bounds.top); parseCorner(borderArgs, radius[1], radius[2], borderPoints.topRightOuter, borderPoints.bottomRightOuter, bounds.left + bounds.width, bounds.top); parseCorner(borderArgs, radius[2], radius[3], borderPoints.bottomRightOuter, borderPoints.bottomLeftOuter, bounds.left + bounds.width, bounds.top + bounds.height); parseCorner(borderArgs, radius[3], radius[0], borderPoints.bottomLeftOuter, borderPoints.topLeftOuter, bounds.left, bounds.top + bounds.height); break; } return borderArgs; } function parseBorders(element, bounds, borders){ var x = bounds.left, y = bounds.top, width = bounds.width, height = bounds.height, borderSide, bx, by, bw, bh, borderArgs, // http://www.w3.org/TR/css3-background/#the-border-radius borderRadius = getBorderRadiusData(element), borderPoints = calculateCurvePoints(bounds, borderRadius, borders), borderData = { clip: getBorderClip(element, borderPoints, borders, borderRadius, bounds), borders: [] }; for (borderSide = 0; borderSide < 4; borderSide++) { if (borders[borderSide].width > 0) { bx = x; by = y; bw = width; bh = height - (borders[2].width); switch(borderSide) { case 0: // top border bh = borders[0].width; borderArgs = drawSide({ c1: [bx, by], c2: [bx + bw, by], c3: [bx + bw - borders[1].width, by + bh], c4: [bx + borders[3].width, by + bh] }, borderRadius[0], borderRadius[1], borderPoints.topLeftOuter, borderPoints.topLeftInner, borderPoints.topRightOuter, borderPoints.topRightInner); break; case 1: // right border bx = x + width - (borders[1].width); bw = borders[1].width; borderArgs = drawSide({ c1: [bx + bw, by], c2: [bx + bw, by + bh + borders[2].width], c3: [bx, by + bh], c4: [bx, by + borders[0].width] }, borderRadius[1], borderRadius[2], borderPoints.topRightOuter, borderPoints.topRightInner, borderPoints.bottomRightOuter, borderPoints.bottomRightInner); break; case 2: // bottom border by = (by + height) - (borders[2].width); bh = borders[2].width; borderArgs = drawSide({ c1: [bx + bw, by + bh], c2: [bx, by + bh], c3: [bx + borders[3].width, by], c4: [bx + bw - borders[2].width, by] }, borderRadius[2], borderRadius[3], borderPoints.bottomRightOuter, borderPoints.bottomRightInner, borderPoints.bottomLeftOuter, borderPoints.bottomLeftInner); break; case 3: // left border bw = borders[3].width; borderArgs = drawSide({ c1: [bx, by + bh + borders[2].width], c2: [bx, by], c3: [bx + bw, by + borders[0].width], c4: [bx + bw, by + bh] }, borderRadius[3], borderRadius[0], borderPoints.bottomLeftOuter, borderPoints.bottomLeftInner, borderPoints.topLeftOuter, borderPoints.topLeftInner); break; } borderData.borders.push({ args: borderArgs, color: borders[borderSide].color }); } } return borderData; } function createShape(ctx, args) { var shape = ctx.drawShape(); args.forEach(function(border, index) { shape[(index === 0) ? "moveTo" : border[0] + "To" ].apply(null, border.slice(1)); }); return shape; } function renderBorders(ctx, borderArgs, color) { if (color !== "transparent") { ctx.setVariable( "fillStyle", color); createShape(ctx, borderArgs); ctx.fill(); numDraws+=1; } } function renderFormValue (el, bounds, stack){ var valueWrap = doc.createElement('valuewrap'), cssPropertyArray = ['lineHeight','textAlign','fontFamily','color','fontSize','paddingLeft','paddingTop','width','height','border','borderLeftWidth','borderTopWidth'], textValue, textNode; cssPropertyArray.forEach(function(property) { try { valueWrap.style[property] = getCSS(el, property); } catch(e) { // Older IE has issues with "border" h2clog("html2canvas: Parse: Exception caught in renderFormValue: " + e.message); } }); valueWrap.style.borderColor = "black"; valueWrap.style.borderStyle = "solid"; valueWrap.style.display = "block"; valueWrap.style.position = "absolute"; if (/^(submit|reset|button|text|password)$/.test(el.type) || el.nodeName === "SELECT"){ valueWrap.style.lineHeight = getCSS(el, "height"); } valueWrap.style.top = bounds.top + "px"; valueWrap.style.left = bounds.left + "px"; textValue = (el.nodeName === "SELECT") ? (el.options[el.selectedIndex] || 0).text : el.value; if(!textValue) { textValue = el.placeholder; } textNode = doc.createTextNode(textValue); valueWrap.appendChild(textNode); body.appendChild(valueWrap); renderText(el, textNode, stack); body.removeChild(valueWrap); } function drawImage (ctx) { ctx.drawImage.apply(ctx, Array.prototype.slice.call(arguments, 1)); numDraws+=1; } function getPseudoElement(el, which) { var elStyle = window.getComputedStyle(el, which); if(!elStyle || !elStyle.content || elStyle.content === "none" || elStyle.content === "-moz-alt-content" || elStyle.display === "none") { return; } var content = elStyle.content + '', first = content.substr( 0, 1 ); //strips quotes if(first === content.substr( content.length - 1 ) && first.match(/'|"/)) { content = content.substr( 1, content.length - 2 ); } var isImage = content.substr( 0, 3 ) === 'url', elps = document.createElement( isImage ? 'img' : 'span' ); elps.className = pseudoHide + "-before " + pseudoHide + "-after"; Object.keys(elStyle).filter(indexedProperty).forEach(function(prop) { // Prevent assigning of read only CSS Rules, ex. length, parentRule try { elps.style[prop] = elStyle[prop]; } catch (e) { h2clog(['Tried to assign readonly property ', prop, 'Error:', e]); } }); if(isImage) { elps.src = _html2canvas.Util.parseBackgroundImage(content)[0].args[0]; } else { elps.innerHTML = content; } return elps; } function indexedProperty(property) { return (isNaN(window.parseInt(property, 10))); } function injectPseudoElements(el, stack) { var before = getPseudoElement(el, ':before'), after = getPseudoElement(el, ':after'); if(!before && !after) { return; } if(before) { el.className += " " + pseudoHide + "-before"; el.parentNode.insertBefore(before, el); parseElement(before, stack, true); el.parentNode.removeChild(before); el.className = el.className.replace(pseudoHide + "-before", "").trim(); } if (after) { el.className += " " + pseudoHide + "-after"; el.appendChild(after); parseElement(after, stack, true); el.removeChild(after); el.className = el.className.replace(pseudoHide + "-after", "").trim(); } } function renderBackgroundRepeat(ctx, image, backgroundPosition, bounds) { var offsetX = Math.round(bounds.left + backgroundPosition.left), offsetY = Math.round(bounds.top + backgroundPosition.top); ctx.createPattern(image); ctx.translate(offsetX, offsetY); ctx.fill(); ctx.translate(-offsetX, -offsetY); } function backgroundRepeatShape(ctx, image, backgroundPosition, bounds, left, top, width, height) { var args = []; args.push(["line", Math.round(left), Math.round(top)]); args.push(["line", Math.round(left + width), Math.round(top)]); args.push(["line", Math.round(left + width), Math.round(height + top)]); args.push(["line", Math.round(left), Math.round(height + top)]); createShape(ctx, args); ctx.save(); ctx.clip(); renderBackgroundRepeat(ctx, image, backgroundPosition, bounds); ctx.restore(); } function renderBackgroundColor(ctx, backgroundBounds, bgcolor) { renderRect( ctx, backgroundBounds.left, backgroundBounds.top, backgroundBounds.width, backgroundBounds.height, bgcolor ); } function renderBackgroundRepeating(el, bounds, ctx, image, imageIndex) { var backgroundSize = _html2canvas.Util.BackgroundSize(el, bounds, image, imageIndex), backgroundPosition = _html2canvas.Util.BackgroundPosition(el, bounds, image, imageIndex, backgroundSize), backgroundRepeat = getCSS(el, "backgroundRepeat").split(",").map(function(value) { return value.trim(); }); image = resizeImage(image, backgroundSize); backgroundRepeat = backgroundRepeat[imageIndex] || backgroundRepeat[0]; switch (backgroundRepeat) { case "repeat-x": backgroundRepeatShape(ctx, image, backgroundPosition, bounds, bounds.left, bounds.top + backgroundPosition.top, 99999, image.height); break; case "repeat-y": backgroundRepeatShape(ctx, image, backgroundPosition, bounds, bounds.left + backgroundPosition.left, bounds.top, image.width, 99999); break; case "no-repeat": backgroundRepeatShape(ctx, image, backgroundPosition, bounds, bounds.left + backgroundPosition.left, bounds.top + backgroundPosition.top, image.width, image.height); break; default: renderBackgroundRepeat(ctx, image, backgroundPosition, { top: bounds.top, left: bounds.left, width: image.width, height: image.height }); break; } } function renderBackgroundImage(element, bounds, ctx) { var backgroundImage = getCSS(element, "backgroundImage"), backgroundImages = _html2canvas.Util.parseBackgroundImage(backgroundImage), image, imageIndex = backgroundImages.length; while(imageIndex--) { backgroundImage = backgroundImages[imageIndex]; if (!backgroundImage.args || backgroundImage.args.length === 0) { continue; } var key = backgroundImage.method === 'url' ? backgroundImage.args[0] : backgroundImage.value; image = loadImage(key); // TODO add support for background-origin if (image) { renderBackgroundRepeating(element, bounds, ctx, image, imageIndex); } else { h2clog("html2canvas: Error loading background:", backgroundImage); } } } function resizeImage(image, bounds) { if(image.width === bounds.width && image.height === bounds.height) { return image; } var ctx, canvas = doc.createElement('canvas'); canvas.width = bounds.width; canvas.height = bounds.height; ctx = canvas.getContext("2d"); drawImage(ctx, image, 0, 0, image.width, image.height, 0, 0, bounds.width, bounds.height ); return canvas; } function setOpacity(ctx, element, parentStack) { var opacity = getCSS(element, "opacity") * ((parentStack) ? parentStack.opacity : 1); ctx.setVariable("globalAlpha", opacity); return opacity; } function createStack(element, parentStack, bounds) { var ctx = h2cRenderContext((!parentStack) ? documentWidth() : bounds.width , (!parentStack) ? documentHeight() : bounds.height), stack = { ctx: ctx, zIndex: setZ(getCSS(element, "zIndex"), (parentStack) ? parentStack.zIndex : null), opacity: setOpacity(ctx, element, parentStack), cssPosition: getCSS(element, "position"), borders: getBorderData(element), clip: (parentStack && parentStack.clip) ? _html2canvas.Util.Extend( {}, parentStack.clip ) : null }; // TODO correct overflow for absolute content residing under a static position if (options.useOverflow === true && /(hidden|scroll|auto)/.test(getCSS(element, "overflow")) === true && /(BODY)/i.test(element.nodeName) === false){ stack.clip = (stack.clip) ? clipBounds(stack.clip, bounds) : bounds; } stack.zIndex.children.push(stack); return stack; } function getBackgroundBounds(borders, bounds, clip) { var backgroundBounds = { left: bounds.left + borders[3].width, top: bounds.top + borders[0].width, width: bounds.width - (borders[1].width + borders[3].width), height: bounds.height - (borders[0].width + borders[2].width) }; if (clip) { backgroundBounds = clipBounds(backgroundBounds, clip); } return backgroundBounds; } function renderElement(element, parentStack, pseudoElement){ var bounds = _html2canvas.Util.Bounds(element), image, bgcolor = (ignoreElementsRegExp.test(element.nodeName)) ? "#efefef" : getCSS(element, "backgroundColor"), stack = createStack(element, parentStack, bounds), borders = stack.borders, ctx = stack.ctx, backgroundBounds = getBackgroundBounds(borders, bounds, stack.clip), borderData = parseBorders(element, bounds, borders); createShape(ctx, borderData.clip); ctx.save(); ctx.clip(); if (backgroundBounds.height > 0 && backgroundBounds.width > 0){ renderBackgroundColor(ctx, bounds, bgcolor); renderBackgroundImage(element, backgroundBounds, ctx); } ctx.restore(); borderData.borders.forEach(function(border) { renderBorders(ctx, border.args, border.color); }); if (!pseudoElement) { injectPseudoElements(element, stack); } switch(element.nodeName){ case "IMG": if ((image = loadImage(element.getAttribute('src')))) { renderImage(ctx, element, image, bounds, borders); } else { h2clog("html2canvas: Error loading <img>:" + element.getAttribute('src')); } break; case "INPUT": // TODO add all relevant type's, i.e. HTML5 new stuff // todo add support for placeholder attribute for browsers which support it if (/^(text|url|email|submit|button|reset)$/.test(element.type) && (element.value || element.placeholder || "").length > 0){ renderFormValue(element, bounds, stack); } break; case "TEXTAREA": if ((element.value || element.placeholder || "").length > 0){ renderFormValue(element, bounds, stack); } break; case "SELECT": if ((element.options||element.placeholder || "").length > 0){ renderFormValue(element, bounds, stack); } break; case "LI": renderListItem(element, stack, backgroundBounds); break; case "CANVAS": renderImage(ctx, element, element, bounds, borders); break; } return stack; } function isElementVisible(element) { return (getCSS(element, 'display') !== "none" && getCSS(element, 'visibility') !== "hidden" && !element.hasAttribute("data-html2canvas-ignore")); } function parseElement (el, stack, pseudoElement) { if (isElementVisible(el)) { stack = renderElement(el, stack, pseudoElement) || stack; if (!ignoreElementsRegExp.test(el.nodeName)) { _html2canvas.Util.Children(el).forEach(function(node) { if (node.nodeType === 1) { parseElement(node, stack, pseudoElement); } else if (node.nodeType === 3) { renderText(el, node, stack); } }); } } } function svgDOMRender(body, stack) { var img = new Image(), docWidth = documentWidth(), docHeight = documentHeight(), html = ""; function parseDOM(el) { var children = _html2canvas.Util.Children( el ), len = children.length, attr, a, alen, elm, i; for ( i = 0; i < len; i+=1 ) { elm = children[ i ]; if ( elm.nodeType === 3 ) { // Text node html += elm.nodeValue.replace(/</g,"<").replace(/>/g,">"); } else if ( elm.nodeType === 1 ) { // Element if ( !/^(script|meta|title)$/.test(elm.nodeName.toLowerCase()) ) { html += "<" + elm.nodeName.toLowerCase(); // add attributes if ( elm.hasAttributes() ) { attr = elm.attributes; alen = attr.length; for ( a = 0; a < alen; a+=1 ) { html += " " + attr[ a ].name + '="' + attr[ a ].value + '"'; } } html += '>'; parseDOM( elm ); html += "</" + elm.nodeName.toLowerCase() + ">"; } } } } parseDOM(body); img.src = [ "data:image/svg+xml,", "<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='" + docWidth + "' height='" + docHeight + "'>", "<foreignObject width='" + docWidth + "' height='" + docHeight + "'>", "<html xmlns='http://www.w3.org/1999/xhtml' style='margin:0;'>", html.replace(/\#/g,"%23"), "</html>", "</foreignObject>", "</svg>" ].join(""); img.onload = function() { stack.svgRender = img; }; } function init() { var stack = renderElement(element, null); if (support.svgRendering) { svgDOMRender(document.documentElement, stack); } Array.prototype.slice.call(element.children, 0).forEach(function(childElement) { parseElement(childElement, stack); }); stack.backgroundColor = getCSS(document.documentElement, "backgroundColor"); body.removeChild(hidePseudoElements); return stack; } return init(); }; function h2czContext(zindex) { return { zindex: zindex, children: [] }; } _html2canvas.Preload = function( options ) { var images = { numLoaded: 0, // also failed are counted here numFailed: 0, numTotal: 0, cleanupDone: false }, pageOrigin, methods, i, count = 0, element = options.elements[0] || document.body, doc = element.ownerDocument, domImages = element.getElementsByTagName('img'), // Fetch images of the present element only imgLen = domImages.length, link = doc.createElement("a"), supportCORS = (function( img ){ return (img.crossOrigin !== undefined); })(new Image()), timeoutTimer; link.href = window.location.href; pageOrigin = link.protocol + link.host; function isSameOrigin(url){ link.href = url; link.href = link.href; // YES, BELIEVE IT OR NOT, that is required for IE9 - http://jsfiddle.net/niklasvh/2e48b/ var origin = link.protocol + link.host; return (origin === pageOrigin); } function start(){ h2clog("html2canvas: start: images: " + images.numLoaded + " / " + images.numTotal + " (failed: " + images.numFailed + ")"); if (!images.firstRun && images.numLoaded >= images.numTotal){ h2clog("Finished loading images: # " + images.numTotal + " (failed: " + images.numFailed + ")"); if (typeof options.complete === "function"){ options.complete(images); } } } // TODO modify proxy to serve images with CORS enabled, where available function proxyGetImage(url, img, imageObj){ var callback_name, scriptUrl = options.proxy, script; link.href = url; url = link.href; // work around for pages with base href="" set - WARNING: this may change the url callback_name = 'html2canvas_' + (count++); imageObj.callbackname = callback_name; if (scriptUrl.indexOf("?") > -1) { scriptUrl += "&"; } else { scriptUrl += "?"; } scriptUrl += 'url=' + encodeURIComponent(url) + '&callback=' + callback_name; script = doc.createElement("script"); window[callback_name] = function(a){ if (a.substring(0,6) === "error:"){ imageObj.succeeded = false; images.numLoaded++; images.numFailed++; start(); } else { setImageLoadHandlers(img, imageObj); img.src = a; } 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) try { delete window[callback_name]; // for all browser that support this } catch(ex) {} script.parentNode.removeChild(script); script = null; delete imageObj.script; delete imageObj.callbackname; }; script.setAttribute("type", "text/javascript"); script.setAttribute("src", scriptUrl); imageObj.script = script; window.document.body.appendChild(script); } function loadPseudoElement(element, type) { var style = window.getComputedStyle(element, type), content = style.content; if (content.substr(0, 3) === 'url') { methods.loadImage(_html2canvas.Util.parseBackgroundImage(content)[0].args[0]); } loadBackgroundImages(style.backgroundImage, element); } function loadPseudoElementImages(element) { loadPseudoElement(element, ":before"); loadPseudoElement(element, ":after"); } function loadGradientImage(backgroundImage, bounds) { var img = _html2canvas.Generate.Gradient(backgroundImage, bounds); if (img !== undefined){ images[backgroundImage] = { img: img, succeeded: true }; images.numTotal++; images.numLoaded++; start(); } } function invalidBackgrounds(background_image) { return (background_image && background_image.method && background_image.args && background_image.args.length > 0 ); } function loadBackgroundImages(background_image, el) { var bounds; _html2canvas.Util.parseBackgroundImage(background_image).filter(invalidBackgrounds).forEach(function(background_image) { if (background_image.method === 'url') { methods.loadImage(background_image.args[0]); } else if(background_image.method.match(/\-?gradient$/)) { if(bounds === undefined) { bounds = _html2canvas.Util.Bounds(el); } loadGradientImage(background_image.value, bounds); } }); } function getImages (el) { var elNodeType = false; // Firefox fails with permission denied on pages with iframes try { _html2canvas.Util.Children(el).forEach(function(img) { getImages(img); }); } catch( e ) {} try { elNodeType = el.nodeType; } catch (ex) { elNodeType = false; h2clog("html2canvas: failed to access some element's nodeType - Exception: " + ex.message); } if (elNodeType === 1 || elNodeType === undefined) { loadPseudoElementImages(el); try { loadBackgroundImages(_html2canvas.Util.getCSS(el, 'backgroundImage'), el); } catch(e) { h2clog("html2canvas: failed to get background-image - Exception: " + e.message); } loadBackgroundImages(el); } } function setImageLoadHandlers(img, imageObj) { img.onload = function() { if ( imageObj.timer !== undefined ) { // CORS succeeded window.clearTimeout( imageObj.timer ); } images.numLoaded++; imageObj.succeeded = true; img.onerror = img.onload = null; start(); }; img.onerror = function() { if (img.crossOrigin === "anonymous") { // CORS failed window.clearTimeout( imageObj.timer ); // let's try with proxy instead if ( options.proxy ) { var src = img.src; img = new Image(); imageObj.img = img; img.src = src; proxyGetImage( img.src, img, imageObj ); return; } } images.numLoaded++; images.numFailed++; imageObj.succeeded = false; img.onerror = img.onload = null; start(); }; } methods = { loadImage: function( src ) { var img, imageObj; if ( src && images[src] === undefined ) { img = new Image(); if ( src.match(/data:image\/.*;base64,/i) ) { img.src = src.replace(/url\(['"]{0,}|['"]{0,}\)$/ig, ''); imageObj = images[src] = { img: img }; images.numTotal++; setImageLoadHandlers(img, imageObj); } else if ( isSameOrigin( src ) || options.allowTaint === true ) { imageObj = images[src] = { img: img }; images.numTotal++; setImageLoadHandlers(img, imageObj); img.src = src; } else if ( supportCORS && !options.allowTaint && options.useCORS ) { // attempt to load with CORS img.crossOrigin = "anonymous"; imageObj = images[src] = { img: img }; images.numTotal++; setImageLoadHandlers(img, imageObj); img.src = src; // work around for https://bugs.webkit.org/show_bug.cgi?id=80028 img.customComplete = function () { if (!this.img.complete) { this.timer = window.setTimeout(this.img.customComplete, 100); } else { this.img.onerror(); } }.bind(imageObj); img.customComplete(); } else if ( options.proxy ) { imageObj = images[src] = { img: img }; images.numTotal++; proxyGetImage( src, img, imageObj ); } } }, cleanupDOM: function(cause) { var img, src; if (!images.cleanupDone) { if (cause && typeof cause === "string") { h2clog("html2canvas: Cleanup because: " + cause); } else { h2clog("html2canvas: Cleanup after timeout: " + options.timeout + " ms."); } for (src in images) { if (images.hasOwnProperty(src)) { img = images[src]; if (typeof img === "object" && img.callbackname && img.succeeded === undefined) { // cancel proxy image request 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) try { delete window[img.callbackname]; // for all browser that support this } catch(ex) {} if (img.script && img.script.parentNode) { img.script.setAttribute("src", "about:blank"); // try to cancel running request img.script.parentNode.removeChild(img.script); } images.numLoaded++; images.numFailed++; h2clog("html2canvas: Cleaned up failed img: '" + src + "' Steps: " + images.numLoaded + " / " + images.numTotal); } } } // cancel any pending requests if(window.stop !== undefined) { window.stop(); } else if(document.execCommand !== undefined) { document.execCommand("Stop", false); } if (document.close !== undefined) { document.close(); } images.cleanupDone = true; if (!(cause && typeof cause === "string")) { start(); } } }, renderingDone: function() { if (timeoutTimer) { window.clearTimeout(timeoutTimer); } } }; if (options.timeout > 0) { timeoutTimer = window.setTimeout(methods.cleanupDOM, options.timeout); } h2clog('html2canvas: Preload starts: finding background-images'); images.firstRun = true; getImages(element); h2clog('html2canvas: Preload: Finding images'); // load <img> images for (i = 0; i < imgLen; i+=1){ methods.loadImage( domImages[i].getAttribute( "src" ) ); } images.firstRun = false; h2clog('html2canvas: Preload: Done.'); if ( images.numTotal === images.numLoaded ) { start(); } return methods; }; _html2canvas.Renderer = function(parseQueue, options){ function createRenderQueue(parseQueue) { var queue = []; var sortZ = function(zStack){ var subStacks = [], stackValues = []; zStack.children.forEach(function(stackChild) { if (stackChild.children && stackChild.children.length > 0){ subStacks.push(stackChild); stackValues.push(stackChild.zindex); } else { queue.push(stackChild); } }); stackValues.sort(function(a, b) { return a - b; }); stackValues.forEach(function(zValue) { var index; subStacks.some(function(stack, i){ index = i; return (stack.zindex === zValue); }); sortZ(subStacks.splice(index, 1)[0]); }); }; sortZ(parseQueue.zIndex); return queue; } function getRenderer(rendererName) { var renderer; if (typeof options.renderer === "string" && _html2canvas.Renderer[rendererName] !== undefined) { renderer = _html2canvas.Renderer[rendererName](options); } else if (typeof rendererName === "function") { renderer = rendererName(options); } else { throw new Error("Unknown renderer"); } if ( typeof renderer !== "function" ) { throw new Error("Invalid renderer defined"); } return renderer; } return getRenderer(options.renderer)(parseQueue, options, document, createRenderQueue(parseQueue), _html2canvas); }; _html2canvas.Util.Support = function (options, doc) { function supportSVGRendering() { var img = new Image(), canvas = doc.createElement("canvas"), ctx = (canvas.getContext === undefined) ? false : canvas.getContext("2d"); if (ctx === false) { return false; } canvas.width = canvas.height = 10; img.src = [ "data:image/svg+xml,", "<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'>", "<foreignObject width='10' height='10'>", "<div xmlns='http://www.w3.org/1999/xhtml' style='width:10;height:10;'>", "sup", "</div>", "</foreignObject>", "</svg>" ].join(""); try { ctx.drawImage(img, 0, 0); canvas.toDataURL(); } catch(e) { return false; } h2clog('html2canvas: Parse: SVG powered rendering available'); return true; } // Test whether we can use ranges to measure bounding boxes // Opera doesn't provide valid bounds.height/bottom even though it supports the method. function supportRangeBounds() { var r, testElement, rangeBounds, rangeHeight, support = false; if (doc.createRange) { r = doc.createRange(); if (r.getBoundingClientRect) { testElement = doc.createElement('boundtest'); testElement.style.height = "123px"; testElement.style.display = "block"; doc.body.appendChild(testElement); r.selectNode(testElement); rangeBounds = r.getBoundingClientRect(); rangeHeight = rangeBounds.height; if (rangeHeight === 123) { support = true; } doc.body.removeChild(testElement); } } return support; } return { rangeBounds: supportRangeBounds(), svgRendering: options.svgRendering && supportSVGRendering() }; }; window.html2canvas = function(elements, opts) { elements = (elements.length) ? elements : [elements]; var queue, canvas, options = { // general logging: false, elements: elements, background: "#fff", // preload options proxy: null, timeout: 0, // no timeout useCORS: false, // try to load images as CORS (where available), before falling back to proxy allowTaint: false, // whether to allow images to taint the canvas, won't need proxy if set to true // parse options svgRendering: false, // use svg powered rendering where available (FF11+) ignoreElements: "IFRAME|OBJECT|PARAM", useOverflow: true, letterRendering: false, chinese: false, // render options width: null, height: null, taintTest: true, // do a taint test with all images before applying to canvas renderer: "Canvas", imageType: 'png' }; options = _html2canvas.Util.Extend(opts, options); _html2canvas.logging = options.logging; options.complete = function( images ) { if (typeof options.onpreloaded === "function") { if ( options.onpreloaded( images ) === false ) { return; } } queue = _html2canvas.Parse( images, options ); if (typeof options.onparsed === "function") { if ( options.onparsed( queue ) === false ) { return; } } canvas = _html2canvas.Renderer( queue, options ); if (typeof options.onrendered === "function") { if (options.imageType) { var _imageType = "image/"; switch(options.imageType) { case "jpg": case "jpeg": _imageType += "jpeg"; break; default: _imageType += "png"; break; } var image = canvas.toDataURL(_imageType); options.onrendered( image ); } else { options.onrendered( canvas ); } } }; // for pages without images, we still want this to be async, i.e. return methods before executing window.setTimeout( function(){ _html2canvas.Preload( options ); }, 0 ); return { render: function( queue, opts ) { return _html2canvas.Renderer( queue, _html2canvas.Util.Extend(opts, options) ); }, parse: function( images, opts ) { return _html2canvas.Parse( images, _html2canvas.Util.Extend(opts, options) ); }, preload: function( opts ) { return _html2canvas.Preload( _html2canvas.Util.Extend(opts, options) ); }, log: h2clog }; }; window.html2canvas.log = h2clog; // for renderers window.html2canvas.Renderer = { Canvas: undefined // We are assuming this will be used }; _html2canvas.Renderer.Canvas = function(options) { options = options || {}; var doc = document, safeImages = [], testCanvas = document.createElement("canvas"), testctx = testCanvas.getContext("2d"), canvas = options.canvas || doc.createElement('canvas'); function createShape(ctx, args) { ctx.beginPath(); args.forEach(function(arg) { ctx[arg.name].apply(ctx, arg['arguments']); }); ctx.closePath(); } function safeImage(item) { if (safeImages.indexOf(item['arguments'][0].src ) === -1) { testctx.drawImage(item['arguments'][0], 0, 0); try { testctx.getImageData(0, 0, 1, 1); } catch(e) { testCanvas = doc.createElement("canvas"); testctx = testCanvas.getContext("2d"); return false; } safeImages.push(item['arguments'][0].src); } return true; } function isTransparent(backgroundColor) { return (backgroundColor === "transparent" || backgroundColor === "rgba(0, 0, 0, 0)"); } function renderItem(ctx, item) { switch(item.type){ case "variable": ctx[item.name] = item['arguments']; break; case "function": if (item.name === "createPattern") { if (item['arguments'][0].width > 0 && item['arguments'][0].height > 0) { try { ctx.fillStyle = ctx.createPattern(item['arguments'][0], "repeat"); } catch(e) { h2clog("html2canvas: Renderer: Error creating pattern", e.message); } } } else if (item.name === "drawShape") { createShape(ctx, item['arguments']); } else if (item.name === "drawImage") { if (item['arguments'][8] > 0 && item['arguments'][7] > 0) { if (!options.taintTest || (options.taintTest && safeImage(item))) { ctx.drawImage.apply( ctx, item['arguments'] ); } } } else { ctx[item.name].apply(ctx, item['arguments']); } break; } } return function(zStack, options, doc, queue, _html2canvas) { var ctx = canvas.getContext("2d"), storageContext, i, queueLen, newCanvas, bounds, fstyle; canvas.width = canvas.style.width = options.width || zStack.ctx.width; canvas.height = canvas.style.height = options.height || zStack.ctx.height; fstyle = ctx.fillStyle; ctx.fillStyle = (isTransparent(zStack.backgroundColor) && options.background !== undefined) ? options.background : zStack.backgroundColor; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.fillStyle = fstyle; if ( options.svgRendering && zStack.svgRender !== undefined ) { // TODO: enable async rendering to support this ctx.drawImage( zStack.svgRender, 0, 0 ); } else { for ( i = 0, queueLen = queue.length; i < queueLen; i+=1 ) { storageContext = queue.splice(0, 1)[0]; storageContext.canvasPosition = storageContext.canvasPosition || {}; // set common settings for canvas ctx.textBaseline = "bottom"; if (storageContext.clip){ ctx.save(); ctx.beginPath(); // console.log(storageContext); ctx.rect(storageContext.clip.left, storageContext.clip.top, storageContext.clip.width, storageContext.clip.height); ctx.clip(); } if (storageContext.ctx.storage) { storageContext.ctx.storage.forEach(renderItem.bind(null, ctx)); } if (storageContext.clip){ ctx.restore(); } } } h2clog("html2canvas: Renderer: Canvas renderer done - returning canvas obj"); queueLen = options.elements.length; if (queueLen === 1) { if (typeof options.elements[0] === "object" && options.elements[0].nodeName !== "BODY") { // crop image to the bounds of selected (single) element bounds = _html2canvas.Util.Bounds(options.elements[0]); newCanvas = doc.createElement('canvas'); newCanvas.width = bounds.width; newCanvas.height = bounds.height; ctx = newCanvas.getContext("2d"); ctx.drawImage(canvas, bounds.left, bounds.top, bounds.width, bounds.height, 0, 0, bounds.width, bounds.height); canvas = null; return newCanvas; } } return canvas; }; }; })(window,document);