/* | |
html2canvas 0.4.1 <http://html2canvas.hertzen.com> | |
Copyright (c) 2013 Niklas von Hertzen | |
Released under MIT License | |
*/ | |
(function(window, document, undefined){ | |
"use strict"; | |
var _html2canvas = {}, | |
previousElement, | |
computedCSS, | |
html2canvas; | |
_html2canvas.Util = {}; | |
_html2canvas.Util.log = function(a) { | |
if (_html2canvas.logging && window.console && window.console.log) { | |
window.console.log(a); | |
} | |
}; | |
_html2canvas.Util.trimText = (function(isNative){ | |
return function(input) { | |
return isNative ? isNative.apply(input) : ((input || '') + '').replace( /^\s+|\s+$/g , '' ); | |
}; | |
})(String.prototype.trim); | |
_html2canvas.Util.asFloat = function(v) { | |
return parseFloat(v); | |
}; | |
(function() { | |
// TODO: support all possible length values | |
var TEXT_SHADOW_PROPERTY = /((rgba|rgb)\([^\)]+\)(\s-?\d+px){0,})/g; | |
var TEXT_SHADOW_VALUES = /(-?\d+px)|(#.+)|(rgb\(.+\))|(rgba\(.+\))/g; | |
_html2canvas.Util.parseTextShadows = function (value) { | |
if (!value || value === 'none') { | |
return []; | |
} | |
// find multiple shadow declarations | |
var shadows = value.match(TEXT_SHADOW_PROPERTY), | |
results = []; | |
for (var i = 0; shadows && (i < shadows.length); i++) { | |
var s = shadows[i].match(TEXT_SHADOW_VALUES); | |
results.push({ | |
color: s[0], | |
offsetX: s[1] ? s[1].replace('px', '') : 0, | |
offsetY: s[2] ? s[2].replace('px', '') : 0, | |
blur: s[3] ? s[3].replace('px', '') : 0 | |
}); | |
} | |
return results; | |
}; | |
})(); | |
_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 (element) { | |
var clientRect, bounds = {}; | |
if (element.getBoundingClientRect){ | |
clientRect = element.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; | |
bounds.width = element.offsetWidth; | |
bounds.height = element.offsetHeight; | |
} | |
return bounds; | |
}; | |
// TODO ideally, we'd want everything to go through this function instead of Util.Bounds, | |
// but would require further work to calculate the correct positions for elements with offsetParents | |
_html2canvas.Util.OffsetBounds = function (element) { | |
var parent = element.offsetParent ? _html2canvas.Util.OffsetBounds(element.offsetParent) : {top: 0, left: 0}; | |
return { | |
top: element.offsetTop + parent.top, | |
bottom: element.offsetTop + element.offsetHeight + parent.top, | |
left: element.offsetLeft + parent.left, | |
width: element.offsetWidth, | |
height: element.offsetHeight | |
}; | |
}; | |
function toPX(element, attribute, value ) { | |
var rsLeft = element.runtimeStyle && element.runtimeStyle[attribute], | |
left, | |
style = element.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( value ) && /^-?\d/.test(value) ) { | |
// Remember the original values | |
left = style.left; | |
// Put in the new values to get a computed value out | |
if (rsLeft) { | |
element.runtimeStyle.left = element.currentStyle.left; | |
} | |
style.left = attribute === "fontSize" ? "1em" : (value || 0); | |
value = style.pixelLeft + "px"; | |
// Revert the changed values | |
style.left = left; | |
if (rsLeft) { | |
element.runtimeStyle.left = rsLeft; | |
} | |
} | |
if (!/^(thin|medium|thick)$/i.test(value)) { | |
return Math.round(parseFloat(value)) + "px"; | |
} | |
return value; | |
} | |
function asInt(val) { | |
return parseInt(val, 10); | |
} | |
function parseBackgroundSizePosition(value, element, attribute, index) { | |
value = (value || '').split(','); | |
value = value[index || 0] || value[0] || 'auto'; | |
value = _html2canvas.Util.trimText(value).split(' '); | |
if(attribute === 'backgroundSize' && (!value[0] || value[0].match(/cover|contain|auto/))) { | |
//these values will be handled in the parent function | |
} else { | |
value[0] = (value[0].indexOf( "%" ) === -1) ? toPX(element, attribute + "X", value[0]) : value[0]; | |
if(value[1] === undefined) { | |
if(attribute === 'backgroundSize') { | |
value[1] = 'auto'; | |
return value; | |
} else { | |
// IE 9 doesn't return double digit always | |
value[1] = value[0]; | |
} | |
} | |
value[1] = (value[1].indexOf("%") === -1) ? toPX(element, attribute + "Y", value[1]) : value[1]; | |
} | |
return value; | |
} | |
_html2canvas.Util.getCSS = function (element, attribute, index) { | |
if (previousElement !== element) { | |
computedCSS = document.defaultView.getComputedStyle(element, null); | |
} | |
var value = computedCSS[attribute]; | |
if (/^background(Size|Position)$/.test(attribute)) { | |
return parseBackgroundSizePosition(value, element, attribute, index); | |
} else if (/border(Top|Bottom)(Left|Right)Radius/.test(attribute)) { | |
var arr = value.split(" "); | |
if (arr.length <= 1) { | |
arr[1] = arr[0]; | |
} | |
return arr.map(asInt); | |
} | |
return value; | |
}; | |
_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 (/contain|cover/.test(bgposition[0])) { | |
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) { | |
_html2canvas.Util.log("html2canvas.Util.Children failed with exception: " + ex.message); | |
children = []; | |
} | |
return children; | |
}; | |
_html2canvas.Util.isTransparent = function(backgroundColor) { | |
return (backgroundColor === "transparent" || backgroundColor === "rgba(0, 0, 0, 0)"); | |
}; | |
_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(){ | |
var Util = _html2canvas.Util, | |
Generate = {}; | |
_html2canvas.Generate = 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) | |
*/ | |
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; | |
}; | |
function addScrollStops(grad) { | |
return function(colorStop) { | |
try { | |
grad.addColorStop(colorStop.stop, colorStop.color); | |
} | |
catch(e) { | |
Util.log(['failed to add color stop: ', e, '; tried to add: ', colorStop]); | |
} | |
}; | |
} | |
Generate.Gradient = function(src, bounds) { | |
if(bounds.width === 0 || bounds.height === 0) { | |
return; | |
} | |
var canvas = document.createElement('canvas'), | |
ctx = canvas.getContext('2d'), | |
gradient, grad; | |
canvas.width = bounds.width; | |
canvas.height = bounds.height; | |
// TODO: add support for multi defined background gradients | |
gradient = _html2canvas.Generate.parseGradient(src, bounds); | |
if(gradient) { | |
switch(gradient.type) { | |
case 'linear': | |
grad = ctx.createLinearGradient(gradient.x0, gradient.y0, gradient.x1, gradient.y1); | |
gradient.colorStops.forEach(addScrollStops(grad)); | |
ctx.fillStyle = grad; | |
ctx.fillRect(0, 0, bounds.width, bounds.height); | |
break; | |
case 'circle': | |
grad = ctx.createRadialGradient(gradient.cx, gradient.cy, 0, gradient.cx, gradient.cy, gradient.rx); | |
gradient.colorStops.forEach(addScrollStops(grad)); | |
ctx.fillStyle = grad; | |
ctx.fillRect(0, 0, bounds.width, bounds.height); | |
break; | |
case 'ellipse': | |
var canvasRadial = document.createElement('canvas'), | |
ctxRadial = canvasRadial.getContext('2d'), | |
ri = Math.max(gradient.rx, gradient.ry), | |
di = ri * 2; | |
canvasRadial.width = canvasRadial.height = di; | |
grad = ctxRadial.createRadialGradient(gradient.rx, gradient.ry, 0, gradient.rx, gradient.ry, ri); | |
gradient.colorStops.forEach(addScrollStops(grad)); | |
ctxRadial.fillStyle = grad; | |
ctxRadial.fillRect(0, 0, di, di); | |
ctx.fillStyle = gradient.colorStops[gradient.colorStops.length - 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); | |
break; | |
} | |
} | |
return canvas; | |
}; | |
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; | |
}; | |
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 | |
}); | |
return 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, | |
Util = _html2canvas.Util, | |
support = Util.Support(options, doc), | |
ignoreElementsRegExp = new RegExp("(" + options.ignoreElements + ")"), | |
body = doc.body, | |
getCSS = 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 capitalize(m, p1, p2) { | |
if (m.length > 0) { | |
return p1 + p2.toUpperCase(); | |
} | |
} | |
function textTransform (text, transform) { | |
switch(transform){ | |
case "lowercase": | |
return text.toLowerCase(); | |
case "capitalize": | |
return text.replace( /(^|\s|:|-|\(|\))([a-z])/g, capitalize); | |
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 && 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"), | |
shadows = Util.parseTextShadows(getCSS(el, "textShadow")); | |
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 (shadows.length) { | |
// TODO: support multiple text shadows | |
// apply the first text shadow | |
ctx.setVariable("shadowColor", shadows[0].color); | |
ctx.setVariable("shadowOffsetX", shadows[0].offsetX); | |
ctx.setVariable("shadowOffsetY", shadows[0].offsetY); | |
ctx.setVariable("shadowBlur", shadows[0].blur); | |
} | |
if (text_decoration !== "none"){ | |
return 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, transform) { | |
var bounds; | |
if (support.rangeBounds && !transform) { | |
if (textDecoration !== "none" || 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, transform); | |
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, transform) { | |
var parent = oldTextNode.parentNode, | |
wrapElement = doc.createElement('wrapper'), | |
backupText = oldTextNode.cloneNode(true); | |
wrapElement.appendChild(oldTextNode.cloneNode(true)); | |
parent.replaceChild(wrapElement, oldTextNode); | |
var bounds = transform ? Util.OffsetBounds(wrapElement) : 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 (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), stack.transform.matrix); | |
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 = 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; | |
} | |
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]; | |
return (img && img.succeeded === true) ? img.img : 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(element, stack, parentStack){ | |
var newContext, | |
isPositioned = stack.cssPosition !== 'static', | |
zIndex = isPositioned ? getCSS(element, 'zIndex') : 'auto', | |
opacity = getCSS(element, 'opacity'), | |
isFloated = getCSS(element, 'cssFloat') !== 'none'; | |
// https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context | |
// When a new stacking context should be created: | |
// the root element (HTML), | |
// positioned (absolutely or relatively) with a z-index value other than "auto", | |
// elements with an opacity value less than 1. (See the specification for opacity), | |
// on mobile WebKit and Chrome 22+, position: fixed always creates a new stacking context, even when z-index is "auto" (See this post) | |
stack.zIndex = newContext = h2czContext(zIndex); | |
newContext.isPositioned = isPositioned; | |
newContext.isFloated = isFloated; | |
newContext.opacity = opacity; | |
newContext.ownStacking = (zIndex !== 'auto' || opacity < 1); | |
if (parentStack) { | |
parentStack.zIndex.children.push(stack); | |
} | |
} | |
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[3].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" | |
Util.log("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) { | |
Util.log(['Tried to assign readonly property ', prop, 'Error:', e]); | |
} | |
}); | |
if(isImage) { | |
elps.src = 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 = Util.BackgroundSize(el, bounds, image, imageIndex), | |
backgroundPosition = Util.BackgroundPosition(el, bounds, image, imageIndex, backgroundSize), | |
backgroundRepeat = getCSS(el, "backgroundRepeat").split(",").map(Util.trimText); | |
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 = 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 { | |
Util.log("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) { | |
return ctx.setVariable("globalAlpha", getCSS(element, "opacity") * ((parentStack) ? parentStack.opacity : 1)); | |
} | |
function removePx(str) { | |
return str.replace("px", ""); | |
} | |
var transformRegExp = /(matrix)\((.+)\)/; | |
function getTransform(element, parentStack) { | |
var transform = getCSS(element, "transform") || getCSS(element, "-webkit-transform") || getCSS(element, "-moz-transform") || getCSS(element, "-ms-transform") || getCSS(element, "-o-transform"); | |
var transformOrigin = getCSS(element, "transform-origin") || getCSS(element, "-webkit-transform-origin") || getCSS(element, "-moz-transform-origin") || getCSS(element, "-ms-transform-origin") || getCSS(element, "-o-transform-origin") || "0px 0px"; | |
transformOrigin = transformOrigin.split(" ").map(removePx).map(Util.asFloat); | |
var matrix; | |
if (transform && transform !== "none") { | |
var match = transform.match(transformRegExp); | |
if (match) { | |
switch(match[1]) { | |
case "matrix": | |
matrix = match[2].split(",").map(Util.trimText).map(Util.asFloat); | |
break; | |
} | |
} | |
} | |
return { | |
origin: transformOrigin, | |
matrix: matrix | |
}; | |
} | |
function createStack(element, parentStack, bounds, transform) { | |
var ctx = h2cRenderContext((!parentStack) ? documentWidth() : bounds.width , (!parentStack) ? documentHeight() : bounds.height), | |
stack = { | |
ctx: ctx, | |
opacity: setOpacity(ctx, element, parentStack), | |
cssPosition: getCSS(element, "position"), | |
borders: getBorderData(element), | |
transform: transform, | |
clip: (parentStack && parentStack.clip) ? Util.Extend( {}, parentStack.clip ) : null | |
}; | |
setZ(element, stack, parentStack); | |
// 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; | |
} | |
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 getBounds(element, transform) { | |
var bounds = (transform.matrix) ? Util.OffsetBounds(element) : Util.Bounds(element); | |
transform.origin[0] += bounds.left; | |
transform.origin[1] += bounds.top; | |
return bounds; | |
} | |
function renderElement(element, parentStack, pseudoElement, ignoreBackground) { | |
var transform = getTransform(element, parentStack), | |
bounds = getBounds(element, transform), | |
image, | |
stack = createStack(element, parentStack, bounds, transform), | |
borders = stack.borders, | |
ctx = stack.ctx, | |
backgroundBounds = getBackgroundBounds(borders, bounds, stack.clip), | |
borderData = parseBorders(element, bounds, borders), | |
backgroundColor = (ignoreElementsRegExp.test(element.nodeName)) ? "#efefef" : getCSS(element, "backgroundColor"); | |
createShape(ctx, borderData.clip); | |
ctx.save(); | |
ctx.clip(); | |
if (backgroundBounds.height > 0 && backgroundBounds.width > 0 && !ignoreBackground) { | |
renderBackgroundColor(ctx, bounds, backgroundColor); | |
renderBackgroundImage(element, backgroundBounds, ctx); | |
} else if (ignoreBackground) { | |
stack.backgroundColor = backgroundColor; | |
} | |
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 { | |
Util.log("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 (element, stack, pseudoElement) { | |
if (isElementVisible(element)) { | |
stack = renderElement(element, stack, pseudoElement, false) || stack; | |
if (!ignoreElementsRegExp.test(element.nodeName)) { | |
parseChildren(element, stack, pseudoElement); | |
} | |
} | |
} | |
function parseChildren(element, stack, pseudoElement) { | |
Util.Children(element).forEach(function(node) { | |
if (node.nodeType === node.ELEMENT_NODE) { | |
parseElement(node, stack, pseudoElement); | |
} else if (node.nodeType === node.TEXT_NODE) { | |
renderText(element, node, stack); | |
} | |
}); | |
} | |
function init() { | |
var background = getCSS(document.documentElement, "backgroundColor"), | |
transparentBackground = (Util.isTransparent(background) && element === document.body), | |
stack = renderElement(element, null, false, transparentBackground); | |
parseChildren(element, stack); | |
if (transparentBackground) { | |
background = stack.backgroundColor; | |
} | |
body.removeChild(hidePseudoElements); | |
return { | |
backgroundColor: background, | |
stack: 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, | |
Util = _html2canvas.Util, | |
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(){ | |
Util.log("html2canvas: start: images: " + images.numLoaded + " / " + images.numTotal + " (failed: " + images.numFailed + ")"); | |
if (!images.firstRun && images.numLoaded >= images.numTotal){ | |
Util.log("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 { | |
Util.Children(el).forEach(getImages); | |
} | |
catch( e ) {} | |
try { | |
elNodeType = el.nodeType; | |
} catch (ex) { | |
elNodeType = false; | |
Util.log("html2canvas: failed to access some element's nodeType - Exception: " + ex.message); | |
} | |
if (elNodeType === 1 || elNodeType === undefined) { | |
loadPseudoElementImages(el); | |
try { | |
loadBackgroundImages(Util.getCSS(el, 'backgroundImage'), el); | |
} catch(e) { | |
Util.log("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; | |
} 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") { | |
Util.log("html2canvas: Cleanup because: " + cause); | |
} else { | |
Util.log("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++; | |
Util.log("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); | |
} | |
Util.log('html2canvas: Preload starts: finding background-images'); | |
images.firstRun = true; | |
getImages(element); | |
Util.log('html2canvas: Preload: Finding images'); | |
// load <img> images | |
for (i = 0; i < imgLen; i+=1){ | |
methods.loadImage( domImages[i].getAttribute( "src" ) ); | |
} | |
images.firstRun = false; | |
Util.log('html2canvas: Preload: Done.'); | |
if (images.numTotal === images.numLoaded) { | |
start(); | |
} | |
return methods; | |
}; | |
_html2canvas.Renderer = function(parseQueue, options){ | |
// http://www.w3.org/TR/CSS21/zindex.html | |
function createRenderQueue(parseQueue) { | |
var queue = [], | |
rootContext; | |
rootContext = (function buildStackingContext(rootNode) { | |
var rootContext = {}; | |
function insert(context, node, specialParent) { | |
var zi = (node.zIndex.zindex === 'auto') ? 0 : Number(node.zIndex.zindex), | |
contextForChildren = context, // the stacking context for children | |
isPositioned = node.zIndex.isPositioned, | |
isFloated = node.zIndex.isFloated, | |
stub = {node: node}, | |
childrenDest = specialParent; // where children without z-index should be pushed into | |
if (node.zIndex.ownStacking) { | |
// '!' comes before numbers in sorted array | |
contextForChildren = stub.context = { '!': [{node:node, children: []}]}; | |
childrenDest = undefined; | |
} else if (isPositioned || isFloated) { | |
childrenDest = stub.children = []; | |
} | |
if (zi === 0 && specialParent) { | |
specialParent.push(stub); | |
} else { | |
if (!context[zi]) { context[zi] = []; } | |
context[zi].push(stub); | |
} | |
node.zIndex.children.forEach(function(childNode) { | |
insert(contextForChildren, childNode, childrenDest); | |
}); | |
} | |
insert(rootContext, rootNode); | |
return rootContext; | |
})(parseQueue); | |
function sortZ(context) { | |
Object.keys(context).sort().forEach(function(zi) { | |
var nonPositioned = [], | |
floated = [], | |
positioned = [], | |
list = []; | |
// positioned after static | |
context[zi].forEach(function(v) { | |
if (v.node.zIndex.isPositioned || v.node.zIndex.opacity < 1) { | |
// http://www.w3.org/TR/css3-color/#transparency | |
// non-positioned element with opactiy < 1 should be stacked as if it were a positioned element with ‘z-index: 0’ and ‘opacity: 1’. | |
positioned.push(v); | |
} else if (v.node.zIndex.isFloated) { | |
floated.push(v); | |
} else { | |
nonPositioned.push(v); | |
} | |
}); | |
(function walk(arr) { | |
arr.forEach(function(v) { | |
list.push(v); | |
if (v.children) { walk(v.children); } | |
}); | |
})(nonPositioned.concat(floated, positioned)); | |
list.forEach(function(v) { | |
if (v.context) { | |
sortZ(v.context); | |
} else { | |
queue.push(v.node); | |
} | |
}); | |
}); | |
} | |
sortZ(rootContext); | |
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.stack), _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; | |
} | |
_html2canvas.Util.log('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" | |
}; | |
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") { | |
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: _html2canvas.Util.log | |
}; | |
}; | |
window.html2canvas.log = _html2canvas.Util.log; // 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"), | |
Util = _html2canvas.Util, | |
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 renderItem(ctx, item) { | |
switch(item.type){ | |
case "variable": | |
ctx[item.name] = item['arguments']; | |
break; | |
case "function": | |
switch(item.name) { | |
case "createPattern": | |
if (item['arguments'][0].width > 0 && item['arguments'][0].height > 0) { | |
try { | |
ctx.fillStyle = ctx.createPattern(item['arguments'][0], "repeat"); | |
} | |
catch(e) { | |
Util.log("html2canvas: Renderer: Error creating pattern", e.message); | |
} | |
} | |
break; | |
case "drawShape": | |
createShape(ctx, item['arguments']); | |
break; | |
case "drawImage": | |
if (item['arguments'][8] > 0 && item['arguments'][7] > 0) { | |
if (!options.taintTest || (options.taintTest && safeImage(item))) { | |
ctx.drawImage.apply( ctx, item['arguments'] ); | |
} | |
} | |
break; | |
default: | |
ctx[item.name].apply(ctx, item['arguments']); | |
} | |
break; | |
} | |
} | |
return function(parsedData, options, document, queue, _html2canvas) { | |
var ctx = canvas.getContext("2d"), | |
newCanvas, | |
bounds, | |
fstyle, | |
zStack = parsedData.stack; | |
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 = (Util.isTransparent(zStack.backgroundColor) && options.background !== undefined) ? options.background : parsedData.backgroundColor; | |
ctx.fillRect(0, 0, canvas.width, canvas.height); | |
ctx.fillStyle = fstyle; | |
queue.forEach(function(storageContext) { | |
// set common settings for canvas | |
ctx.textBaseline = "bottom"; | |
ctx.save(); | |
if (storageContext.transform.matrix) { | |
ctx.translate(storageContext.transform.origin[0], storageContext.transform.origin[1]); | |
ctx.transform.apply(ctx, storageContext.transform.matrix); | |
ctx.translate(-storageContext.transform.origin[0], -storageContext.transform.origin[1]); | |
} | |
if (storageContext.clip){ | |
ctx.beginPath(); | |
ctx.rect(storageContext.clip.left, storageContext.clip.top, storageContext.clip.width, storageContext.clip.height); | |
ctx.clip(); | |
} | |
if (storageContext.ctx.storage) { | |
storageContext.ctx.storage.forEach(function(item) { | |
renderItem(ctx, item); | |
}); | |
} | |
ctx.restore(); | |
}); | |
Util.log("html2canvas: Renderer: Canvas renderer done - returning canvas obj"); | |
if (options.elements.length === 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 = document.createElement('canvas'); | |
newCanvas.width = Math.ceil(bounds.width); | |
newCanvas.height = Math.ceil(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); |