Created
May 27, 2013 16:05
-
-
Save polidog/5657823 to your computer and use it in GitHub Desktop.
This file contains 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 characters
/* | |
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); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment