diff --git a/.jshintrc b/.jshintrc index 1020c65..49f3650 100644 --- a/.jshintrc +++ b/.jshintrc @@ -12,5 +12,6 @@ "browser": true, "globals": { "jQuery": true - } -} \ No newline at end of file + }, + "predef": ["NodeContainer", "StackingContext", "TextContainer", "CanvasRenderer", "Renderer", "Support"] +} diff --git a/Gruntfile.js b/Gruntfile.js index 5b068cc..e6034e7 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -1,84 +1,95 @@ /*global module:false*/ module.exports = function(grunt) { - var meta = { - banner: '/*\n <%= pkg.title || pkg.name %> <%= pkg.version %>' + - '<%= pkg.homepage ? " <" + pkg.homepage + ">" : "" %>' + '\n' + - ' Copyright (c) <%= grunt.template.today("yyyy") %> <%= pkg.author.name %>' + - '\n\n Released under <%= _.pluck(pkg.licenses, "type").join(", ") %> License\n*/\n', - pre: '\n(function(window, document, undefined){\n\n', - post: '\n})(window,document);' - }; + var meta = { + banner: '/*\n <%= pkg.title || pkg.name %> <%= pkg.version %>' + + '<%= pkg.homepage ? " <" + pkg.homepage + ">" : "" %>' + '\n' + + ' Copyright (c) <%= grunt.template.today("yyyy") %> <%= pkg.author.name %>' + + '\n\n Released under <%= _.pluck(pkg.licenses, "type").join(", ") %> License\n*/\n', + pre: '\n(function(window, document, undefined){\n\n', + post: '\n})(window,document);' + }; - // Project configuration. - grunt.initConfig({ + // Project configuration. + grunt.initConfig({ - pkg: grunt.file.readJSON('package.json'), + pkg: grunt.file.readJSON('package.json'), - qunit: { - files: ['tests/qunit/index.html'] - }, - concat: { - dist: { - src: [ - 'src/Core.js', - 'src/Font.js', - 'src/Generate.js', - 'src/Queue.js', - 'src/Parse.js', - 'src/Preload.js', - 'src/Renderer.js', - 'src/Support.js', - 'src/Util.js', - 'src/renderers/Canvas.js' - ], - dest: 'build/<%= pkg.name %>.js' - }, - options:{ - banner: meta.banner + meta.pre, - footer: meta.post - } - }, - uglify: { - dist: { - src: ['<%= concat.dist.dest %>'], - dest: 'build/<%= pkg.name %>.min.js' - }, - options: { - banner: meta.banner - } - }, - watch: { - files: 'src/**/*', - tasks: ['build', 'jshint'] - }, - jshint: { - all: ['<%= concat.dist.dest %>'], - options: grunt.file.readJSON('./.jshintrc') - } - }); + qunit: { + files: ['tests/qunit/index.html'] + }, + concat: { + dist: { + src: [ + 'src/Core.js', + 'src/Font.js', + 'src/Generate.js', + 'src/Queue.js', + 'src/Parse.js', + 'src/Preload.js', + 'src/Renderer.js', + 'src/Support.js', + 'src/Util.js', + 'src/renderers/Canvas.js' + ], + dest: 'build/<%= pkg.name %>.js' + }, + options:{ + banner: meta.banner + meta.pre, + footer: meta.post + } + }, + connect: { + server: { + options: { + port: 8080, + base: './', + keepalive: true + } + } + }, + uglify: { + dist: { + src: ['<%= concat.dist.dest %>'], + dest: 'build/<%= pkg.name %>.min.js' + }, + options: { + banner: meta.banner + } + }, + watch: { + files: 'src/**/*', + tasks: ['build', 'jshint'] + }, + jshint: { + all: ['<%= concat.dist.dest %>'], + options: grunt.file.readJSON('./.jshintrc') + } + }); - grunt.registerTask('webdriver', 'Browser render tests', function(arg1) { - var selenium = require("./tests/selenium.js"); - var done = this.async(); + grunt.registerTask('webdriver', 'Browser render tests', function(arg1) { + var selenium = require("./tests/selenium.js"); + var done = this.async(); - if (arguments.length) { - selenium[arg1].apply(null, arguments); - } else { - selenium.tests(); - } - }); + if (arguments.length) { + selenium[arg1].apply(null, arguments); + } else { + selenium.tests(); + } + }); - // Load tasks - grunt.loadNpmTasks('grunt-contrib-watch'); - grunt.loadNpmTasks('grunt-contrib-concat'); - grunt.loadNpmTasks('grunt-contrib-uglify'); - grunt.loadNpmTasks('grunt-contrib-jshint'); - grunt.loadNpmTasks('grunt-contrib-qunit'); + // Load tasks + grunt.loadNpmTasks('grunt-contrib-watch'); + grunt.loadNpmTasks('grunt-contrib-concat'); + grunt.loadNpmTasks('grunt-contrib-uglify'); + grunt.loadNpmTasks('grunt-contrib-jshint'); + grunt.loadNpmTasks('grunt-contrib-qunit'); + grunt.loadNpmTasks('grunt-contrib-connect'); - // Default task. - grunt.registerTask('build', ['concat', 'uglify']); - grunt.registerTask('default', ['concat', 'jshint', 'qunit', 'uglify']); - grunt.registerTask('travis', ['concat', 'jshint', 'qunit', 'uglify', 'webdriver']); + // Default task. + grunt.registerTask('server', ['connect']); + grunt.registerTask('build', ['concat', 'uglify']); + grunt.registerTask('default', ['concat', 'jshint', 'qunit', 'uglify']); + grunt.registerTask('travis', ['concat', 'jshint', 'qunit', 'uglify', 'webdriver']); }; diff --git a/build/html2canvas.js b/build/html2canvas.js index 895b811..fcca2c8 100644 --- a/build/html2canvas.js +++ b/build/html2canvas.js @@ -1,3005 +1,663 @@ /* - html2canvas 0.4.1 - Copyright (c) 2013 Niklas von Hertzen + html2canvas 0.5.0-rc1 + Copyright (c) 2014 Niklas von Hertzen Released under MIT License */ (function(window, document, undefined){ -"use strict"; +window.html2canvas = function(nodeList, options) { + var container = createWindowClone(document, window.innerWidth, window.innerHeight); + var clonedWindow = container.contentWindow; + var element = (nodeList === undefined) ? document.body : nodeList[0]; -var _html2canvas = {}, -previousElement, -computedCSS, -html2canvas; + var canvas = new CanvasRenderer(); + var parser = new NodeParser(clonedWindow.document.documentElement, canvas, options || {}); -_html2canvas.Util = {}; - -_html2canvas.Util.log = function(a) { - if (_html2canvas.logging && window.console && window.console.log) { - window.console.log(a); - } + window.console.log(parser); + options.onrendered(canvas.canvas); }; -_html2canvas.Util.trimText = (function(isNative){ - return function(input) { - return isNative ? isNative.apply(input) : ((input || '') + '').replace( /^\s+|\s+$/g , '' ); - }; -})(String.prototype.trim); +function createWindowClone(ownerDocument, width, height) { + var documentElement = ownerDocument.documentElement.cloneNode(true), + container = ownerDocument.createElement("iframe"); -_html2canvas.Util.asFloat = function(v) { - return parseFloat(v); -}; + container.style.display = "hidden"; + container.style.position = "absolute"; + container.style.width = width + "px"; + container.style.height = height + "px"; -(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 []; - } + ownerDocument.body.appendChild(container); - // 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; - }; -})(); + var documentClone = container.contentWindow.document; + documentClone.replaceChild(documentClone.adoptNode(documentElement), documentClone.documentElement); -_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 -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; + return container; } -function asInt(val) { - return parseInt(val, 10); -} - -function isPercentage(value) { - return value.toString().indexOf("%") !== -1; -} - -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)$/))) { - return value; - } 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 - }; -}; - -_html2canvas.Util.BackgroundPosition = function(element, bounds, image, imageIndex, backgroundSize ) { - var backgroundPosition = _html2canvas.Util.getCSS(element, 'backgroundPosition', imageIndex), - leftPosition, - topPosition; - if (backgroundPosition.length === 1){ - backgroundPosition = [backgroundPosition[0], backgroundPosition[0]]; - } - - if (isPercentage(backgroundPosition[0])){ - leftPosition = (bounds.width - (backgroundSize || image).width) * (parseFloat(backgroundPosition[0]) / 100); - } else { - leftPosition = parseInt(backgroundPosition[0], 10); - } - - if (backgroundPosition[1] === 'auto') { - topPosition = leftPosition / image.width * image.height; - } else if (isPercentage(backgroundPosition[1])){ - topPosition = (bounds.height - (backgroundSize || image).height) * parseFloat(backgroundPosition[1]) / 100; - } else { - topPosition = parseInt(backgroundPosition[1], 10); - } - - if (backgroundPosition[0] === 'auto') { - leftPosition = topPosition / image.height * image.width; - } - - return {left: leftPosition, top: topPosition}; -}; - -_html2canvas.Util.BackgroundSize = function(element, bounds, image, imageIndex) { - var backgroundSize = _html2canvas.Util.getCSS(element, 'backgroundSize', imageIndex), width, height; - - if (backgroundSize.length === 1) { - backgroundSize = [backgroundSize[0], backgroundSize[0]]; - } - - if (isPercentage(backgroundSize[0])) { - width = bounds.width * parseFloat(backgroundSize[0]) / 100; - } else if (/contain|cover/.test(backgroundSize[0])) { - return _html2canvas.Util.resizeBounds(image.width, image.height, bounds.width, bounds.height, backgroundSize[0]); - } else { - width = parseInt(backgroundSize[0], 10); - } - - if (backgroundSize[0] === 'auto' && backgroundSize[1] === 'auto') { - height = image.height; - } else if (backgroundSize[1] === 'auto') { - height = width / image.width * image.height; - } else if (isPercentage(backgroundSize[1])) { - height = bounds.height * parseFloat(backgroundSize[1]) / 100; - } else { - height = parseInt(backgroundSize[1], 10); - } - - if (backgroundSize[0] === 'auto') { - width = height / image.height * image.width; - } - - return {width: width, height: height}; -}; - -_html2canvas.Util.BackgroundRepeat = function(element, imageIndex) { - var backgroundRepeat = _html2canvas.Util.getCSS(element, "backgroundRepeat").split(",").map(_html2canvas.Util.trimText); - return backgroundRepeat[imageIndex] || backgroundRepeat[0]; -}; - -_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 || 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, cb) { - 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", - hidePseudoElementsStyles = doc.createElement('style'); - - hidePseudoElementsStyles.innerHTML = '.' + pseudoHide + - '-parent:before { content: "" !important; display: none !important; }' + - '.' + pseudoHide + '-parent:after { content: "" !important; display: none !important; }'; - - body.appendChild(hidePseudoElementsStyles); - - images = images || {}; - - init(); - - function init() { - var background = getCSS(document.documentElement, "backgroundColor"), - transparentBackground = (Util.isTransparent(background) && element === document.body), - stack = renderElement(element, null, false, transparentBackground); - - // create pseudo elements in a single pass to prevent synchronous layouts - addPseudoElements(element); - - parseChildren(element, stack, function() { - if (transparentBackground) { - background = stack.backgroundColor; - } - - removePseudoElements(); - - Util.log('Done parsing, moving to Render.'); - - cb({ - backgroundColor: background, - stack: stack - }); +function NodeParser(element, renderer, options) { + this.renderer = renderer; + this.options = options; + this.support = new Support(); + this.range = null; + this.stack = new StackingContext(true, 1, element.ownerDocument, null); + var parent = new NodeContainer(element, null); + parent.blockFormattingContext = parent; + this.nodes = [parent].concat(this.getChildren(parent)).filter(function(container) { + return container.visible = container.isElementVisible(); }); - } + this.createStackingContexts(); + this.sortStackingContexts(this.stack); + this.parse(this.stack); +} - // Given a root element, find all pseudo elements below, create elements mocking pseudo element styles - // so we can process them as normal elements, and hide the original pseudo elements so they don't interfere - // with layout. - function addPseudoElements(el) { - // These are done in discrete steps to prevent a relayout loop caused by addClass() invalidating - // layouts & getPseudoElement calling getComputedStyle. - var jobs = [], classes = []; - getPseudoElementClasses(); - findPseudoElements(el); - runJobs(); +NodeParser.prototype.getChildren = function(parentContainer) { + return flatten([].filter.call(parentContainer.node.childNodes, renderableNode).map(function(node) { + var container = [node.nodeType === Node.TEXT_NODE ? new TextContainer(node, parentContainer) : new NodeContainer(node, parentContainer)].filter(nonIgnoredElement); + return node.nodeType === Node.ELEMENT_NODE && container.length ? container.concat(this.getChildren(container[0])) : container; + }, this)); +}; - function getPseudoElementClasses(){ - var findPsuedoEls = /:before|:after/; - var sheets = document.styleSheets; - for (var i = 0, j = sheets.length; i < j; i++) { - try { - var rules = sheets[i].cssRules; - for (var k = 0, l = rules.length; k < l; k++) { - if(findPsuedoEls.test(rules[k].selectorText)) { - classes.push(rules[k].selectorText); - } - } - } - catch(e) { // will throw security exception for style sheets loaded from external domains - } - } +NodeParser.prototype.newStackingContext = function(container, hasOwnStacking) { + var stack = new StackingContext(hasOwnStacking, container.cssFloat('opacity'), container.node, container.parent); + var parentStack = stack.getParentStack(this); + parentStack.contexts.push(stack); + container.stack = stack; +}; - // Trim off the :after and :before (or ::after and ::before) - for (i = 0, j = classes.length; i < j; i++) { - classes[i] = classes[i].match(/(^[^:]*)/)[1]; - } - } - - // Using the list of elements we know how pseudo el styles, create fake pseudo elements. - function findPseudoElements(el) { - var els = document.querySelectorAll(classes.join(',')); - for(var i = 0, j = els.length; i < j; i++) { - createPseudoElements(els[i]); - } - } - - // Create pseudo elements & add them to a job queue. - function createPseudoElements(el) { - var before = getPseudoElement(el, ':before'), - after = getPseudoElement(el, ':after'); - - if(before) { - jobs.push({type: 'before', pseudo: before, el: el}); - } - - if (after) { - jobs.push({type: 'after', pseudo: after, el: el}); - } - } - - // Adds a class to the pseudo's parent to prevent the original before/after from messing - // with layouts. - // Execute the inserts & addClass() calls in a batch to prevent relayouts. - function runJobs() { - // Add Class - jobs.forEach(function(job){ - addClass(job.el, pseudoHide + "-parent"); - }); - - // Insert el - jobs.forEach(function(job){ - if(job.type === 'before'){ - job.el.insertBefore(job.pseudo, job.el.firstChild); +NodeParser.prototype.createStackingContexts = function() { + this.nodes.forEach(function(container) { + if (isElement(container) && (this.isRootElement(container) || hasOpacity(container) || isPositionedForStacking(container) || this.isBodyWithTransparentRoot(container))) { + this.newStackingContext(container, true); + } else if (isElement(container) && (isPositioned(container))) { + this.newStackingContext(container, false); } else { - job.el.appendChild(job.pseudo); + container.assignStack(container.parent.stack); } - }); + }, this); +}; + +NodeParser.prototype.isBodyWithTransparentRoot = function(container) { + return container.node.nodeName === "BODY" && this.renderer.isTransparent(container.parent.css('backgroundColor')); +}; + +NodeParser.prototype.isRootElement = function(container) { + return container.node.nodeName === "HTML"; +}; + +NodeParser.prototype.sortStackingContexts = function(stack) { + stack.contexts.sort(zIndexSort); + stack.contexts.forEach(this.sortStackingContexts, this); +}; + +NodeParser.prototype.parseBounds = function(nodeContainer) { + return nodeContainer.bounds = this.getBounds(nodeContainer.node); +}; + +NodeParser.prototype.getBounds = function(node) { + if (node.getBoundingClientRect) { + var clientRect = node.getBoundingClientRect(); + return { + top: clientRect.top, + bottom: clientRect.bottom || (clientRect.top + clientRect.height), + left: clientRect.left, + width: node.offsetWidth, + height: node.offsetHeight + }; } - } + return {}; +}; +NodeParser.prototype.parseTextBounds = function(container) { + return function(text, index, textList) { + if (container.parent.css("textDecoration") !== "none" || text.trim().length !== 0) { + var offset = textList.slice(0, index).join("").length; + if (this.support.rangeBounds) { + return this.getRangeBounds(container.node, offset, text.length); + } else if (container.node && typeof(container.node.data) === "string") { + var replacementNode = container.node.splitText(text.length); + var bounds = this.getWrapperBounds(container.node); + container.node = replacementNode; + return bounds; + } + } + }; +}; +NodeParser.prototype.getWrapperBounds = function(node) { + var wrapper = node.ownerDocument.createElement('wrapper'); + var parent = node.parentNode, + backupText = node.cloneNode(true); - // Delete our fake pseudo elements from the DOM. This will remove those actual elements - // and the classes on their parents that hide the actual pseudo elements. - // Note that NodeLists are 'live' collections so you can't use a for loop here. They are - // actually deleted from the NodeList after each iteration. - function removePseudoElements(){ - // delete pseudo elements - body.removeChild(hidePseudoElementsStyles); - var pseudos = document.getElementsByClassName(pseudoHide + "-element"); - while (pseudos.length) { - pseudos[0].parentNode.removeChild(pseudos[0]); - } + wrapper.appendChild(node.cloneNode(true)); + parent.replaceChild(wrapper, node); - // Remove pseudo hiding classes - var parents = document.getElementsByClassName(pseudoHide + "-parent"); - while(parents.length) { - removeClass(parents[0], pseudoHide + "-parent"); - } - } - - function addClass (el, className) { - if (el.classList) { - el.classList.add(className); - } else { - el.className = el.className + " " + className; - } - } - - function removeClass (el, className) { - if (el.classList) { - el.classList.remove(className); - } else { - el.className = el.className.replace(className, "").trim(); - } - } - - function hasClass (el, className) { - return el.className.indexOf(className) > -1; - } - - // Note that this doesn't work in < IE8, but we don't support that anyhow - function nodeListToArray (nodeList) { - return Array.prototype.slice.call(nodeList); - } - - 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; - } + var bounds = this.getBounds(wrapper); + parent.replaceChild(backupText, wrapper); return bounds; - } +}; - function textRangeBounds(text, textNode, textOffset) { - var range = doc.createRange(); - range.setStart(textNode, textOffset); - range.setEnd(textNode, textOffset + text.length); +NodeParser.prototype.getRangeBounds = function(node, offset, length) { + var range = this.range || (this.range = node.ownerDocument.createRange()); + range.setStart(node, offset); + range.setEnd(node, offset + 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); +function negativeZIndex(container) { + return container.cssInt("zIndex") < 0; +} - var bounds = transform ? Util.OffsetBounds(wrapElement) : Util.Bounds(wrapElement); - parent.replaceChild(backupText, wrapElement); - return bounds; - } +function positiveZIndex(container) { + return container.cssInt("zIndex") > 0; +} - 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 - }; +function zIndex0(container) { + return container.cssInt("zIndex") === 0; +} - if (Util.trimText(textNode.nodeValue).length > 0) { - textNode.nodeValue = textTransform(textNode.nodeValue, getCSS(el, "textTransform")); - textAlign = textAlign.replace(["-webkit-auto"],["auto"]); +function inlineLevel(container) { + return ["inline", "inline-block", "inline-table"].indexOf(container.css("display")) !== -1; +} - textList = (!options.letterRendering && /^(left|right|justify|auto)$/.test(textAlign) && noLetterSpacing(getCSS(el, "letterSpacing"))) ? - textNode.nodeValue.split(/(\b| )/) - : textNode.nodeValue.split(""); +function isStackingContext(container) { + return (container instanceof StackingContext); +} - metrics = setTextVariables(ctx, el, textDecoration, color); +function hasText(container) { + return container.node.data.trim().length > 0; +} - 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); - } - }); - } +function noLetterSpacing(container) { + return (/^(normal|none|0px)$/.test(container.parent.css("letterSpacing"))); +} - textList.forEach(function(text, index) { - var bounds = getTextBounds(state, text, textDecoration, (index < textList.length - 1), stack.transform.matrix); +NodeParser.prototype.parse = function(stack) { + // http://www.w3.org/TR/CSS21/visuren.html#z-index + var negativeZindex = stack.contexts.filter(negativeZIndex); // 2. the child stacking contexts with negative stack levels (most negative first). + var descendantElements = stack.children.filter(isElement).filter(not(isFloating)); + var nonInlineNonPositionedDescendants = descendantElements.filter(not(isPositioned)).filter(not(inlineLevel)); // 3 the in-flow, non-inline-level, non-positioned descendants. + var nonPositionedFloats = descendantElements.filter(not(isPositioned)).filter(isFloating); // 4. the non-positioned floats. + var inFlow = descendantElements.filter(not(isPositioned)).filter(inlineLevel); // 5. the in-flow, inline-level, non-positioned descendants, including inline tables and inline blocks. + var stackLevel0 = stack.contexts.concat(descendantElements.filter(isPositioned)).filter(zIndex0); // 6. the child stacking contexts with stack level 0 and the positioned descendants with stack level 0. + var text = stack.children.filter(isTextNode).filter(hasText); + var positiveZindex = stack.contexts.filter(positiveZIndex); // 7. the child stacking contexts with positive stack levels (least positive first). + var rendered = []; + negativeZindex.concat(nonInlineNonPositionedDescendants).concat(nonPositionedFloats) + .concat(inFlow).concat(stackLevel0).concat(text).concat(positiveZindex).forEach(function(container) { + this.paint(container); + if (rendered.indexOf(container.node) !== -1) { + window.console.log(container, container.node); + throw new Error("rendering twice"); + } + rendered.push(container.node); + + if (isStackingContext(container)) { + this.parse(container); + } + }, this); +}; + +NodeParser.prototype.paint = function(container) { + if (isTextNode(container)) { + this.paintText(container); + } else { + this.paintNode(container); + } +}; + +NodeParser.prototype.paintNode = function(container) { + if (isStackingContext(container)) { + this.renderer.setOpacity(container.opacity); + } + + var bounds = this.parseBounds(container); + var borderData = this.parseBorders(container); + this.renderer.clip(borderData.clip, function() { + this.renderer.renderBackground(container, bounds); + }, this); + this.renderer.renderBorders(borderData.borders); +}; + +NodeParser.prototype.paintText = function(container) { + container.applyTextTransform(); + var textList = container.node.data.split(!this.options.letterRendering || noLetterSpacing(container) ? /(\b| )/ : ""); + var weight = container.parent.fontWeight(); + var size = container.parent.css('fontSize'); + var family = container.parent.css('fontFamily'); + this.renderer.font(container.parent.css('color'), container.parent.css('fontStyle'), container.parent.css('fontVariant'), weight, size, family); + + textList.map(this.parseTextBounds(container), this).forEach(function(bounds, index) { if (bounds) { - drawText(text, bounds.left, bounds.bottom, ctx); - renderTextDecoration(ctx, textDecoration, bounds, metrics, color); + this.renderer.text(textList[index], bounds.left, bounds.bottom); + // renderTextDecoration(ctx, textDecoration, bounds, metrics, color); } - }); - } - } + /* 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); + } */ + }, this); +}; - 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); - newContext.depth = parentStack ? (parentStack.zIndex.depth + 1) : 0; - - if (parentStack) { - parentStack.zIndex.children.push(stack); - } - } - - function h2czContext(zindex) { - return { - depth: 0, - zindex: zindex, - children: [] - }; - } - - 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') - }; +NodeParser.prototype.parseBorders = function(container) { + var nodeBounds = container.bounds; + var radius = getBorderRadiusData(container); + var borders = ["Top", "Right", "Bottom", "Left"].map(function(side) { + return { + width: container.cssInt('border' + side + 'Width'), + color: container.css('border' + side + 'Color'), + args: null + }; }); - } - - function getBorderRadiusData(element) { - return ["TopLeft", "TopRight", "BottomRight", "BottomLeft"].map(function(side) { - return getCSS(element, 'border' + side + 'Radius'); - }); - } - - function getCurvePoints(x, y, r1, r2) { - var kappa = 4 * ((Math.sqrt(2) - 1) / 3); - 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 - }) - }; - } - - 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 - }; - }; + var borderPoints = calculateCurvePoints(nodeBounds, radius, borders); 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]); - } - }; - } + clip: this.parseBackgroundClip(container, borderPoints, borders, radius, nodeBounds), + borders: borders.map(function(border, borderSide) { + if (border.width > 0) { + var bx = nodeBounds.left; + var by = nodeBounds.top; + var bw = nodeBounds.width; + var bh = nodeBounds.height - (borders[2].width); - function parseCorner(borderArgs, radius1, radius2, corner1, corner2, x, y) { + switch(borderSide) { + case 0: + // top border + bh = borders[0].width; + border.args = drawSide({ + c1: [bx, by], + c2: [bx + bw, by], + c3: [bx + bw - borders[1].width, by + bh], + c4: [bx + borders[3].width, by + bh] + }, radius[0], radius[1], + borderPoints.topLeftOuter, borderPoints.topLeftInner, borderPoints.topRightOuter, borderPoints.topRightInner); + break; + case 1: + // right border + bx = nodeBounds.left + nodeBounds.width - (borders[1].width); + bw = borders[1].width; + + border.args = drawSide({ + c1: [bx + bw, by], + c2: [bx + bw, by + bh + borders[2].width], + c3: [bx, by + bh], + c4: [bx, by + borders[0].width] + }, radius[1], radius[2], + borderPoints.topRightOuter, borderPoints.topRightInner, borderPoints.bottomRightOuter, borderPoints.bottomRightInner); + break; + case 2: + // bottom border + by = (by + nodeBounds.height) - (borders[2].width); + bh = borders[2].width; + border.args = drawSide({ + c1: [bx + bw, by + bh], + c2: [bx, by + bh], + c3: [bx + borders[3].width, by], + c4: [bx + bw - borders[3].width, by] + }, radius[2], radius[3], + borderPoints.bottomRightOuter, borderPoints.bottomRightInner, borderPoints.bottomLeftOuter, borderPoints.bottomLeftInner); + break; + case 3: + // left border + bw = borders[3].width; + border.args = drawSide({ + c1: [bx, by + bh + borders[2].width], + c2: [bx, by], + c3: [bx + bw, by + borders[0].width], + c4: [bx + bw, by + bh] + }, radius[3], radius[0], + borderPoints.bottomLeftOuter, borderPoints.bottomLeftInner, borderPoints.topLeftOuter, borderPoints.topLeftInner); + break; + } + } + return border; + }) + }; +}; + +NodeParser.prototype.parseBackgroundClip = function(container, borderPoints, borders, radius, bounds) { + var backgroundClip = container.css('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 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); + 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]); + borderArgs.push(["line", x, y]); } if (radius2[0] > 0 || radius2[1] > 0) { - borderArgs.push(["line", corner2[0].start.x, corner2[0].start.y]); + borderArgs.push(["line", corner2[0].start.x, corner2[0].start.y]); } - } +} - function drawSide(borderData, radius1, radius2, outer1, inner1, outer2, inner2) { +function getBorderRadiusData(container) { + return ["TopLeft", "TopRight", "BottomRight", "BottomLeft"].map(function(side) { + var value = container.css('border' + side + 'Radius'); + var arr = value.split(" "); + if (arr.length <= 1) { + arr[1] = arr[0]; + } + return arr.map(asInt); + }); +} + +function asInt(value) { + return parseInt(value, 10); +} + +function getCurvePoints(x, y, r1, r2) { + var kappa = 4 * ((Math.sqrt(2) - 1) / 3); + 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}) + }; +} + +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]; + + var 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 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 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); + 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]]); + 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); + 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]]); + 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); + 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]]); + 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, +function nonIgnoredElement(nodeContainer) { + return (nodeContainer.node.nodeType !== Node.ELEMENT_NODE || ["SCRIPT", "HEAD", "TITLE", "OBJECT", "BR"].indexOf(nodeContainer.node.nodeName) === -1); +} - 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], +function flatten(arrays) { + return [].concat.apply([], arrays); +} - topWidth = width - trh, - rightHeight = height - brv, - bottomWidth = width - brh, - leftHeight = height - blv; +function renderableNode(node) { + return (node.nodeType === Node.TEXT_NODE || node.nodeType === Node.ELEMENT_NODE); +} - return { - topLeftOuter: getCurvePoints( - x, - y, - tlh, - tlv - ).topLeft.subdivide(0.5), +function isPositionedForStacking(container) { + var position = container.css("position"); + var zIndex = (position === "absolute" || position === "relative") ? container.css("zIndex") : "auto"; + return zIndex !== "auto"; +} - 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), +function isPositioned(container) { + return container.css("position") !== "static"; +} - topRightOuter: getCurvePoints( - x + topWidth, - y, - trh, - trv - ).topRight.subdivide(0.5), +function isFloating(container) { + return container.css("float") !== "none"; +} - 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 not(callback) { + var context = this; + return function() { + return !callback.apply(context, arguments); }; - } +} - function getBorderClip(element, borderPoints, borders, radius, bounds) { - var backgroundClip = getCSS(element, 'backgroundClip'), - borderArgs = []; +function isElement(container) { + return container.node.nodeType === Node.ELEMENT_NODE; +} - 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; +function isTextNode(container) { + return container.node.nodeType === Node.TEXT_NODE; +} - 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; - } +function zIndexSort(a, b) { + return a.cssInt("zIndex") - b.cssInt("zIndex"); +} - return borderArgs; - } +function hasOpacity(container) { + return container.css("opacity") < 1; +} - 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: [] +function Renderer() {} +function NYI() { + return function() { + throw new Error("Render function not implemented"); }; +} - 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 - }); - - } +Renderer.prototype.renderBackground = function(container, bounds) { + if (bounds.height > 0 && bounds.width > 0) { + this.renderBackgroundColor(container, bounds); + this.renderBackgroundImage(container, bounds); } - - 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); - var parentStyle = window.getComputedStyle(el); - // If no content attribute is present, the pseudo element is hidden, - // or the parent has a content property equal to the content on the pseudo element, - // move along. - if(!elStyle || !elStyle.content || elStyle.content === "none" || elStyle.content === "-moz-alt-content" || - elStyle.display === "none" || parentStyle.content === elStyle.content) { - return; - } - var content = elStyle.content + ''; - - // Strip inner quotes - if(content[0] === "'" || content[0] === "\"") { - content = content.replace(/(^['"])|(['"]$)/g, ''); - } - - var isImage = content.substr( 0, 3 ) === 'url', - elps = document.createElement( isImage ? 'img' : 'span' ); - - elps.className = pseudoHide + "-element "; - - 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 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 = Util.BackgroundRepeat(el, imageIndex); - - image = resizeImage(image, backgroundSize); - - switch (backgroundRepeat) { - case "repeat-x": - case "repeat no-repeat": - backgroundRepeatShape(ctx, image, backgroundPosition, bounds, - bounds.left, bounds.top + backgroundPosition.top, 99999, image.height); - break; - case "repeat-y": - case "no-repeat repeat": - 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", ""); - } - - function getTransform(element, parentStack) { - var transformRegExp = /(matrix)\((.+)\)/; - 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, 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); - }); - - switch(element.nodeName){ - case "IMG": - if ((image = loadImage(element.getAttribute('src')))) { - renderImage(ctx, element, image, bounds, borders); - } else { - Util.log("html2canvas: Error loading :" + 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, cb) { - if (!cb) { - cb = function(){}; - } - if (isElementVisible(element)) { - stack = renderElement(element, stack, false) || stack; - if (!ignoreElementsRegExp.test(element.nodeName)) { - return parseChildren(element, stack, cb); - } - } - cb(); - } - - function parseChildren(element, stack, cb) { - var children = Util.Children(element); - // After all nodes have processed, finished() will call the cb. - // We add one and kick it off so this will still work when children.length === 0. - // Note that unless async is true, this will happen synchronously, just will callbacks. - var jobs = children.length + 1; - finished(); - - if (options.async) { - children.forEach(function(node) { - // Don't block the page from rendering - setTimeout(function(){ parseNode(node); }, 0); - }); - } else { - children.forEach(parseNode); - } - - function parseNode(node) { - if (node.nodeType === node.ELEMENT_NODE) { - parseElement(node, stack, finished); - } else if (node.nodeType === node.TEXT_NODE) { - renderText(element, node, stack); - finished(); - } else { - finished(); - } - } - function finished(el) { - if (--jobs <= 0){ - Util.log("finished rendering " + children.length + " children."); - cb(); - } - } - } }; -_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); - } +Renderer.prototype.renderBackgroundColor = function(container, bounds) { + var color = container.css("backgroundColor"); + if (!this.isTransparent(color)) { + this.rectangle( + bounds.left, + bounds.top, + bounds.width, + bounds.height, + container.css("backgroundColor") + ); } - } +}; - // TODO modify proxy to serve images with CORS enabled, where available - function proxyGetImage(url, img, imageObj){ - var callback_name, - scriptUrl = options.proxy, - script; +Renderer.prototype.renderBorders = function(borders) { + borders.forEach(this.renderBorder, this); +}; - 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 += "?"; +Renderer.prototype.renderBorder = function(data) { + if (!this.isTransparent(data.color) && data.args !== null) { + this.drawShape(data.args, data.color); } - 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; - }; +Renderer.prototype.renderBackgroundImage = function(container, bounds) { - script.setAttribute("type", "text/javascript"); - script.setAttribute("src", scriptUrl); - imageObj.script = script; - window.document.body.appendChild(script); +}; - } +Renderer.prototype.isTransparent = function(color) { + return (!color || color === "transparent" || color === "rgba(0, 0, 0, 0)"); +}; - 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); - } +Renderer.prototype.clip = NYI(); +Renderer.prototype.rectangle = NYI(); +Renderer.prototype.shape = NYI(); - function loadPseudoElementImages(element) { - loadPseudoElement(element, ":before"); - loadPseudoElement(element, ":after"); - } +function Support() { + this.rangeBounds = this.testRangeBounds(); +} - function loadGradientImage(backgroundImage, bounds) { - var img = _html2canvas.Generate.Gradient(backgroundImage, bounds); +Support.prototype.testRangeBounds = function() { + var range, testElement, rangeBounds, rangeHeight, support = false; - if (img !== undefined){ - images[backgroundImage] = { - img: img, - succeeded: true - }; - images.numTotal++; - images.numLoaded++; - start(); - } - } + if (document.createRange) { + range = document.createRange(); + if (range.getBoundingClientRect) { + testElement = document.createElement('boundtest'); + testElement.style.height = "123px"; + testElement.style.display = "block"; + document.body.appendChild(testElement); - function invalidBackgrounds(background_image) { - return (background_image && background_image.method && background_image.args && background_image.args.length > 0 ); - } + range.selectNode(testElement); + rangeBounds = range.getBoundingClientRect(); + rangeHeight = rangeBounds.height; - 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); + if (rangeHeight === 123) { + support = true; } - } + document.body.removeChild(testElement); } - - // 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 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){ - function sortZindex(a, b) { - if (a === 'children') { - return -1; - } else if (b === 'children') { - return 1; - } else { - return a - b; - } - } - - // 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) { - contextForChildren = stub.context = { - children: [{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(sortZindex).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,", - "", - "", - "
", - "sup", - "
", - "", - "" - ].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, - async: false, // If true, parsing will not block, but if the user scrolls during parse the image can get weird - - // 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; - } - } - _html2canvas.Parse( images, options, function(queue) { - 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 +function CanvasRenderer() { + Renderer.call(this); + this.canvas = document.createElement("canvas"); + this.canvas.width = window.innerWidth; + this.canvas.height = window.innerHeight; + this.ctx = this.canvas.getContext("2d"); + this.ctx.textBaseline = "bottom"; + document.body.appendChild(this.canvas); +} + +CanvasRenderer.prototype = Object.create(Renderer.prototype); + +CanvasRenderer.prototype.setFillStyle = function(color) { + this.ctx.fillStyle = color; + return this.ctx; }; -_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(parsedData.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; - }; +CanvasRenderer.prototype.rectangle = function(left, top, width, height, color) { + this.setFillStyle(color).fillRect(left, top, width, height); }; + +CanvasRenderer.prototype.drawShape = function(shape, color) { + this.shape(shape); + this.setFillStyle(color).fill(); +}; + +CanvasRenderer.prototype.clip = function(shape, callback, context) { + this.ctx.save(); + this.shape(shape).clip(); + callback.call(context); + this.ctx.restore(); +}; + +CanvasRenderer.prototype.shape = function(shape) { + this.ctx.beginPath(); + shape.forEach(function(point, index) { + this.ctx[(index === 0) ? "moveTo" : point[0] + "To" ].apply(this.ctx, point.slice(1)); + }, this); + this.ctx.closePath(); + return this.ctx; +}; + +CanvasRenderer.prototype.font = function(color, style, variant, weight, size, family) { + this.setFillStyle(color).font = [style, variant, weight, size, family].join(" "); +}; + +CanvasRenderer.prototype.setOpacity = function(opacity) { + this.ctx.globalAlpha = opacity; +}; + +CanvasRenderer.prototype.text = function(text, left, bottom) { + this.ctx.fillText(text, left, bottom); +}; + })(window,document); \ No newline at end of file diff --git a/build/html2canvas.min.js b/build/html2canvas.min.js index 4dd4709..76e8a8f 100644 --- a/build/html2canvas.min.js +++ b/build/html2canvas.min.js @@ -1,8 +1,7 @@ /* - html2canvas 0.4.1 - Copyright (c) 2013 Niklas von Hertzen + html2canvas 0.5.0-rc1 + Copyright (c) 2014 Niklas von Hertzen Released under MIT License */ -(function(t,e,n){"use strict";function r(t,e,n){var r,a=t.runtimeStyle&&t.runtimeStyle[e],o=t.style;return!/^-?[0-9]+\.?[0-9]*(?:px)?$/i.test(n)&&/^-?\d/.test(n)&&(r=o.left,a&&(t.runtimeStyle.left=t.currentStyle.left),o.left="fontSize"===e?"1em":n||0,n=o.pixelLeft+"px",o.left=r,a&&(t.runtimeStyle.left=a)),/^(thin|medium|thick)$/i.test(n)?n:Math.round(parseFloat(n))+"px"}function a(t){return parseInt(t,10)}function o(t){return-1!==(""+t).indexOf("%")}function i(t,e,a,o){if(t=(t||"").split(","),t=t[o||0]||t[0]||"auto",t=d.Util.trimText(t).split(" "),"backgroundSize"===a&&t[0]&&t[0].match(/^(cover|contain|auto)$/))return t;if(t[0]=-1===t[0].indexOf("%")?r(e,a+"X",t[0]):t[0],t[1]===n){if("backgroundSize"===a)return t[1]="auto",t;t[1]=t[0]}return t[1]=-1===t[1].indexOf("%")?r(e,a+"Y",t[1]):t[1],t}function l(t,e){var n=[];return{storage:n,width:t,height:e,clip:function(){n.push({type:"function",name:"clip",arguments:arguments})},translate:function(){n.push({type:"function",name:"translate",arguments:arguments})},fill:function(){n.push({type:"function",name:"fill",arguments:arguments})},save:function(){n.push({type:"function",name:"save",arguments:arguments})},restore:function(){n.push({type:"function",name:"restore",arguments:arguments})},fillRect:function(){n.push({type:"function",name:"fillRect",arguments:arguments})},createPattern:function(){n.push({type:"function",name:"createPattern",arguments:arguments})},drawShape:function(){var t=[];return n.push({type:"function",name:"drawShape",arguments:t}),{moveTo:function(){t.push({name:"moveTo",arguments:arguments})},lineTo:function(){t.push({name:"lineTo",arguments:arguments})},arcTo:function(){t.push({name:"arcTo",arguments:arguments})},bezierCurveTo:function(){t.push({name:"bezierCurveTo",arguments:arguments})},quadraticCurveTo:function(){t.push({name:"quadraticCurveTo",arguments:arguments})}}},drawImage:function(){n.push({type:"function",name:"drawImage",arguments:arguments})},fillText:function(){n.push({type:"function",name:"fillText",arguments:arguments})},setVariable:function(t,e){return n.push({type:"variable",name:t,arguments:e}),e}}}var s,c,d={};d.Util={},d.Util.log=function(e){d.logging&&t.console&&t.console.log&&t.console.log(e)},d.Util.trimText=function(t){return function(e){return t?t.apply(e):((e||"")+"").replace(/^\s+|\s+$/g,"")}}(String.prototype.trim),d.Util.asFloat=function(t){return parseFloat(t)},function(){var t=/((rgba|rgb)\([^\)]+\)(\s-?\d+px){0,})/g,e=/(-?\d+px)|(#.+)|(rgb\(.+\))|(rgba\(.+\))/g;d.Util.parseTextShadows=function(n){if(!n||"none"===n)return[];for(var r=n.match(t),a=[],o=0;r&&r.length>o;o++){var i=r[o].match(e);a.push({color:i[0],offsetX:i[1]?i[1].replace("px",""):0,offsetY:i[2]?i[2].replace("px",""):0,blur:i[3]?i[3].replace("px",""):0})}return a}}(),d.Util.parseBackgroundImage=function(t){var e,n,r,a,o,i,l,s,c=" \r\n ",d=[],h=0,u=0,f=function(){e&&('"'===n.substr(0,1)&&(n=n.substr(1,n.length-2)),n&&s.push(n),"-"===e.substr(0,1)&&(a=e.indexOf("-",1)+1)>0&&(r=e.substr(0,a),e=e.substr(a)),d.push({prefix:r,method:e.toLowerCase(),value:o,args:s})),s=[],e=r=n=o=""};f();for(var p=0,g=t.length;g>p;p++)if(i=t[p],!(0===h&&c.indexOf(i)>-1)){switch(i){case'"':l?l===i&&(l=null):l=i;break;case"(":if(l)break;if(0===h){h=1,o+=i;continue}u++;break;case")":if(l)break;if(1===h){if(0===u){h=0,o+=i,f();continue}u--}break;case",":if(l)break;if(0===h){f();continue}if(1===h&&0===u&&!e.match(/^url$/i)){s.push(n),n="",o+=i;continue}}o+=i,0===h?e+=i:n+=i}return f(),d},d.Util.Bounds=function(t){var e,n={};return t.getBoundingClientRect&&(e=t.getBoundingClientRect(),n.top=e.top,n.bottom=e.bottom||e.top+e.height,n.left=e.left,n.width=t.offsetWidth,n.height=t.offsetHeight),n},d.Util.OffsetBounds=function(t){var e=t.offsetParent?d.Util.OffsetBounds(t.offsetParent):{top:0,left:0};return{top:t.offsetTop+e.top,bottom:t.offsetTop+t.offsetHeight+e.top,left:t.offsetLeft+e.left,width:t.offsetWidth,height:t.offsetHeight}},d.Util.getCSS=function(t,n,r){s!==t&&(c=e.defaultView.getComputedStyle(t,null));var o=c[n];if(/^background(Size|Position)$/.test(n))return i(o,t,n,r);if(/border(Top|Bottom)(Left|Right)Radius/.test(n)){var l=o.split(" ");return 1>=l.length&&(l[1]=l[0]),l.map(a)}return o},d.Util.resizeBounds=function(t,e,n,r,a){var o,i,l=n/r,s=t/e;return a&&"auto"!==a?s>l^"contain"===a?(i=r,o=r*s):(o=n,i=n/s):(o=n,i=r),{width:o,height:i}},d.Util.BackgroundPosition=function(t,e,n,r,a){var i,l,s=d.Util.getCSS(t,"backgroundPosition",r);return 1===s.length&&(s=[s[0],s[0]]),i=o(s[0])?(e.width-(a||n).width)*(parseFloat(s[0])/100):parseInt(s[0],10),l="auto"===s[1]?i/n.width*n.height:o(s[1])?(e.height-(a||n).height)*parseFloat(s[1])/100:parseInt(s[1],10),"auto"===s[0]&&(i=l/n.height*n.width),{left:i,top:l}},d.Util.BackgroundSize=function(t,e,n,r){var a,i,l=d.Util.getCSS(t,"backgroundSize",r);if(1===l.length&&(l=[l[0],l[0]]),o(l[0]))a=e.width*parseFloat(l[0])/100;else{if(/contain|cover/.test(l[0]))return d.Util.resizeBounds(n.width,n.height,e.width,e.height,l[0]);a=parseInt(l[0],10)}return i="auto"===l[0]&&"auto"===l[1]?n.height:"auto"===l[1]?a/n.width*n.height:o(l[1])?e.height*parseFloat(l[1])/100:parseInt(l[1],10),"auto"===l[0]&&(a=i/n.height*n.width),{width:a,height:i}},d.Util.BackgroundRepeat=function(t,e){var n=d.Util.getCSS(t,"backgroundRepeat").split(",").map(d.Util.trimText);return n[e]||n[0]},d.Util.Extend=function(t,e){for(var n in t)t.hasOwnProperty(n)&&(e[n]=t[n]);return e},d.Util.Children=function(t){var e;try{e=t.nodeName&&"IFRAME"===t.nodeName.toUpperCase()?t.contentDocument||t.contentWindow.document:function(t){var e=[];return null!==t&&function(t,e){var r=t.length,a=0;if("number"==typeof e.length)for(var o=e.length;o>a;a++)t[r++]=e[a];else for(;e[a]!==n;)t[r++]=e[a++];return t.length=r,t}(e,t),e}(t.childNodes)}catch(r){d.Util.log("html2canvas.Util.Children failed with exception: "+r.message),e=[]}return e},d.Util.isTransparent=function(t){return!t||"transparent"===t||"rgba(0, 0, 0, 0)"===t},d.Util.Font=function(){var t={};return function(e,r,a){if(t[e+"-"+r]!==n)return t[e+"-"+r];var o,i,l,s=a.createElement("div"),c=a.createElement("img"),d=a.createElement("span"),h="Hidden Text";return s.style.visibility="hidden",s.style.fontFamily=e,s.style.fontSize=r,s.style.margin=0,s.style.padding=0,a.body.appendChild(s),c.src="data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACwAAAAAAQABAAACAkQBADs=",c.width=1,c.height=1,c.style.margin=0,c.style.padding=0,c.style.verticalAlign="baseline",d.style.fontFamily=e,d.style.fontSize=r,d.style.margin=0,d.style.padding=0,d.appendChild(a.createTextNode(h)),s.appendChild(d),s.appendChild(c),o=c.offsetTop-d.offsetTop+1,s.removeChild(d),s.appendChild(a.createTextNode(h)),s.style.lineHeight="normal",c.style.verticalAlign="super",i=c.offsetTop-s.offsetTop+1,l={baseline:o,lineWidth:1,middle:i},t[e+"-"+r]=l,a.body.removeChild(s),l}}(),function(){function t(t){return function(e){try{t.addColorStop(e.stop,e.color)}catch(r){n.log(["failed to add color stop: ",r,"; tried to add: ",e])}}}var n=d.Util,r={};d.Generate=r;var a=[/^(-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,%\(\)]+)\)$/];r.parseGradient=function(t,e){var n,r,o,i,l,s,c,d,h,u,f,p,g=a.length;for(r=0;g>r&&!(o=t.match(a[r]));r+=1);if(o)switch(o[1]){case"-webkit-linear-gradient":case"-o-linear-gradient":if(n={type:"linear",x0:null,y0:null,x1:null,y1:null,colorStops:[]},l=o[2].match(/\w+/g))for(s=l.length,r=0;s>r;r+=1)switch(l[r]){case"top":n.y0=0,n.y1=e.height;break;case"right":n.x0=e.width,n.x1=0;break;case"bottom":n.y0=e.height,n.y1=0;break;case"left":n.x0=0,n.x1=e.width}if(null===n.x0&&null===n.x1&&(n.x0=n.x1=e.width/2),null===n.y0&&null===n.y1&&(n.y0=n.y1=e.height/2),l=o[3].match(/((?:rgb|rgba)\(\d{1,3},\s\d{1,3},\s\d{1,3}(?:,\s[0-9\.]+)?\)(?:\s\d{1,3}(?:%|px))?)+/g))for(s=l.length,c=1/Math.max(s-1,1),r=0;s>r;r+=1)d=l[r].match(/((?:rgb|rgba)\(\d{1,3},\s\d{1,3},\s\d{1,3}(?:,\s[0-9\.]+)?\))\s*(\d{1,3})?(%|px)?/),d[2]?(i=parseFloat(d[2]),i/="%"===d[3]?100:e.width):i=r*c,n.colorStops.push({color:d[1],stop:i});break;case"-webkit-gradient":if(n={type:"radial"===o[2]?"circle":o[2],x0:0,y0:0,x1:0,y1:0,colorStops:[]},l=o[3].match(/(\d{1,3})%?\s(\d{1,3})%?,\s(\d{1,3})%?\s(\d{1,3})%?/),l&&(n.x0=l[1]*e.width/100,n.y0=l[2]*e.height/100,n.x1=l[3]*e.width/100,n.y1=l[4]*e.height/100),l=o[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))for(s=l.length,r=0;s>r;r+=1)d=l[r].match(/(from|to|color-stop)\(([0-9\.]+)?(?:,\s)?((?:rgb|rgba)\(\d{1,3},\s\d{1,3},\s\d{1,3}(?:,\s[0-9\.]+)?\))\)/),i=parseFloat(d[2]),"from"===d[1]&&(i=0),"to"===d[1]&&(i=1),n.colorStops.push({color:d[3],stop:i});break;case"-moz-linear-gradient":if(n={type:"linear",x0:0,y0:0,x1:0,y1:0,colorStops:[]},l=o[2].match(/(\d{1,3})%?\s(\d{1,3})%?/),l&&(n.x0=l[1]*e.width/100,n.y0=l[2]*e.height/100,n.x1=e.width-n.x0,n.y1=e.height-n.y0),l=o[3].match(/((?:rgb|rgba)\(\d{1,3},\s\d{1,3},\s\d{1,3}(?:,\s[0-9\.]+)?\)(?:\s\d{1,3}%)?)+/g))for(s=l.length,c=1/Math.max(s-1,1),r=0;s>r;r+=1)d=l[r].match(/((?:rgb|rgba)\(\d{1,3},\s\d{1,3},\s\d{1,3}(?:,\s[0-9\.]+)?\))\s*(\d{1,3})?(%)?/),d[2]?(i=parseFloat(d[2]),d[3]&&(i/=100)):i=r*c,n.colorStops.push({color:d[1],stop:i});break;case"-webkit-radial-gradient":case"-moz-radial-gradient":case"-o-radial-gradient":if(n={type:"circle",x0:0,y0:0,x1:e.width,y1:e.height,cx:0,cy:0,rx:0,ry:0,colorStops:[]},l=o[2].match(/(\d{1,3})%?\s(\d{1,3})%?/),l&&(n.cx=l[1]*e.width/100,n.cy=l[2]*e.height/100),l=o[3].match(/\w+/),d=o[4].match(/[a-z\-]*/),l&&d)switch(d[0]){case"farthest-corner":case"cover":case"":h=Math.sqrt(Math.pow(n.cx,2)+Math.pow(n.cy,2)),u=Math.sqrt(Math.pow(n.cx,2)+Math.pow(n.y1-n.cy,2)),f=Math.sqrt(Math.pow(n.x1-n.cx,2)+Math.pow(n.y1-n.cy,2)),p=Math.sqrt(Math.pow(n.x1-n.cx,2)+Math.pow(n.cy,2)),n.rx=n.ry=Math.max(h,u,f,p);break;case"closest-corner":h=Math.sqrt(Math.pow(n.cx,2)+Math.pow(n.cy,2)),u=Math.sqrt(Math.pow(n.cx,2)+Math.pow(n.y1-n.cy,2)),f=Math.sqrt(Math.pow(n.x1-n.cx,2)+Math.pow(n.y1-n.cy,2)),p=Math.sqrt(Math.pow(n.x1-n.cx,2)+Math.pow(n.cy,2)),n.rx=n.ry=Math.min(h,u,f,p);break;case"farthest-side":"circle"===l[0]?n.rx=n.ry=Math.max(n.cx,n.cy,n.x1-n.cx,n.y1-n.cy):(n.type=l[0],n.rx=Math.max(n.cx,n.x1-n.cx),n.ry=Math.max(n.cy,n.y1-n.cy));break;case"closest-side":case"contain":"circle"===l[0]?n.rx=n.ry=Math.min(n.cx,n.cy,n.x1-n.cx,n.y1-n.cy):(n.type=l[0],n.rx=Math.min(n.cx,n.x1-n.cx),n.ry=Math.min(n.cy,n.y1-n.cy))}if(l=o[5].match(/((?:rgb|rgba)\(\d{1,3},\s\d{1,3},\s\d{1,3}(?:,\s[0-9\.]+)?\)(?:\s\d{1,3}(?:%|px))?)+/g))for(s=l.length,c=1/Math.max(s-1,1),r=0;s>r;r+=1)d=l[r].match(/((?:rgb|rgba)\(\d{1,3},\s\d{1,3},\s\d{1,3}(?:,\s[0-9\.]+)?\))\s*(\d{1,3})?(%|px)?/),d[2]?(i=parseFloat(d[2]),i/="%"===d[3]?100:e.width):i=r*c,n.colorStops.push({color:d[1],stop:i})}return n},r.Gradient=function(n,r){if(0!==r.width&&0!==r.height){var a,o,i=e.createElement("canvas"),l=i.getContext("2d");if(i.width=r.width,i.height=r.height,a=d.Generate.parseGradient(n,r))switch(a.type){case"linear":o=l.createLinearGradient(a.x0,a.y0,a.x1,a.y1),a.colorStops.forEach(t(o)),l.fillStyle=o,l.fillRect(0,0,r.width,r.height);break;case"circle":o=l.createRadialGradient(a.cx,a.cy,0,a.cx,a.cy,a.rx),a.colorStops.forEach(t(o)),l.fillStyle=o,l.fillRect(0,0,r.width,r.height);break;case"ellipse":var s=e.createElement("canvas"),c=s.getContext("2d"),h=Math.max(a.rx,a.ry),u=2*h;s.width=s.height=u,o=c.createRadialGradient(a.rx,a.ry,0,a.rx,a.ry,h),a.colorStops.forEach(t(o)),c.fillStyle=o,c.fillRect(0,0,u,u),l.fillStyle=a.colorStops[a.colorStops.length-1].color,l.fillRect(0,0,i.width,i.height),l.drawImage(s,a.cx-a.rx,a.cy-a.ry,2*a.rx,2*a.ry)}return i}},r.ListAlpha=function(t){var e,n="";do e=t%26,n=String.fromCharCode(e+64)+n,t/=26;while(26*t>26);return n},r.ListRoman=function(t){var e,n=["M","CM","D","CD","C","XC","L","XL","X","IX","V","IV","I"],r=[1e3,900,500,400,100,90,50,40,10,9,5,4,1],a="",o=n.length;if(0>=t||t>=4e3)return t;for(e=0;o>e;e+=1)for(;t>=r[e];)t-=r[e],a+=n[e];return a}}(),d.Parse=function(r,a,o){function i(){var t=be(e.documentElement,"backgroundColor"),n=me.isTransparent(t)&&fe===e.body,r=ce(fe,null,!1,n);s(fe),ue(fe,r,function(){n&&(t=r.backgroundColor),c(),me.log("Done parsing, moving to Render."),o({backgroundColor:t,stack:r})})}function s(t){function n(){for(var t=/:before|:after/,n=e.styleSheets,r=0,a=n.length;a>r;r++)try{for(var o=n[r].cssRules,i=0,s=o.length;s>i;i++)t.test(o[i].selectorText)&&l.push(o[i].selectorText)}catch(c){}for(r=0,a=l.length;a>r;r++)l[r]=l[r].match(/(^[^:]*)/)[1]}function r(){for(var t=e.querySelectorAll(l.join(",")),n=0,r=t.length;r>n;n++)a(t[n])}function a(t){var e=Y(t,":before"),n=Y(t,":after");e&&i.push({type:"before",pseudo:e,el:t}),n&&i.push({type:"after",pseudo:n,el:t})}function o(){i.forEach(function(t){h(t.el,ve+"-parent")}),i.forEach(function(t){"before"===t.type?t.el.insertBefore(t.pseudo,t.el.firstChild):t.el.appendChild(t.pseudo)})}var i=[],l=[];n(),r(t),o()}function c(){xe.removeChild(Ce);for(var t=e.getElementsByClassName(ve+"-element");t.length;)t[0].parentNode.removeChild(t[0]);for(var n=e.getElementsByClassName(ve+"-parent");n.length;)u(n[0],ve+"-parent")}function h(t,e){t.classList?t.classList.add(e):t.className=t.className+" "+e}function u(t,e){t.classList?t.classList.remove(e):t.className=t.className.replace(e,"").trim()}function f(){return Math.max(Math.max(ge.body.scrollWidth,ge.documentElement.scrollWidth),Math.max(ge.body.offsetWidth,ge.documentElement.offsetWidth),Math.max(ge.body.clientWidth,ge.documentElement.clientWidth))}function p(){return Math.max(Math.max(ge.body.scrollHeight,ge.documentElement.scrollHeight),Math.max(ge.body.offsetHeight,ge.documentElement.offsetHeight),Math.max(ge.body.clientHeight,ge.documentElement.clientHeight))}function g(t,e){var n=parseInt(be(t,e),10);return isNaN(n)?0:n}function m(t,e,n,r,a,o){"transparent"!==o&&(t.setVariable("fillStyle",o),t.fillRect(e,n,r,a),pe+=1)}function y(t,e,r){return t.length>0?e+r.toUpperCase():n}function w(t,e){switch(e){case"lowercase":return t.toLowerCase();case"capitalize":return t.replace(/(^|\s|:|-|\(|\))([a-z])/g,y);case"uppercase":return t.toUpperCase();default:return t}}function x(t){return/^(normal|none|0px)$/.test(t)}function b(t,e,n,r){null!==t&&me.trimText(t).length>0&&(r.fillText(t,e,n),pe+=1)}function v(t,e,r,a){var o=!1,i=be(e,"fontWeight"),l=be(e,"fontFamily"),s=be(e,"fontSize"),c=me.parseTextShadows(be(e,"textShadow"));switch(parseInt(i,10)){case 401:i="bold";break;case 400:i="normal"}return t.setVariable("fillStyle",a),t.setVariable("font",[be(e,"fontStyle"),be(e,"fontVariant"),i,s,l].join(" ")),t.setVariable("textAlign",o?"right":"left"),c.length&&(t.setVariable("shadowColor",c[0].color),t.setVariable("shadowOffsetX",c[0].offsetX),t.setVariable("shadowOffsetY",c[0].offsetY),t.setVariable("shadowBlur",c[0].blur)),"none"!==r?me.Font(l,s,ge):n}function C(t,e,n,r,a){switch(e){case"underline":m(t,n.left,Math.round(n.top+r.baseline+r.lineWidth),n.width,1,a);break;case"overline":m(t,n.left,Math.round(n.top),n.width,1,a);break;case"line-through":m(t,n.left,Math.ceil(n.top+r.middle+r.lineWidth),n.width,1,a)}}function k(t,e,n,r,a){var o;if(ye.rangeBounds&&!a)("none"!==n||0!==me.trimText(e).length)&&(o=T(e,t.node,t.textOffset)),t.textOffset+=e.length;else if(t.node&&"string"==typeof t.node.nodeValue){var i=r?t.node.splitText(e.length):null;o=S(t.node,a),t.node=i}return o}function T(t,e,n){var r=ge.createRange();return r.setStart(e,n),r.setEnd(e,n+t.length),r.getBoundingClientRect()}function S(t,e){var n=t.parentNode,r=ge.createElement("wrapper"),a=t.cloneNode(!0);r.appendChild(t.cloneNode(!0)),n.replaceChild(r,t);var o=e?me.OffsetBounds(r):me.Bounds(r);return n.replaceChild(a,r),o}function E(t,e,n){var r,o,i=n.ctx,l=be(t,"color"),s=be(t,"textDecoration"),c=be(t,"textAlign"),d={node:e,textOffset:0};me.trimText(e.nodeValue).length>0&&(e.nodeValue=w(e.nodeValue,be(t,"textTransform")),c=c.replace(["-webkit-auto"],["auto"]),o=!a.letterRendering&&/^(left|right|justify|auto)$/.test(c)&&x(be(t,"letterSpacing"))?e.nodeValue.split(/(\b| )/):e.nodeValue.split(""),r=v(i,t,s,l),a.chinese&&o.forEach(function(t,e){/.*[\u4E00-\u9FA5].*$/.test(t)&&(t=t.split(""),t.unshift(e,1),o.splice.apply(o,t))}),o.forEach(function(t,e){var a=k(d,t,s,o.length-1>e,n.transform.matrix);a&&(b(t,a.left,a.bottom,i),C(i,s,a,r,l))}))}function R(t,e){var n,r,a=ge.createElement("boundelement");return a.style.display="inline",n=t.style.listStyleType,t.style.listStyleType="none",a.appendChild(ge.createTextNode(e)),t.insertBefore(a,t.firstChild),r=me.Bounds(a),t.removeChild(a),t.style.listStyleType=n,r}function M(t){var e=-1,n=1,r=t.parentNode.childNodes;if(t.parentNode){for(;r[++e]!==t;)1===r[e].nodeType&&n++;return n}return-1}function I(t,e){var n,r=M(t);switch(e){case"decimal":n=r;break;case"decimal-leading-zero":n=1===(""+r).length?r="0"+(""+r):""+r;break;case"upper-roman":n=d.Generate.ListRoman(r);break;case"lower-roman":n=d.Generate.ListRoman(r).toLowerCase();break;case"lower-alpha":n=d.Generate.ListAlpha(r).toLowerCase();break;case"upper-alpha":n=d.Generate.ListAlpha(r)}return n+". "}function L(t,e,n){var r,a,o,i=e.ctx,l=be(t,"listStyleType");if(/^(decimal|decimal-leading-zero|upper-alpha|upper-latin|upper-roman|lower-alpha|lower-greek|lower-latin|lower-roman)$/i.test(l)){if(a=I(t,l),o=R(t,a),v(i,t,"none",be(t,"color")),"inside"!==be(t,"listStylePosition"))return;i.setVariable("textAlign","left"),r=n.left,b(a,r,o.bottom,i)}}function O(t){var e=r[t];return e&&e.succeeded===!0?e.img:!1}function z(t,e){var n=Math.max(t.left,e.left),r=Math.max(t.top,e.top),a=Math.min(t.left+t.width,e.left+e.width),o=Math.min(t.top+t.height,e.top+e.height);return{left:n,top:r,width:a-n,height:o-r}}function B(t,e,n){var r,a="static"!==e.cssPosition,o=a?be(t,"zIndex"):"auto",i=be(t,"opacity"),l="none"!==be(t,"cssFloat");e.zIndex=r=U(o),r.isPositioned=a,r.isFloated=l,r.opacity=i,r.ownStacking="auto"!==o||1>i,r.depth=n?n.zIndex.depth+1:0,n&&n.zIndex.children.push(e)}function U(t){return{depth:0,zindex:t,children:[]}}function A(t,e,n,r,a){var o=g(e,"paddingLeft"),i=g(e,"paddingTop"),l=g(e,"paddingRight"),s=g(e,"paddingBottom");_(t,n,0,0,n.width,n.height,r.left+o+a[3].width,r.top+i+a[0].width,r.width-(a[1].width+a[3].width+o+l),r.height-(a[0].width+a[2].width+i+s))}function N(t){return["Top","Right","Bottom","Left"].map(function(e){return{width:g(t,"border"+e+"Width"),color:be(t,"border"+e+"Color")}})}function P(t){return["TopLeft","TopRight","BottomRight","BottomLeft"].map(function(e){return be(t,"border"+e+"Radius")})}function F(t,e,n,r){var a=4*((Math.sqrt(2)-1)/3),o=n*a,i=r*a,l=t+n,s=e+r;return{topLeft:V({x:t,y:s},{x:t,y:s-i},{x:l-o,y:e},{x:l,y:e}),topRight:V({x:t,y:e},{x:t+o,y:e},{x:l,y:s-i},{x:l,y:s}),bottomRight:V({x:l,y:e},{x:l,y:e+i},{x:t+o,y:s},{x:t,y:s}),bottomLeft:V({x:l,y:s},{x:l-o,y:s},{x:t,y:e+i},{x:t,y:e})}}function V(t,e,n,r){var a=function(t,e,n){return{x:t.x+(e.x-t.x)*n,y:t.y+(e.y-t.y)*n}};return{start:t,startControl:e,endControl:n,end:r,subdivide:function(o){var i=a(t,e,o),l=a(e,n,o),s=a(n,r,o),c=a(i,l,o),d=a(l,s,o),h=a(c,d,o);return[V(t,i,c,h),V(h,d,s,r)]},curveTo:function(t){t.push(["bezierCurve",e.x,e.y,n.x,n.y,r.x,r.y])},curveToReversed:function(r){r.push(["bezierCurve",n.x,n.y,e.x,e.y,t.x,t.y])}}}function D(t,e,n,r,a,o,i){e[0]>0||e[1]>0?(t.push(["line",r[0].start.x,r[0].start.y]),r[0].curveTo(t),r[1].curveTo(t)):t.push(["line",o,i]),(n[0]>0||n[1]>0)&&t.push(["line",a[0].start.x,a[0].start.y])}function $(t,e,n,r,a,o,i){var l=[];return e[0]>0||e[1]>0?(l.push(["line",r[1].start.x,r[1].start.y]),r[1].curveTo(l)):l.push(["line",t.c1[0],t.c1[1]]),n[0]>0||n[1]>0?(l.push(["line",o[0].start.x,o[0].start.y]),o[0].curveTo(l),l.push(["line",i[0].end.x,i[0].end.y]),i[0].curveToReversed(l)):(l.push(["line",t.c2[0],t.c2[1]]),l.push(["line",t.c3[0],t.c3[1]])),e[0]>0||e[1]>0?(l.push(["line",a[1].end.x,a[1].end.y]),a[1].curveToReversed(l)):l.push(["line",t.c4[0],t.c4[1]]),l}function G(t,e,n){var r=t.left,a=t.top,o=t.width,i=t.height,l=e[0][0],s=e[0][1],c=e[1][0],d=e[1][1],h=e[2][0],u=e[2][1],f=e[3][0],p=e[3][1],g=o-c,m=i-u,y=o-h,w=i-p;return{topLeftOuter:F(r,a,l,s).topLeft.subdivide(.5),topLeftInner:F(r+n[3].width,a+n[0].width,Math.max(0,l-n[3].width),Math.max(0,s-n[0].width)).topLeft.subdivide(.5),topRightOuter:F(r+g,a,c,d).topRight.subdivide(.5),topRightInner:F(r+Math.min(g,o+n[3].width),a+n[0].width,g>o+n[3].width?0:c-n[3].width,d-n[0].width).topRight.subdivide(.5),bottomRightOuter:F(r+y,a+m,h,u).bottomRight.subdivide(.5),bottomRightInner:F(r+Math.min(y,o+n[3].width),a+Math.min(m,i+n[0].width),Math.max(0,h-n[1].width),Math.max(0,u-n[2].width)).bottomRight.subdivide(.5),bottomLeftOuter:F(r,a+w,f,p).bottomLeft.subdivide(.5),bottomLeftInner:F(r+n[3].width,a+w,Math.max(0,f-n[3].width),Math.max(0,p-n[2].width)).bottomLeft.subdivide(.5)}}function W(t,e,n,r,a){var o=be(t,"backgroundClip"),i=[];switch(o){case"content-box":case"padding-box":D(i,r[0],r[1],e.topLeftInner,e.topRightInner,a.left+n[3].width,a.top+n[0].width),D(i,r[1],r[2],e.topRightInner,e.bottomRightInner,a.left+a.width-n[1].width,a.top+n[0].width),D(i,r[2],r[3],e.bottomRightInner,e.bottomLeftInner,a.left+a.width-n[1].width,a.top+a.height-n[2].width),D(i,r[3],r[0],e.bottomLeftInner,e.topLeftInner,a.left+n[3].width,a.top+a.height-n[2].width);break;default:D(i,r[0],r[1],e.topLeftOuter,e.topRightOuter,a.left,a.top),D(i,r[1],r[2],e.topRightOuter,e.bottomRightOuter,a.left+a.width,a.top),D(i,r[2],r[3],e.bottomRightOuter,e.bottomLeftOuter,a.left+a.width,a.top+a.height),D(i,r[3],r[0],e.bottomLeftOuter,e.topLeftOuter,a.left,a.top+a.height)}return i}function H(t,e,n){var r,a,o,i,l,s,c=e.left,d=e.top,h=e.width,u=e.height,f=P(t),p=G(e,f,n),g={clip:W(t,p,n,f,e),borders:[]};for(r=0;4>r;r++)if(n[r].width>0){switch(a=c,o=d,i=h,l=u-n[2].width,r){case 0:l=n[0].width,s=$({c1:[a,o],c2:[a+i,o],c3:[a+i-n[1].width,o+l],c4:[a+n[3].width,o+l]},f[0],f[1],p.topLeftOuter,p.topLeftInner,p.topRightOuter,p.topRightInner);break;case 1:a=c+h-n[1].width,i=n[1].width,s=$({c1:[a+i,o],c2:[a+i,o+l+n[2].width],c3:[a,o+l],c4:[a,o+n[0].width]},f[1],f[2],p.topRightOuter,p.topRightInner,p.bottomRightOuter,p.bottomRightInner);break;case 2:o=o+u-n[2].width,l=n[2].width,s=$({c1:[a+i,o+l],c2:[a,o+l],c3:[a+n[3].width,o],c4:[a+i-n[3].width,o]},f[2],f[3],p.bottomRightOuter,p.bottomRightInner,p.bottomLeftOuter,p.bottomLeftInner);break;case 3:i=n[3].width,s=$({c1:[a,o+l+n[2].width],c2:[a,o],c3:[a+i,o+n[0].width],c4:[a+i,o+l]},f[3],f[0],p.bottomLeftOuter,p.bottomLeftInner,p.topLeftOuter,p.topLeftInner)}g.borders.push({args:s,color:n[r].color})}return g}function j(t,e){var n=t.drawShape();return e.forEach(function(t,e){n[0===e?"moveTo":t[0]+"To"].apply(null,t.slice(1))}),n}function q(t,e,n){"transparent"!==n&&(t.setVariable("fillStyle",n),j(t,e),t.fill(),pe+=1)}function X(t,e,n){var r,a,o=ge.createElement("valuewrap"),i=["lineHeight","textAlign","fontFamily","color","fontSize","paddingLeft","paddingTop","width","height","border","borderLeftWidth","borderTopWidth"];i.forEach(function(e){try{o.style[e]=be(t,e)}catch(n){me.log("html2canvas: Parse: Exception caught in renderFormValue: "+n.message)}}),o.style.borderColor="black",o.style.borderStyle="solid",o.style.display="block",o.style.position="absolute",(/^(submit|reset|button|text|password)$/.test(t.type)||"SELECT"===t.nodeName)&&(o.style.lineHeight=be(t,"height")),o.style.top=e.top+"px",o.style.left=e.left+"px",r="SELECT"===t.nodeName?(t.options[t.selectedIndex]||0).text:t.value,r||(r=t.placeholder),a=ge.createTextNode(r),o.appendChild(a),xe.appendChild(o),E(t,a,n),xe.removeChild(o)}function _(t){t.drawImage.apply(t,Array.prototype.slice.call(arguments,1)),pe+=1}function Y(n,r){var a=t.getComputedStyle(n,r),o=t.getComputedStyle(n);if(a&&a.content&&"none"!==a.content&&"-moz-alt-content"!==a.content&&"none"!==a.display&&o.content!==a.content){var i=a.content+"";("'"===i[0]||'"'===i[0])&&(i=i.replace(/(^['"])|(['"]$)/g,""));var l="url"===i.substr(0,3),s=e.createElement(l?"img":"span");return s.className=ve+"-element ",Object.keys(a).filter(Q).forEach(function(t){try{s.style[t]=a[t]}catch(e){me.log(["Tried to assign readonly property ",t,"Error:",e])}}),l?s.src=me.parseBackgroundImage(i)[0].args[0]:s.innerHTML=i,s}}function Q(e){return isNaN(t.parseInt(e,10))}function J(t,e,n,r){var a=Math.round(r.left+n.left),o=Math.round(r.top+n.top);t.createPattern(e),t.translate(a,o),t.fill(),t.translate(-a,-o)}function K(t,e,n,r,a,o,i,l){var s=[];s.push(["line",Math.round(a),Math.round(o)]),s.push(["line",Math.round(a+i),Math.round(o)]),s.push(["line",Math.round(a+i),Math.round(l+o)]),s.push(["line",Math.round(a),Math.round(l+o)]),j(t,s),t.save(),t.clip(),J(t,e,n,r),t.restore()}function Z(t,e,n){m(t,e.left,e.top,e.width,e.height,n)}function te(t,e,n,r,a){var o=me.BackgroundSize(t,e,r,a),i=me.BackgroundPosition(t,e,r,a,o),l=me.BackgroundRepeat(t,a);switch(r=ne(r,o),l){case"repeat-x":case"repeat no-repeat":K(n,r,i,e,e.left,e.top+i.top,99999,r.height);break;case"repeat-y":case"no-repeat repeat":K(n,r,i,e,e.left+i.left,e.top,r.width,99999);break;case"no-repeat":K(n,r,i,e,e.left+i.left,e.top+i.top,r.width,r.height);break;default:J(n,r,i,{top:e.top,left:e.left,width:r.width,height:r.height})}}function ee(t,e,n){for(var r,a=be(t,"backgroundImage"),o=me.parseBackgroundImage(a),i=o.length;i--;)if(a=o[i],a.args&&0!==a.args.length){var l="url"===a.method?a.args[0]:a.value;r=O(l),r?te(t,e,n,r,i):me.log("html2canvas: Error loading background:",a)}}function ne(t,e){if(t.width===e.width&&t.height===e.height)return t;var n,r=ge.createElement("canvas");return r.width=e.width,r.height=e.height,n=r.getContext("2d"),_(n,t,0,0,t.width,t.height,0,0,e.width,e.height),r}function re(t,e,n){return t.setVariable("globalAlpha",be(e,"opacity")*(n?n.opacity:1))}function ae(t){return t.replace("px","")}function oe(t){var e=/(matrix)\((.+)\)/,n=be(t,"transform")||be(t,"-webkit-transform")||be(t,"-moz-transform")||be(t,"-ms-transform")||be(t,"-o-transform"),r=be(t,"transform-origin")||be(t,"-webkit-transform-origin")||be(t,"-moz-transform-origin")||be(t,"-ms-transform-origin")||be(t,"-o-transform-origin")||"0px 0px";r=r.split(" ").map(ae).map(me.asFloat);var a;if(n&&"none"!==n){var o=n.match(e);if(o)switch(o[1]){case"matrix":a=o[2].split(",").map(me.trimText).map(me.asFloat)}}return{origin:r,matrix:a}}function ie(t,e,n,r){var o=l(e?n.width:f(),e?n.height:p()),i={ctx:o,opacity:re(o,t,e),cssPosition:be(t,"position"),borders:N(t),transform:r,clip:e&&e.clip?me.Extend({},e.clip):null};return B(t,i,e),a.useOverflow===!0&&/(hidden|scroll|auto)/.test(be(t,"overflow"))===!0&&/(BODY)/i.test(t.nodeName)===!1&&(i.clip=i.clip?z(i.clip,n):n),i}function le(t,e,n){var r={left:e.left+t[3].width,top:e.top+t[0].width,width:e.width-(t[1].width+t[3].width),height:e.height-(t[0].width+t[2].width)};return n&&(r=z(r,n)),r}function se(t,e){var n=e.matrix?me.OffsetBounds(t):me.Bounds(t);return e.origin[0]+=n.left,e.origin[1]+=n.top,n}function ce(t,e,n){var r,a=oe(t,e),o=se(t,a),i=ie(t,e,o,a),l=i.borders,s=i.ctx,c=le(l,o,i.clip),d=H(t,o,l),h=we.test(t.nodeName)?"#efefef":be(t,"backgroundColor");switch(j(s,d.clip),s.save(),s.clip(),c.height>0&&c.width>0&&!n?(Z(s,o,h),ee(t,c,s)):n&&(i.backgroundColor=h),s.restore(),d.borders.forEach(function(t){q(s,t.args,t.color)}),t.nodeName){case"IMG":(r=O(t.getAttribute("src")))?A(s,t,r,o,l):me.log("html2canvas: Error loading :"+t.getAttribute("src"));break;case"INPUT":/^(text|url|email|submit|button|reset)$/.test(t.type)&&(t.value||t.placeholder||"").length>0&&X(t,o,i);break;case"TEXTAREA":(t.value||t.placeholder||"").length>0&&X(t,o,i);break;case"SELECT":(t.options||t.placeholder||"").length>0&&X(t,o,i);break;case"LI":L(t,i,c);break;case"CANVAS":A(s,t,t,o,l)}return i}function de(t){return"none"!==be(t,"display")&&"hidden"!==be(t,"visibility")&&!t.hasAttribute("data-html2canvas-ignore")}function he(t,e,r){return r||(r=function(){}),de(t)&&(e=ce(t,e,!1)||e,!we.test(t.nodeName))?ue(t,e,r):(r(),n)}function ue(t,e,n){function r(n){n.nodeType===n.ELEMENT_NODE?he(n,e,o):n.nodeType===n.TEXT_NODE?(E(t,n,e),o()):o()}function o(){0>=--l&&(me.log("finished rendering "+i.length+" children."),n())}var i=me.Children(t),l=i.length+1;o(),a.async?i.forEach(function(t){setTimeout(function(){r(t)},0)}):i.forEach(r)}t.scroll(0,0);var fe=a.elements===n?e.body:a.elements[0],pe=0,ge=fe.ownerDocument,me=d.Util,ye=me.Support(a,ge),we=RegExp("("+a.ignoreElements+")"),xe=ge.body,be=me.getCSS,ve="___html2canvas___pseudoelement",Ce=ge.createElement("style");Ce.innerHTML="."+ve+'-parent:before { content: "" !important; display: none !important; }'+"."+ve+'-parent:after { content: "" !important; display: none !important; }',xe.appendChild(Ce),r=r||{},i()},d.Preload=function(r){function a(t){E.href=t,E.href=E.href;var e=E.protocol+E.host;return e===g}function o(){b.log("html2canvas: start: images: "+x.numLoaded+" / "+x.numTotal+" (failed: "+x.numFailed+")"),!x.firstRun&&x.numLoaded>=x.numTotal&&(b.log("Finished loading images: # "+x.numTotal+" (failed: "+x.numFailed+")"),"function"==typeof r.complete&&r.complete(x))}function i(e,a,i){var l,s,c=r.proxy;E.href=e,e=E.href,l="html2canvas_"+v++,i.callbackname=l,c+=c.indexOf("?")>-1?"&":"?",c+="url="+encodeURIComponent(e)+"&callback="+l,s=k.createElement("script"),t[l]=function(e){"error:"===e.substring(0,6)?(i.succeeded=!1,x.numLoaded++,x.numFailed++,o()):(p(a,i),a.src=e),t[l]=n;try{delete t[l]}catch(r){}s.parentNode.removeChild(s),s=null,delete i.script,delete i.callbackname},s.setAttribute("type","text/javascript"),s.setAttribute("src",c),i.script=s,t.document.body.appendChild(s)}function l(e,n){var r=t.getComputedStyle(e,n),a=r.content;"url"===a.substr(0,3)&&m.loadImage(d.Util.parseBackgroundImage(a)[0].args[0]),u(r.backgroundImage,e)}function s(t){l(t,":before"),l(t,":after")}function c(t,e){var r=d.Generate.Gradient(t,e);r!==n&&(x[t]={img:r,succeeded:!0},x.numTotal++,x.numLoaded++,o())}function h(t){return t&&t.method&&t.args&&t.args.length>0}function u(t,e){var r;d.Util.parseBackgroundImage(t).filter(h).forEach(function(t){"url"===t.method?m.loadImage(t.args[0]):t.method.match(/\-?gradient$/)&&(r===n&&(r=d.Util.Bounds(e)),c(t.value,r))})}function f(t){var e=!1;try{b.Children(t).forEach(f)}catch(r){}try{e=t.nodeType}catch(a){e=!1,b.log("html2canvas: failed to access some element's nodeType - Exception: "+a.message)}if(1===e||e===n){s(t);try{u(b.getCSS(t,"backgroundImage"),t)}catch(r){b.log("html2canvas: failed to get background-image - Exception: "+r.message)}u(t)}}function p(e,a){e.onload=function(){a.timer!==n&&t.clearTimeout(a.timer),x.numLoaded++,a.succeeded=!0,e.onerror=e.onload=null,o()},e.onerror=function(){if("anonymous"===e.crossOrigin&&(t.clearTimeout(a.timer),r.proxy)){var l=e.src;return e=new Image,a.img=e,e.src=l,i(e.src,e,a),n}x.numLoaded++,x.numFailed++,a.succeeded=!1,e.onerror=e.onload=null,o()}}var g,m,y,w,x={numLoaded:0,numFailed:0,numTotal:0,cleanupDone:!1},b=d.Util,v=0,C=r.elements[0]||e.body,k=C.ownerDocument,T=C.getElementsByTagName("img"),S=T.length,E=k.createElement("a"),R=function(t){return t.crossOrigin!==n}(new Image);for(E.href=t.location.href,g=E.protocol+E.host,m={loadImage:function(t){var e,o;t&&x[t]===n&&(e=new Image,t.match(/data:image\/.*;base64,/i)?(e.src=t.replace(/url\(['"]{0,}|['"]{0,}\)$/gi,""),o=x[t]={img:e},x.numTotal++,p(e,o)):a(t)||r.allowTaint===!0?(o=x[t]={img:e},x.numTotal++,p(e,o),e.src=t):R&&!r.allowTaint&&r.useCORS?(e.crossOrigin="anonymous",o=x[t]={img:e},x.numTotal++,p(e,o),e.src=t):r.proxy&&(o=x[t]={img:e},x.numTotal++,i(t,e,o)))},cleanupDOM:function(a){var i,l; -if(!x.cleanupDone){a&&"string"==typeof a?b.log("html2canvas: Cleanup because: "+a):b.log("html2canvas: Cleanup after timeout: "+r.timeout+" ms.");for(l in x)if(x.hasOwnProperty(l)&&(i=x[l],"object"==typeof i&&i.callbackname&&i.succeeded===n)){t[i.callbackname]=n;try{delete t[i.callbackname]}catch(s){}i.script&&i.script.parentNode&&(i.script.setAttribute("src","about:blank"),i.script.parentNode.removeChild(i.script)),x.numLoaded++,x.numFailed++,b.log("html2canvas: Cleaned up failed img: '"+l+"' Steps: "+x.numLoaded+" / "+x.numTotal)}t.stop!==n?t.stop():e.execCommand!==n&&e.execCommand("Stop",!1),e.close!==n&&e.close(),x.cleanupDone=!0,a&&"string"==typeof a||o()}},renderingDone:function(){w&&t.clearTimeout(w)}},r.timeout>0&&(w=t.setTimeout(m.cleanupDOM,r.timeout)),b.log("html2canvas: Preload starts: finding background-images"),x.firstRun=!0,f(C),b.log("html2canvas: Preload: Finding images"),y=0;S>y;y+=1)m.loadImage(T[y].getAttribute("src"));return x.firstRun=!1,b.log("html2canvas: Preload: Done."),x.numTotal===x.numLoaded&&o(),m},d.Renderer=function(t,r){function a(t,e){return"children"===t?-1:"children"===e?1:t-e}function o(t){function e(t){Object.keys(t).sort(a).forEach(function(n){var r=[],a=[],i=[],l=[];t[n].forEach(function(t){t.node.zIndex.isPositioned||1>t.node.zIndex.opacity?i.push(t):t.node.zIndex.isFloated?a.push(t):r.push(t)}),function s(t){t.forEach(function(t){l.push(t),t.children&&s(t.children)})}(r.concat(a,i)),l.forEach(function(t){t.context?e(t.context):o.push(t.node)})})}var r,o=[];return r=function(t){function e(t,r,a){var o="auto"===r.zIndex.zindex?0:Number(r.zIndex.zindex),i=t,l=r.zIndex.isPositioned,s=r.zIndex.isFloated,c={node:r},d=a;r.zIndex.ownStacking?(i=c.context={children:[{node:r,children:[]}]},d=n):(l||s)&&(d=c.children=[]),0===o&&a?a.push(c):(t[o]||(t[o]=[]),t[o].push(c)),r.zIndex.children.forEach(function(t){e(i,t,d)})}var r={};return e(r,t),r}(t),e(r),o}function i(t){var e;if("string"==typeof r.renderer&&d.Renderer[t]!==n)e=d.Renderer[t](r);else{if("function"!=typeof t)throw Error("Unknown renderer");e=t(r)}if("function"!=typeof e)throw Error("Invalid renderer defined");return e}return i(r.renderer)(t,r,e,o(t.stack),d)},d.Util.Support=function(t,e){function r(){var t=new Image,r=e.createElement("canvas"),a=r.getContext===n?!1:r.getContext("2d");if(a===!1)return!1;r.width=r.height=10,t.src=["data:image/svg+xml,","","","
","sup","
","",""].join("");try{a.drawImage(t,0,0),r.toDataURL()}catch(o){return!1}return d.Util.log("html2canvas: Parse: SVG powered rendering available"),!0}function a(){var t,n,r,a,o=!1;return e.createRange&&(t=e.createRange(),t.getBoundingClientRect&&(n=e.createElement("boundtest"),n.style.height="123px",n.style.display="block",e.body.appendChild(n),t.selectNode(n),r=t.getBoundingClientRect(),a=r.height,123===a&&(o=!0),e.body.removeChild(n))),o}return{rangeBounds:a(),svgRendering:t.svgRendering&&r()}},t.html2canvas=function(e,n){e=e.length?e:[e];var r,a={logging:!1,elements:e,background:"#fff",proxy:null,timeout:0,useCORS:!1,allowTaint:!1,svgRendering:!1,ignoreElements:"IFRAME|OBJECT|PARAM",useOverflow:!0,letterRendering:!1,chinese:!1,async:!1,width:null,height:null,taintTest:!0,renderer:"Canvas"};return a=d.Util.Extend(n,a),d.logging=a.logging,a.complete=function(t){("function"!=typeof a.onpreloaded||a.onpreloaded(t)!==!1)&&d.Parse(t,a,function(t){("function"!=typeof a.onparsed||a.onparsed(t)!==!1)&&(r=d.Renderer(t,a),"function"==typeof a.onrendered&&a.onrendered(r))})},t.setTimeout(function(){d.Preload(a)},0),{render:function(t,e){return d.Renderer(t,d.Util.Extend(e,a))},parse:function(t,e){return d.Parse(t,d.Util.Extend(e,a))},preload:function(t){return d.Preload(d.Util.Extend(t,a))},log:d.Util.log}},t.html2canvas.log=d.Util.log,t.html2canvas.Renderer={Canvas:n},d.Renderer.Canvas=function(t){function r(t,e){t.beginPath(),e.forEach(function(e){t[e.name].apply(t,e.arguments)}),t.closePath()}function a(t){if(-1===l.indexOf(t.arguments[0].src)){c.drawImage(t.arguments[0],0,0);try{c.getImageData(0,0,1,1)}catch(e){return s=i.createElement("canvas"),c=s.getContext("2d"),!1}l.push(t.arguments[0].src)}return!0}function o(e,n){switch(n.type){case"variable":e[n.name]=n.arguments;break;case"function":switch(n.name){case"createPattern":if(n.arguments[0].width>0&&n.arguments[0].height>0)try{e.fillStyle=e.createPattern(n.arguments[0],"repeat")}catch(o){h.log("html2canvas: Renderer: Error creating pattern",o.message)}break;case"drawShape":r(e,n.arguments);break;case"drawImage":n.arguments[8]>0&&n.arguments[7]>0&&(!t.taintTest||t.taintTest&&a(n))&&e.drawImage.apply(e,n.arguments);break;default:e[n.name].apply(e,n.arguments)}}}t=t||{};var i=e,l=[],s=e.createElement("canvas"),c=s.getContext("2d"),h=d.Util,u=t.canvas||i.createElement("canvas");return function(t,e,r,a,i){var l,s,c,d=u.getContext("2d"),f=t.stack;return u.width=u.style.width=e.width||f.ctx.width,u.height=u.style.height=e.height||f.ctx.height,c=d.fillStyle,d.fillStyle=h.isTransparent(t.backgroundColor)&&e.background!==n?e.background:t.backgroundColor,d.fillRect(0,0,u.width,u.height),d.fillStyle=c,a.forEach(function(t){d.textBaseline="bottom",d.save(),t.transform.matrix&&(d.translate(t.transform.origin[0],t.transform.origin[1]),d.transform.apply(d,t.transform.matrix),d.translate(-t.transform.origin[0],-t.transform.origin[1])),t.clip&&(d.beginPath(),d.rect(t.clip.left,t.clip.top,t.clip.width,t.clip.height),d.clip()),t.ctx.storage&&t.ctx.storage.forEach(function(t){o(d,t)}),d.restore()}),h.log("html2canvas: Renderer: Canvas renderer done - returning canvas obj"),1===e.elements.length&&"object"==typeof e.elements[0]&&"BODY"!==e.elements[0].nodeName?(s=i.Util.Bounds(e.elements[0]),l=r.createElement("canvas"),l.width=Math.ceil(s.width),l.height=Math.ceil(s.height),d=l.getContext("2d"),d.drawImage(u,s.left,s.top,s.width,s.height,0,0,s.width,s.height),u=null,l):u}}})(window,document); \ No newline at end of file +(function(t,e,n){function o(t,e,n){var o=t.documentElement.cloneNode(!0),r=t.createElement("iframe");r.style.display="hidden",r.style.position="absolute",r.style.width=e+"px",r.style.height=n+"px",t.body.appendChild(r);var i=r.contentWindow.document;return i.replaceChild(i.adoptNode(o),i.documentElement),r}function r(t,e,n){this.renderer=e,this.options=n,this.support=new S,this.range=null,this.stack=new StackingContext(!0,1,t.ownerDocument,null);var o=new NodeContainer(t,null);o.blockFormattingContext=o,this.nodes=[o].concat(this.getChildren(o)).filter(function(t){return t.visible=t.isElementVisible()}),this.createStackingContexts(),this.sortStackingContexts(this.stack),this.parse(this.stack)}function i(t){return 0>t.cssInt("zIndex")}function s(t){return t.cssInt("zIndex")>0}function c(t){return 0===t.cssInt("zIndex")}function a(t){return-1!==["inline","inline-block","inline-table"].indexOf(t.css("display"))}function h(t){return t instanceof StackingContext}function d(t){return t.node.data.trim().length>0}function p(t){return/^(normal|none|0px)$/.test(t.parent.css("letterSpacing"))}function u(t,e,n,o,r,i,s){e[0]>0||e[1]>0?(t.push(["line",o[0].start.x,o[0].start.y]),o[0].curveTo(t),o[1].curveTo(t)):t.push(["line",i,s]),(n[0]>0||n[1]>0)&&t.push(["line",r[0].start.x,r[0].start.y])}function l(t){return["TopLeft","TopRight","BottomRight","BottomLeft"].map(function(e){var n=t.css("border"+e+"Radius"),o=n.split(" ");return 1>=o.length&&(o[1]=o[0]),o.map(f)})}function f(t){return parseInt(t,10)}function g(t,e,n,o){var r=4*((Math.sqrt(2)-1)/3),i=n*r,s=o*r,c=t+n,a=e+o;return{topLeft:x({x:t,y:a},{x:t,y:a-s},{x:c-i,y:e},{x:c,y:e}),topRight:x({x:t,y:e},{x:t+i,y:e},{x:c,y:a-s},{x:c,y:a}),bottomRight:x({x:c,y:e},{x:c,y:e+s},{x:t+i,y:a},{x:t,y:a}),bottomLeft:x({x:c,y:a},{x:c-i,y:a},{x:t,y:e+s},{x:t,y:e})}}function y(t,e,n){var o=t.left,r=t.top,i=t.width,s=t.height,c=e[0][0],a=e[0][1],h=e[1][0],d=e[1][1],p=e[2][0],u=e[2][1],l=e[3][0],f=e[3][1],y=i-h,x=s-u,m=i-p,w=s-f;return{topLeftOuter:g(o,r,c,a).topLeft.subdivide(.5),topLeftInner:g(o+n[3].width,r+n[0].width,Math.max(0,c-n[3].width),Math.max(0,a-n[0].width)).topLeft.subdivide(.5),topRightOuter:g(o+y,r,h,d).topRight.subdivide(.5),topRightInner:g(o+Math.min(y,i+n[3].width),r+n[0].width,y>i+n[3].width?0:h-n[3].width,d-n[0].width).topRight.subdivide(.5),bottomRightOuter:g(o+m,r+x,p,u).bottomRight.subdivide(.5),bottomRightInner:g(o+Math.min(m,i+n[3].width),r+Math.min(x,s+n[0].width),Math.max(0,p-n[1].width),Math.max(0,u-n[2].width)).bottomRight.subdivide(.5),bottomLeftOuter:g(o,r+w,l,f).bottomLeft.subdivide(.5),bottomLeftInner:g(o+n[3].width,r+w,Math.max(0,l-n[3].width),Math.max(0,f-n[2].width)).bottomLeft.subdivide(.5)}}function x(t,e,n,o){var r=function(t,e,n){return{x:t.x+(e.x-t.x)*n,y:t.y+(e.y-t.y)*n}};return{start:t,startControl:e,endControl:n,end:o,subdivide:function(i){var s=r(t,e,i),c=r(e,n,i),a=r(n,o,i),h=r(s,c,i),d=r(c,a,i),p=r(h,d,i);return[x(t,s,h,p),x(p,d,a,o)]},curveTo:function(t){t.push(["bezierCurve",e.x,e.y,n.x,n.y,o.x,o.y])},curveToReversed:function(o){o.push(["bezierCurve",n.x,n.y,e.x,e.y,t.x,t.y])}}}function m(t,e,n,o,r,i,s){var c=[];return e[0]>0||e[1]>0?(c.push(["line",o[1].start.x,o[1].start.y]),o[1].curveTo(c)):c.push(["line",t.c1[0],t.c1[1]]),n[0]>0||n[1]>0?(c.push(["line",i[0].start.x,i[0].start.y]),i[0].curveTo(c),c.push(["line",s[0].end.x,s[0].end.y]),s[0].curveToReversed(c)):(c.push(["line",t.c2[0],t.c2[1]]),c.push(["line",t.c3[0],t.c3[1]])),e[0]>0||e[1]>0?(c.push(["line",r[1].end.x,r[1].end.y]),r[1].curveToReversed(c)):c.push(["line",t.c4[0],t.c4[1]]),c}function w(t){return t.node.nodeType!==Node.ELEMENT_NODE||-1===["SCRIPT","HEAD","TITLE","OBJECT","BR"].indexOf(t.node.nodeName)}function b(t){return[].concat.apply([],t)}function v(t){return t.nodeType===Node.TEXT_NODE||t.nodeType===Node.ELEMENT_NODE}function R(t){var e=t.css("position"),n="absolute"===e||"relative"===e?t.css("zIndex"):"auto";return"auto"!==n}function T(t){return"static"!==t.css("position")}function C(t){return"none"!==t.css("float")}function E(t){var e=this;return function(){return!t.apply(e,arguments)}}function B(t){return t.node.nodeType===Node.ELEMENT_NODE}function k(t){return t.node.nodeType===Node.TEXT_NODE}function I(t,e){return t.cssInt("zIndex")-e.cssInt("zIndex")}function L(t){return 1>t.css("opacity")}function O(){}function N(){return function(){throw Error("Render function not implemented")}}function S(){this.rangeBounds=this.testRangeBounds()}function M(){O.call(this),this.canvas=e.createElement("canvas"),this.canvas.width=t.innerWidth,this.canvas.height=t.innerHeight,this.ctx=this.canvas.getContext("2d"),this.ctx.textBaseline="bottom",e.body.appendChild(this.canvas)}t.html2canvas=function(i,s){var c=o(e,t.innerWidth,t.innerHeight),a=c.contentWindow;i===n?e.body:i[0];var h=new M,d=new r(a.document.documentElement,h,s||{});t.console.log(d),s.onrendered(h.canvas)},r.prototype.getChildren=function(t){return b([].filter.call(t.node.childNodes,v).map(function(e){var n=[e.nodeType===Node.TEXT_NODE?new TextContainer(e,t):new NodeContainer(e,t)].filter(w);return e.nodeType===Node.ELEMENT_NODE&&n.length?n.concat(this.getChildren(n[0])):n},this))},r.prototype.newStackingContext=function(t,e){var n=new StackingContext(e,t.cssFloat("opacity"),t.node,t.parent),o=n.getParentStack(this);o.contexts.push(n),t.stack=n},r.prototype.createStackingContexts=function(){this.nodes.forEach(function(t){B(t)&&(this.isRootElement(t)||L(t)||R(t)||this.isBodyWithTransparentRoot(t))?this.newStackingContext(t,!0):B(t)&&T(t)?this.newStackingContext(t,!1):t.assignStack(t.parent.stack)},this)},r.prototype.isBodyWithTransparentRoot=function(t){return"BODY"===t.node.nodeName&&this.renderer.isTransparent(t.parent.css("backgroundColor"))},r.prototype.isRootElement=function(t){return"HTML"===t.node.nodeName},r.prototype.sortStackingContexts=function(t){t.contexts.sort(I),t.contexts.forEach(this.sortStackingContexts,this)},r.prototype.parseBounds=function(t){return t.bounds=this.getBounds(t.node)},r.prototype.getBounds=function(t){if(t.getBoundingClientRect){var e=t.getBoundingClientRect();return{top:e.top,bottom:e.bottom||e.top+e.height,left:e.left,width:t.offsetWidth,height:t.offsetHeight}}return{}},r.prototype.parseTextBounds=function(t){return function(e,n,o){if("none"!==t.parent.css("textDecoration")||0!==e.trim().length){var r=o.slice(0,n).join("").length;if(this.support.rangeBounds)return this.getRangeBounds(t.node,r,e.length);if(t.node&&"string"==typeof t.node.data){var i=t.node.splitText(e.length),s=this.getWrapperBounds(t.node);return t.node=i,s}}}},r.prototype.getWrapperBounds=function(t){var e=t.ownerDocument.createElement("wrapper"),n=t.parentNode,o=t.cloneNode(!0);e.appendChild(t.cloneNode(!0)),n.replaceChild(e,t);var r=this.getBounds(e);return n.replaceChild(o,e),r},r.prototype.getRangeBounds=function(t,e,n){var o=this.range||(this.range=t.ownerDocument.createRange());return o.setStart(t,e),o.setEnd(t,e+n),o.getBoundingClientRect()},r.prototype.parse=function(e){var n=e.contexts.filter(i),o=e.children.filter(B).filter(E(C)),r=o.filter(E(T)).filter(E(a)),p=o.filter(E(T)).filter(C),u=o.filter(E(T)).filter(a),l=e.contexts.concat(o.filter(T)).filter(c),f=e.children.filter(k).filter(d),g=e.contexts.filter(s),y=[];n.concat(r).concat(p).concat(u).concat(l).concat(f).concat(g).forEach(function(e){if(this.paint(e),-1!==y.indexOf(e.node))throw t.console.log(e,e.node),Error("rendering twice");y.push(e.node),h(e)&&this.parse(e)},this)},r.prototype.paint=function(t){k(t)?this.paintText(t):this.paintNode(t)},r.prototype.paintNode=function(t){h(t)&&this.renderer.setOpacity(t.opacity);var e=this.parseBounds(t),n=this.parseBorders(t);this.renderer.clip(n.clip,function(){this.renderer.renderBackground(t,e)},this),this.renderer.renderBorders(n.borders)},r.prototype.paintText=function(t){t.applyTextTransform();var e=t.node.data.split(!this.options.letterRendering||p(t)?/(\b| )/:""),n=t.parent.fontWeight(),o=t.parent.css("fontSize"),r=t.parent.css("fontFamily");this.renderer.font(t.parent.css("color"),t.parent.css("fontStyle"),t.parent.css("fontVariant"),n,o,r),e.map(this.parseTextBounds(t),this).forEach(function(t,n){t&&this.renderer.text(e[n],t.left,t.bottom)},this)},r.prototype.parseBorders=function(t){var e=t.bounds,n=l(t),o=["Top","Right","Bottom","Left"].map(function(e){return{width:t.cssInt("border"+e+"Width"),color:t.css("border"+e+"Color"),args:null}}),r=y(e,n,o);return{clip:this.parseBackgroundClip(t,r,o,n,e),borders:o.map(function(t,i){if(t.width>0){var s=e.left,c=e.top,a=e.width,h=e.height-o[2].width;switch(i){case 0:h=o[0].width,t.args=m({c1:[s,c],c2:[s+a,c],c3:[s+a-o[1].width,c+h],c4:[s+o[3].width,c+h]},n[0],n[1],r.topLeftOuter,r.topLeftInner,r.topRightOuter,r.topRightInner);break;case 1:s=e.left+e.width-o[1].width,a=o[1].width,t.args=m({c1:[s+a,c],c2:[s+a,c+h+o[2].width],c3:[s,c+h],c4:[s,c+o[0].width]},n[1],n[2],r.topRightOuter,r.topRightInner,r.bottomRightOuter,r.bottomRightInner);break;case 2:c=c+e.height-o[2].width,h=o[2].width,t.args=m({c1:[s+a,c+h],c2:[s,c+h],c3:[s+o[3].width,c],c4:[s+a-o[3].width,c]},n[2],n[3],r.bottomRightOuter,r.bottomRightInner,r.bottomLeftOuter,r.bottomLeftInner);break;case 3:a=o[3].width,t.args=m({c1:[s,c+h+o[2].width],c2:[s,c],c3:[s+a,c+o[0].width],c4:[s+a,c+h]},n[3],n[0],r.bottomLeftOuter,r.bottomLeftInner,r.topLeftOuter,r.topLeftInner)}}return t})}},r.prototype.parseBackgroundClip=function(t,e,n,o,r){var i=t.css("backgroundClip"),s=[];switch(i){case"content-box":case"padding-box":u(s,o[0],o[1],e.topLeftInner,e.topRightInner,r.left+n[3].width,r.top+n[0].width),u(s,o[1],o[2],e.topRightInner,e.bottomRightInner,r.left+r.width-n[1].width,r.top+n[0].width),u(s,o[2],o[3],e.bottomRightInner,e.bottomLeftInner,r.left+r.width-n[1].width,r.top+r.height-n[2].width),u(s,o[3],o[0],e.bottomLeftInner,e.topLeftInner,r.left+n[3].width,r.top+r.height-n[2].width);break;default:u(s,o[0],o[1],e.topLeftOuter,e.topRightOuter,r.left,r.top),u(s,o[1],o[2],e.topRightOuter,e.bottomRightOuter,r.left+r.width,r.top),u(s,o[2],o[3],e.bottomRightOuter,e.bottomLeftOuter,r.left+r.width,r.top+r.height),u(s,o[3],o[0],e.bottomLeftOuter,e.topLeftOuter,r.left,r.top+r.height)}return s},O.prototype.renderBackground=function(t,e){e.height>0&&e.width>0&&(this.renderBackgroundColor(t,e),this.renderBackgroundImage(t,e))},O.prototype.renderBackgroundColor=function(t,e){var n=t.css("backgroundColor");this.isTransparent(n)||this.rectangle(e.left,e.top,e.width,e.height,t.css("backgroundColor"))},O.prototype.renderBorders=function(t){t.forEach(this.renderBorder,this)},O.prototype.renderBorder=function(t){this.isTransparent(t.color)||null===t.args||this.drawShape(t.args,t.color)},O.prototype.renderBackgroundImage=function(){},O.prototype.isTransparent=function(t){return!t||"transparent"===t||"rgba(0, 0, 0, 0)"===t},O.prototype.clip=N(),O.prototype.rectangle=N(),O.prototype.shape=N(),S.prototype.testRangeBounds=function(){var t,n,o,r,i=!1;return e.createRange&&(t=e.createRange(),t.getBoundingClientRect&&(n=e.createElement("boundtest"),n.style.height="123px",n.style.display="block",e.body.appendChild(n),t.selectNode(n),o=t.getBoundingClientRect(),r=o.height,123===r&&(i=!0),e.body.removeChild(n))),i},M.prototype=Object.create(O.prototype),M.prototype.setFillStyle=function(t){return this.ctx.fillStyle=t,this.ctx},M.prototype.rectangle=function(t,e,n,o,r){this.setFillStyle(r).fillRect(t,e,n,o)},M.prototype.drawShape=function(t,e){this.shape(t),this.setFillStyle(e).fill()},M.prototype.clip=function(t,e,n){this.ctx.save(),this.shape(t).clip(),e.call(n),this.ctx.restore()},M.prototype.shape=function(t){return this.ctx.beginPath(),t.forEach(function(t,e){this.ctx[0===e?"moveTo":t[0]+"To"].apply(this.ctx,t.slice(1))},this),this.ctx.closePath(),this.ctx},M.prototype.font=function(t,e,n,o,r,i){this.setFillStyle(t).font=[e,n,o,r,i].join(" ")},M.prototype.setOpacity=function(t){this.ctx.globalAlpha=t},M.prototype.text=function(t,e,n){this.ctx.fillText(t,e,n)}})(window,document); \ No newline at end of file diff --git a/package.json b/package.json index c84885c..56460df 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "title": "html2canvas", "name": "html2canvas", "description": "Screenshots with JavaScript", - "version": "0.4.1", + "version": "0.5.0-rc1", "author": { "name": "Niklas von Hertzen", "email": "niklasvh@gmail.com", @@ -32,7 +32,9 @@ "png-js": ">= 0.1.1", "sync-webdriver": ">=0.1.1", "express": "~3.2.3", - "baconjs": "~0.3.15" + "baconjs": "~0.3.15", + "wd": "~0.2.7", + "grunt-contrib-connect": "~0.6.0" }, "scripts": { "test": "grunt travis --verbose" diff --git a/src/Core.js b/src/Core.js deleted file mode 100644 index 4b3573a..0000000 --- a/src/Core.js +++ /dev/null @@ -1,411 +0,0 @@ -"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 -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 isPercentage(value) { - return value.toString().indexOf("%") !== -1; -} - -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)$/))) { - return value; - } 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 - }; -}; - -_html2canvas.Util.BackgroundPosition = function(element, bounds, image, imageIndex, backgroundSize ) { - var backgroundPosition = _html2canvas.Util.getCSS(element, 'backgroundPosition', imageIndex), - leftPosition, - topPosition; - if (backgroundPosition.length === 1){ - backgroundPosition = [backgroundPosition[0], backgroundPosition[0]]; - } - - if (isPercentage(backgroundPosition[0])){ - leftPosition = (bounds.width - (backgroundSize || image).width) * (parseFloat(backgroundPosition[0]) / 100); - } else { - leftPosition = parseInt(backgroundPosition[0], 10); - } - - if (backgroundPosition[1] === 'auto') { - topPosition = leftPosition / image.width * image.height; - } else if (isPercentage(backgroundPosition[1])){ - topPosition = (bounds.height - (backgroundSize || image).height) * parseFloat(backgroundPosition[1]) / 100; - } else { - topPosition = parseInt(backgroundPosition[1], 10); - } - - if (backgroundPosition[0] === 'auto') { - leftPosition = topPosition / image.height * image.width; - } - - return {left: leftPosition, top: topPosition}; -}; - -_html2canvas.Util.BackgroundSize = function(element, bounds, image, imageIndex) { - var backgroundSize = _html2canvas.Util.getCSS(element, 'backgroundSize', imageIndex), width, height; - - if (backgroundSize.length === 1) { - backgroundSize = [backgroundSize[0], backgroundSize[0]]; - } - - if (isPercentage(backgroundSize[0])) { - width = bounds.width * parseFloat(backgroundSize[0]) / 100; - } else if (/contain|cover/.test(backgroundSize[0])) { - return _html2canvas.Util.resizeBounds(image.width, image.height, bounds.width, bounds.height, backgroundSize[0]); - } else { - width = parseInt(backgroundSize[0], 10); - } - - if (backgroundSize[0] === 'auto' && backgroundSize[1] === 'auto') { - height = image.height; - } else if (backgroundSize[1] === 'auto') { - height = width / image.width * image.height; - } else if (isPercentage(backgroundSize[1])) { - height = bounds.height * parseFloat(backgroundSize[1]) / 100; - } else { - height = parseInt(backgroundSize[1], 10); - } - - if (backgroundSize[0] === 'auto') { - width = height / image.height * image.width; - } - - return {width: width, height: height}; -}; - -_html2canvas.Util.BackgroundRepeat = function(element, imageIndex) { - var backgroundRepeat = _html2canvas.Util.getCSS(element, "backgroundRepeat").split(",").map(_html2canvas.Util.trimText); - return backgroundRepeat[imageIndex] || backgroundRepeat[0]; -}; - -_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 || backgroundColor === "transparent" || backgroundColor === "rgba(0, 0, 0, 0)"); -}; diff --git a/src/Font.js b/src/Font.js deleted file mode 100644 index 2bc264b..0000000 --- a/src/Font.js +++ /dev/null @@ -1,64 +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; - }; -})(); diff --git a/src/Generate.js b/src/Generate.js deleted file mode 100644 index bf3c7cc..0000000 --- a/src/Generate.js +++ /dev/null @@ -1,424 +0,0 @@ -(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; - }; -})(); \ No newline at end of file diff --git a/src/Parse.js b/src/Parse.js deleted file mode 100644 index 4b6b476..0000000 --- a/src/Parse.js +++ /dev/null @@ -1,1276 +0,0 @@ -_html2canvas.Parse = function (images, options, cb) { - 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", - hidePseudoElementsStyles = doc.createElement('style'); - - hidePseudoElementsStyles.innerHTML = '.' + pseudoHide + - '-parent:before { content: "" !important; display: none !important; }' + - '.' + pseudoHide + '-parent:after { content: "" !important; display: none !important; }'; - - body.appendChild(hidePseudoElementsStyles); - - images = images || {}; - - init(); - - function init() { - var background = getCSS(document.documentElement, "backgroundColor"), - transparentBackground = (Util.isTransparent(background) && element === document.body), - stack = renderElement(element, null, false, transparentBackground); - - // create pseudo elements in a single pass to prevent synchronous layouts - addPseudoElements(element); - - parseChildren(element, stack, function() { - if (transparentBackground) { - background = stack.backgroundColor; - } - - removePseudoElements(); - - Util.log('Done parsing, moving to Render.'); - - cb({ - backgroundColor: background, - stack: stack - }); - }); - } - - // Given a root element, find all pseudo elements below, create elements mocking pseudo element styles - // so we can process them as normal elements, and hide the original pseudo elements so they don't interfere - // with layout. - function addPseudoElements(el) { - // These are done in discrete steps to prevent a relayout loop caused by addClass() invalidating - // layouts & getPseudoElement calling getComputedStyle. - var jobs = [], classes = []; - getPseudoElementClasses(); - findPseudoElements(el); - runJobs(); - - function getPseudoElementClasses(){ - var findPsuedoEls = /:before|:after/; - var sheets = document.styleSheets; - for (var i = 0, j = sheets.length; i < j; i++) { - try { - var rules = sheets[i].cssRules; - for (var k = 0, l = rules.length; k < l; k++) { - if(findPsuedoEls.test(rules[k].selectorText)) { - classes.push(rules[k].selectorText); - } - } - } - catch(e) { // will throw security exception for style sheets loaded from external domains - } - } - - // Trim off the :after and :before (or ::after and ::before) - for (i = 0, j = classes.length; i < j; i++) { - classes[i] = classes[i].match(/(^[^:]*)/)[1]; - } - - // remove empty values, if not could cause invalid selectors with querySelectorAll - classes = classes.filter(function (n) { return n }); - } - - // Using the list of elements we know how pseudo el styles, create fake pseudo elements. - function findPseudoElements(el) { - var els = document.querySelectorAll(classes.join(',')); - for(var i = 0, j = els.length; i < j; i++) { - createPseudoElements(els[i]); - } - } - - // Create pseudo elements & add them to a job queue. - function createPseudoElements(el) { - var before = getPseudoElement(el, ':before'), - after = getPseudoElement(el, ':after'); - - if(before) { - jobs.push({type: 'before', pseudo: before, el: el}); - } - - if (after) { - jobs.push({type: 'after', pseudo: after, el: el}); - } - } - - // Adds a class to the pseudo's parent to prevent the original before/after from messing - // with layouts. - // Execute the inserts & addClass() calls in a batch to prevent relayouts. - function runJobs() { - // Add Class - jobs.forEach(function(job){ - addClass(job.el, pseudoHide + "-parent"); - }); - - // Insert el - jobs.forEach(function(job){ - if(job.type === 'before'){ - job.el.insertBefore(job.pseudo, job.el.firstChild); - } else { - job.el.appendChild(job.pseudo); - } - }); - } - } - - - - // Delete our fake pseudo elements from the DOM. This will remove those actual elements - // and the classes on their parents that hide the actual pseudo elements. - // Note that NodeLists are 'live' collections so you can't use a for loop here. They are - // actually deleted from the NodeList after each iteration. - function removePseudoElements(){ - // delete pseudo elements - body.removeChild(hidePseudoElementsStyles); - var pseudos = document.getElementsByClassName(pseudoHide + "-element"); - while (pseudos.length) { - pseudos[0].parentNode.removeChild(pseudos[0]); - } - - // Remove pseudo hiding classes - var parents = document.getElementsByClassName(pseudoHide + "-parent"); - while(parents.length) { - removeClass(parents[0], pseudoHide + "-parent"); - } - } - - function addClass (el, className) { - if (el.classList) { - el.classList.add(className); - } else { - el.className = el.className + " " + className; - } - } - - function removeClass (el, className) { - if (el.classList) { - el.classList.remove(className); - } else { - el.className = el.className.replace(className, "").trim(); - } - } - - function hasClass (el, className) { - return el.className.indexOf(className) > -1; - } - - // Note that this doesn't work in < IE8, but we don't support that anyhow - function nodeListToArray (nodeList) { - return Array.prototype.slice.call(nodeList); - } - - 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); - newContext.depth = parentStack ? (parentStack.zIndex.depth + 1) : 0; - - if (parentStack) { - parentStack.zIndex.children.push(stack); - } - } - - function h2czContext(zindex) { - return { - depth: 0, - zindex: zindex, - children: [] - }; - } - - 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'); - }); - } - - function getCurvePoints(x, y, r1, r2) { - var kappa = 4 * ((Math.sqrt(2) - 1) / 3); - 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 - }) - }; - } - - 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); - var parentStyle = window.getComputedStyle(el); - // If no content attribute is present, the pseudo element is hidden, - // or the parent has a content property equal to the content on the pseudo element, - // move along. - if(!elStyle || !elStyle.content || elStyle.content === "none" || elStyle.content === "-moz-alt-content" || - elStyle.display === "none" || parentStyle.content === elStyle.content) { - return; - } - var content = elStyle.content + ''; - - // Strip inner quotes - if(content[0] === "'" || content[0] === "\"") { - content = content.replace(/(^['"])|(['"]$)/g, ''); - } - - var isImage = content.substr( 0, 3 ) === 'url', - elps = document.createElement( isImage ? 'img' : 'span' ); - - elps.className = pseudoHide + "-element "; - - 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 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 = Util.BackgroundRepeat(el, imageIndex); - - image = resizeImage(image, backgroundSize); - - switch (backgroundRepeat) { - case "repeat-x": - case "repeat no-repeat": - backgroundRepeatShape(ctx, image, backgroundPosition, bounds, - bounds.left, bounds.top + backgroundPosition.top, 99999, image.height); - break; - case "repeat-y": - case "no-repeat repeat": - 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", ""); - } - - function getTransform(element, parentStack) { - var transformRegExp = /(matrix)\((.+)\)/; - 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, 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); - }); - - switch(element.nodeName){ - case "IMG": - if ((image = loadImage(element.getAttribute('src')))) { - renderImage(ctx, element, image, bounds, borders); - } else { - Util.log("html2canvas: Error loading :" + 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, cb) { - if (!cb) { - cb = function(){}; - } - if (isElementVisible(element)) { - stack = renderElement(element, stack, false) || stack; - if (!ignoreElementsRegExp.test(element.nodeName)) { - return parseChildren(element, stack, cb); - } - } - cb(); - } - - function parseChildren(element, stack, cb) { - var children = Util.Children(element); - // After all nodes have processed, finished() will call the cb. - // We add one and kick it off so this will still work when children.length === 0. - // Note that unless async is true, this will happen synchronously, just will callbacks. - var jobs = children.length + 1; - finished(); - - if (options.async) { - children.forEach(function(node) { - // Don't block the page from rendering - setTimeout(function(){ parseNode(node); }, 0); - }); - } else { - children.forEach(parseNode); - } - - function parseNode(node) { - if (node.nodeType === node.ELEMENT_NODE) { - parseElement(node, stack, finished); - } else if (node.nodeType === node.TEXT_NODE) { - renderText(element, node, stack); - finished(); - } else { - finished(); - } - } - function finished(el) { - if (--jobs <= 0){ - Util.log("finished rendering " + children.length + " children."); - cb(); - } - } - } -}; diff --git a/src/Preload.js b/src/Preload.js deleted file mode 100644 index f7b1ed7..0000000 --- a/src/Preload.js +++ /dev/null @@ -1,317 +0,0 @@ -_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 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; -}; diff --git a/src/Queue.js b/src/Queue.js deleted file mode 100644 index a0b2a8a..0000000 --- a/src/Queue.js +++ /dev/null @@ -1,123 +0,0 @@ -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; - } - }; -} \ No newline at end of file diff --git a/src/Renderer.js b/src/Renderer.js deleted file mode 100644 index 626a951..0000000 --- a/src/Renderer.js +++ /dev/null @@ -1,111 +0,0 @@ -_html2canvas.Renderer = function(parseQueue, options){ - function sortZindex(a, b) { - if (a === 'children') { - return -1; - } else if (b === 'children') { - return 1; - } else { - return a - b; - } - } - - // 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) { - contextForChildren = stub.context = { - children: [{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(sortZindex).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); -}; diff --git a/src/Support.js b/src/Support.js deleted file mode 100644 index 34e2622..0000000 --- a/src/Support.js +++ /dev/null @@ -1,63 +0,0 @@ -_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,", - "", - "", - "
", - "sup", - "
", - "", - "" - ].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() - }; -}; \ No newline at end of file diff --git a/src/Util.js b/src/Util.js deleted file mode 100644 index 8ea63af..0000000 --- a/src/Util.js +++ /dev/null @@ -1,79 +0,0 @@ -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, - async: false, // If true, parsing will not block, but if the user scrolls during parse the image can get weird - - // 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; - } - } - _html2canvas.Parse( images, options, function(queue) { - 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 -}; \ No newline at end of file diff --git a/src/core.js b/src/core.js new file mode 100644 index 0000000..2d8b0ee --- /dev/null +++ b/src/core.js @@ -0,0 +1,520 @@ +window.html2canvas = function(nodeList, options) { + var container = createWindowClone(document, window.innerWidth, window.innerHeight); + var clonedWindow = container.contentWindow; + var element = (nodeList === undefined) ? document.body : nodeList[0]; + + var canvas = new CanvasRenderer(); + var parser = new NodeParser(clonedWindow.document.documentElement, canvas, options || {}); + + window.console.log(parser); + options.onrendered(canvas.canvas); +}; + +function createWindowClone(ownerDocument, width, height) { + var documentElement = ownerDocument.documentElement.cloneNode(true), + container = ownerDocument.createElement("iframe"); + + container.style.display = "hidden"; + container.style.position = "absolute"; + container.style.width = width + "px"; + container.style.height = height + "px"; + + ownerDocument.body.appendChild(container); + + var documentClone = container.contentWindow.document; + documentClone.replaceChild(documentClone.adoptNode(documentElement), documentClone.documentElement); + + return container; +} + +function NodeParser(element, renderer, options) { + this.renderer = renderer; + this.options = options; + this.support = new Support(); + this.range = null; + this.stack = new StackingContext(true, 1, element.ownerDocument, null); + var parent = new NodeContainer(element, null); + parent.blockFormattingContext = parent; + this.nodes = [parent].concat(this.getChildren(parent)).filter(function(container) { + return container.visible = container.isElementVisible(); + }); + this.createStackingContexts(); + this.sortStackingContexts(this.stack); + this.parse(this.stack); +} + +NodeParser.prototype.getChildren = function(parentContainer) { + return flatten([].filter.call(parentContainer.node.childNodes, renderableNode).map(function(node) { + var container = [node.nodeType === Node.TEXT_NODE ? new TextContainer(node, parentContainer) : new NodeContainer(node, parentContainer)].filter(nonIgnoredElement); + return node.nodeType === Node.ELEMENT_NODE && container.length ? container.concat(this.getChildren(container[0])) : container; + }, this)); +}; + +NodeParser.prototype.newStackingContext = function(container, hasOwnStacking) { + var stack = new StackingContext(hasOwnStacking, container.cssFloat('opacity'), container.node, container.parent); + var parentStack = stack.getParentStack(this); + parentStack.contexts.push(stack); + container.stack = stack; +}; + +NodeParser.prototype.createStackingContexts = function() { + this.nodes.forEach(function(container) { + if (isElement(container) && (this.isRootElement(container) || hasOpacity(container) || isPositionedForStacking(container) || this.isBodyWithTransparentRoot(container))) { + this.newStackingContext(container, true); + } else if (isElement(container) && (isPositioned(container))) { + this.newStackingContext(container, false); + } else { + container.assignStack(container.parent.stack); + } + }, this); +}; + +NodeParser.prototype.isBodyWithTransparentRoot = function(container) { + return container.node.nodeName === "BODY" && this.renderer.isTransparent(container.parent.css('backgroundColor')); +}; + +NodeParser.prototype.isRootElement = function(container) { + return container.node.nodeName === "HTML"; +}; + +NodeParser.prototype.sortStackingContexts = function(stack) { + stack.contexts.sort(zIndexSort); + stack.contexts.forEach(this.sortStackingContexts, this); +}; + +NodeParser.prototype.parseBounds = function(nodeContainer) { + return nodeContainer.bounds = this.getBounds(nodeContainer.node); +}; + +NodeParser.prototype.getBounds = function(node) { + if (node.getBoundingClientRect) { + var clientRect = node.getBoundingClientRect(); + return { + top: clientRect.top, + bottom: clientRect.bottom || (clientRect.top + clientRect.height), + left: clientRect.left, + width: node.offsetWidth, + height: node.offsetHeight + }; + } + return {}; +}; + +NodeParser.prototype.parseTextBounds = function(container) { + return function(text, index, textList) { + if (container.parent.css("textDecoration") !== "none" || text.trim().length !== 0) { + var offset = textList.slice(0, index).join("").length; + if (this.support.rangeBounds) { + return this.getRangeBounds(container.node, offset, text.length); + } else if (container.node && typeof(container.node.data) === "string") { + var replacementNode = container.node.splitText(text.length); + var bounds = this.getWrapperBounds(container.node); + container.node = replacementNode; + return bounds; + } + } + }; +}; + +NodeParser.prototype.getWrapperBounds = function(node) { + var wrapper = node.ownerDocument.createElement('wrapper'); + var parent = node.parentNode, + backupText = node.cloneNode(true); + + wrapper.appendChild(node.cloneNode(true)); + parent.replaceChild(wrapper, node); + + var bounds = this.getBounds(wrapper); + parent.replaceChild(backupText, wrapper); + return bounds; +}; + +NodeParser.prototype.getRangeBounds = function(node, offset, length) { + var range = this.range || (this.range = node.ownerDocument.createRange()); + range.setStart(node, offset); + range.setEnd(node, offset + length); + return range.getBoundingClientRect(); +}; + + +function negativeZIndex(container) { + return container.cssInt("zIndex") < 0; +} + +function positiveZIndex(container) { + return container.cssInt("zIndex") > 0; +} + +function zIndex0(container) { + return container.cssInt("zIndex") === 0; +} + +function inlineLevel(container) { + return ["inline", "inline-block", "inline-table"].indexOf(container.css("display")) !== -1; +} + +function isStackingContext(container) { + return (container instanceof StackingContext); +} + +function hasText(container) { + return container.node.data.trim().length > 0; +} + +function noLetterSpacing(container) { + return (/^(normal|none|0px)$/.test(container.parent.css("letterSpacing"))); +} + +NodeParser.prototype.parse = function(stack) { + // http://www.w3.org/TR/CSS21/visuren.html#z-index + var negativeZindex = stack.contexts.filter(negativeZIndex); // 2. the child stacking contexts with negative stack levels (most negative first). + var descendantElements = stack.children.filter(isElement).filter(not(isFloating)); + var nonInlineNonPositionedDescendants = descendantElements.filter(not(isPositioned)).filter(not(inlineLevel)); // 3 the in-flow, non-inline-level, non-positioned descendants. + var nonPositionedFloats = descendantElements.filter(not(isPositioned)).filter(isFloating); // 4. the non-positioned floats. + var inFlow = descendantElements.filter(not(isPositioned)).filter(inlineLevel); // 5. the in-flow, inline-level, non-positioned descendants, including inline tables and inline blocks. + var stackLevel0 = stack.contexts.concat(descendantElements.filter(isPositioned)).filter(zIndex0); // 6. the child stacking contexts with stack level 0 and the positioned descendants with stack level 0. + var text = stack.children.filter(isTextNode).filter(hasText); + var positiveZindex = stack.contexts.filter(positiveZIndex); // 7. the child stacking contexts with positive stack levels (least positive first). + var rendered = []; + negativeZindex.concat(nonInlineNonPositionedDescendants).concat(nonPositionedFloats) + .concat(inFlow).concat(stackLevel0).concat(text).concat(positiveZindex).forEach(function(container) { + this.paint(container); + if (rendered.indexOf(container.node) !== -1) { + window.console.log(container, container.node); + throw new Error("rendering twice"); + } + rendered.push(container.node); + + if (isStackingContext(container)) { + this.parse(container); + } + }, this); +}; + +NodeParser.prototype.paint = function(container) { + if (isTextNode(container)) { + this.paintText(container); + } else { + this.paintNode(container); + } +}; + +NodeParser.prototype.paintNode = function(container) { + if (isStackingContext(container)) { + this.renderer.setOpacity(container.opacity); + } + + var bounds = this.parseBounds(container); + var borderData = this.parseBorders(container); + this.renderer.clip(borderData.clip, function() { + this.renderer.renderBackground(container, bounds); + }, this); + this.renderer.renderBorders(borderData.borders); +}; + +NodeParser.prototype.paintText = function(container) { + container.applyTextTransform(); + var textList = container.node.data.split(!this.options.letterRendering || noLetterSpacing(container) ? /(\b| )/ : ""); + var weight = container.parent.fontWeight(); + var size = container.parent.css('fontSize'); + var family = container.parent.css('fontFamily'); + this.renderer.font(container.parent.css('color'), container.parent.css('fontStyle'), container.parent.css('fontVariant'), weight, size, family); + + textList.map(this.parseTextBounds(container), this).forEach(function(bounds, index) { + if (bounds) { + this.renderer.text(textList[index], bounds.left, bounds.bottom); + // renderTextDecoration(ctx, textDecoration, bounds, metrics, color); + } + /* 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); + } */ + }, this); +}; + +NodeParser.prototype.parseBorders = function(container) { + var nodeBounds = container.bounds; + var radius = getBorderRadiusData(container); + var borders = ["Top", "Right", "Bottom", "Left"].map(function(side) { + return { + width: container.cssInt('border' + side + 'Width'), + color: container.css('border' + side + 'Color'), + args: null + }; + }); + var borderPoints = calculateCurvePoints(nodeBounds, radius, borders); + + return { + clip: this.parseBackgroundClip(container, borderPoints, borders, radius, nodeBounds), + borders: borders.map(function(border, borderSide) { + if (border.width > 0) { + var bx = nodeBounds.left; + var by = nodeBounds.top; + var bw = nodeBounds.width; + var bh = nodeBounds.height - (borders[2].width); + + switch(borderSide) { + case 0: + // top border + bh = borders[0].width; + border.args = drawSide({ + c1: [bx, by], + c2: [bx + bw, by], + c3: [bx + bw - borders[1].width, by + bh], + c4: [bx + borders[3].width, by + bh] + }, radius[0], radius[1], + borderPoints.topLeftOuter, borderPoints.topLeftInner, borderPoints.topRightOuter, borderPoints.topRightInner); + break; + case 1: + // right border + bx = nodeBounds.left + nodeBounds.width - (borders[1].width); + bw = borders[1].width; + + border.args = drawSide({ + c1: [bx + bw, by], + c2: [bx + bw, by + bh + borders[2].width], + c3: [bx, by + bh], + c4: [bx, by + borders[0].width] + }, radius[1], radius[2], + borderPoints.topRightOuter, borderPoints.topRightInner, borderPoints.bottomRightOuter, borderPoints.bottomRightInner); + break; + case 2: + // bottom border + by = (by + nodeBounds.height) - (borders[2].width); + bh = borders[2].width; + border.args = drawSide({ + c1: [bx + bw, by + bh], + c2: [bx, by + bh], + c3: [bx + borders[3].width, by], + c4: [bx + bw - borders[3].width, by] + }, radius[2], radius[3], + borderPoints.bottomRightOuter, borderPoints.bottomRightInner, borderPoints.bottomLeftOuter, borderPoints.bottomLeftInner); + break; + case 3: + // left border + bw = borders[3].width; + border.args = drawSide({ + c1: [bx, by + bh + borders[2].width], + c2: [bx, by], + c3: [bx + bw, by + borders[0].width], + c4: [bx + bw, by + bh] + }, radius[3], radius[0], + borderPoints.bottomLeftOuter, borderPoints.bottomLeftInner, borderPoints.topLeftOuter, borderPoints.topLeftInner); + break; + } + } + return border; + }) + }; +}; + +NodeParser.prototype.parseBackgroundClip = function(container, borderPoints, borders, radius, bounds) { + var backgroundClip = container.css('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 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 getBorderRadiusData(container) { + return ["TopLeft", "TopRight", "BottomRight", "BottomLeft"].map(function(side) { + var value = container.css('border' + side + 'Radius'); + var arr = value.split(" "); + if (arr.length <= 1) { + arr[1] = arr[0]; + } + return arr.map(asInt); + }); +} + +function asInt(value) { + return parseInt(value, 10); +} + +function getCurvePoints(x, y, r1, r2) { + var kappa = 4 * ((Math.sqrt(2) - 1) / 3); + 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}) + }; +} + +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]; + + var 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 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 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 nonIgnoredElement(nodeContainer) { + return (nodeContainer.node.nodeType !== Node.ELEMENT_NODE || ["SCRIPT", "HEAD", "TITLE", "OBJECT", "BR"].indexOf(nodeContainer.node.nodeName) === -1); +} + +function flatten(arrays) { + return [].concat.apply([], arrays); +} + +function renderableNode(node) { + return (node.nodeType === Node.TEXT_NODE || node.nodeType === Node.ELEMENT_NODE); +} + +function isPositionedForStacking(container) { + var position = container.css("position"); + var zIndex = (position === "absolute" || position === "relative") ? container.css("zIndex") : "auto"; + return zIndex !== "auto"; +} + +function isPositioned(container) { + return container.css("position") !== "static"; +} + +function isFloating(container) { + return container.css("float") !== "none"; +} + +function not(callback) { + var context = this; + return function() { + return !callback.apply(context, arguments); + }; +} + +function isElement(container) { + return container.node.nodeType === Node.ELEMENT_NODE; +} + +function isTextNode(container) { + return container.node.nodeType === Node.TEXT_NODE; +} + +function zIndexSort(a, b) { + return a.cssInt("zIndex") - b.cssInt("zIndex"); +} + +function hasOpacity(container) { + return container.css("opacity") < 1; +} diff --git a/src/nodecontainer.js b/src/nodecontainer.js new file mode 100644 index 0000000..6f09cc0 --- /dev/null +++ b/src/nodecontainer.js @@ -0,0 +1,49 @@ +function NodeContainer(node, parent) { + this.node = node; + this.parent = parent; + this.stack = null; + this.bounds = null; + this.visible = null; + this.computedStyles = null; + this.styles = {}; +} + +NodeContainer.prototype.assignStack = function(stack) { + this.stack = stack; + stack.children.push(this); +}; + +NodeContainer.prototype.isElementVisible = function() { + return this.node.nodeType === Node.TEXT_NODE ? this.parent.visible : (this.css('display') !== "none" && this.css('visibility') !== "hidden" && !this.node.hasAttribute("data-html2canvas-ignore")); +}; + +NodeContainer.prototype.css = function(attribute) { + if (!this.computedStyles) { + this.computedStyles = this.node.ownerDocument.defaultView.getComputedStyle(this.node, null); + } + + return this.styles[attribute] || (this.styles[attribute] = this.computedStyles[attribute]); +}; + +NodeContainer.prototype.cssInt = function(attribute) { + var value = parseInt(this.css(attribute), 10); + return (Number.isNaN(value)) ? 0 : value; // borders in old IE are throwing 'medium' for demo.html +}; + +NodeContainer.prototype.cssFloat = function(attribute) { + var value = parseFloat(this.css(attribute)); + return (Number.isNaN(value)) ? 0 : value; +}; + +NodeContainer.prototype.fontWeight = function() { + var weight = this.css("fontWeight"); + switch(parseInt(weight, 10)){ + case 401: + weight = "bold"; + break; + case 400: + weight = "normal"; + break; + } + return weight; +}; diff --git a/src/renderer.js b/src/renderer.js new file mode 100644 index 0000000..d188c99 --- /dev/null +++ b/src/renderer.js @@ -0,0 +1,48 @@ +function Renderer() {} +function NYI() { + return function() { + throw new Error("Render function not implemented"); + }; +} + +Renderer.prototype.renderBackground = function(container, bounds) { + if (bounds.height > 0 && bounds.width > 0) { + this.renderBackgroundColor(container, bounds); + this.renderBackgroundImage(container, bounds); + } +}; + +Renderer.prototype.renderBackgroundColor = function(container, bounds) { + var color = container.css("backgroundColor"); + if (!this.isTransparent(color)) { + this.rectangle( + bounds.left, + bounds.top, + bounds.width, + bounds.height, + container.css("backgroundColor") + ); + } +}; + +Renderer.prototype.renderBorders = function(borders) { + borders.forEach(this.renderBorder, this); +}; + +Renderer.prototype.renderBorder = function(data) { + if (!this.isTransparent(data.color) && data.args !== null) { + this.drawShape(data.args, data.color); + } +}; + +Renderer.prototype.renderBackgroundImage = function(container, bounds) { + +}; + +Renderer.prototype.isTransparent = function(color) { + return (!color || color === "transparent" || color === "rgba(0, 0, 0, 0)"); +}; + +Renderer.prototype.clip = NYI(); +Renderer.prototype.rectangle = NYI(); +Renderer.prototype.shape = NYI(); diff --git a/src/renderers/Canvas.js b/src/renderers/Canvas.js deleted file mode 100644 index 57fc1f5..0000000 --- a/src/renderers/Canvas.js +++ /dev/null @@ -1,126 +0,0 @@ -_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(parsedData.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; - }; -}; \ No newline at end of file diff --git a/src/renderers/SVG.js b/src/renderers/SVG.js deleted file mode 100644 index e635077..0000000 --- a/src/renderers/SVG.js +++ /dev/null @@ -1,206 +0,0 @@ -/* - html2canvas @VERSION@ - Copyright (c) 2011 Niklas von Hertzen. All rights reserved. - http://www.twitter.com/niklasvh - - Released under MIT License -*/ - - -// WARNING THIS file is outdated, and hasn't been tested in quite a while - -_html2canvas.Renderer.SVG = function( options ) { - - options = options || {}; - - var doc = document, - svgNS = "http://www.w3.org/2000/svg", - svg = doc.createElementNS(svgNS, "svg"), - xlinkNS = "http://www.w3.org/1999/xlink", - defs = doc.createElementNS(svgNS, "defs"), - i, - a, - queueLen, - storageLen, - storageContext, - renderItem, - el, - settings = {}, - text, - fontStyle, - clipId = 0, - methods; - - - methods = { - _create: function( zStack, options, doc, queue, _html2canvas ) { - svg.setAttribute("version", "1.1"); - svg.setAttribute("baseProfile", "full"); - - svg.setAttribute("viewBox", "0 0 " + Math.max(zStack.ctx.width, options.width) + " " + Math.max(zStack.ctx.height, options.height)); - svg.setAttribute("width", Math.max(zStack.ctx.width, options.width) + "px"); - svg.setAttribute("height", Math.max(zStack.ctx.height, options.height) + "px"); - svg.setAttribute("preserveAspectRatio", "none"); - svg.appendChild(defs); - - - - for (i = 0, queueLen = queue.length; i < queueLen; i+=1){ - - storageContext = queue.splice(0, 1)[0]; - storageContext.canvasPosition = storageContext.canvasPosition || {}; - - //this.canvasRenderContext(storageContext,parentctx); - - - /* - 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){ - - for (a = 0, storageLen = storageContext.ctx.storage.length; a < storageLen; a+=1){ - - renderItem = storageContext.ctx.storage[a]; - - - - switch(renderItem.type){ - case "variable": - settings[renderItem.name] = renderItem['arguments']; - break; - case "function": - if (renderItem.name === "fillRect") { - - el = doc.createElementNS(svgNS, "rect"); - el.setAttribute("x", renderItem['arguments'][0]); - el.setAttribute("y", renderItem['arguments'][1]); - el.setAttribute("width", renderItem['arguments'][2]); - el.setAttribute("height", renderItem['arguments'][3]); - el.setAttribute("fill", settings.fillStyle); - svg.appendChild(el); - - } else if(renderItem.name === "fillText") { - el = doc.createElementNS(svgNS, "text"); - - fontStyle = settings.font.split(" "); - - el.style.fontVariant = fontStyle.splice(0, 1)[0]; - el.style.fontWeight = fontStyle.splice(0, 1)[0]; - el.style.fontStyle = fontStyle.splice(0, 1)[0]; - el.style.fontSize = fontStyle.splice(0, 1)[0]; - - el.setAttribute("x", renderItem['arguments'][1]); - el.setAttribute("y", renderItem['arguments'][2] - (parseInt(el.style.fontSize, 10) + 3)); - - el.setAttribute("fill", settings.fillStyle); - - - - - // TODO get proper baseline - el.style.dominantBaseline = "text-before-edge"; - el.style.fontFamily = fontStyle.join(" "); - - text = doc.createTextNode(renderItem['arguments'][0]); - el.appendChild(text); - - - svg.appendChild(el); - - - - } else if(renderItem.name === "drawImage") { - - if (renderItem['arguments'][8] > 0 && renderItem['arguments'][7]){ - - // TODO check whether even any clipping is necessary for this particular image - el = doc.createElementNS(svgNS, "clipPath"); - el.setAttribute("id", "clipId" + clipId); - - text = doc.createElementNS(svgNS, "rect"); - text.setAttribute("x", renderItem['arguments'][5] ); - text.setAttribute("y", renderItem['arguments'][6]); - - text.setAttribute("width", renderItem['arguments'][3]); - text.setAttribute("height", renderItem['arguments'][4]); - el.appendChild(text); - defs.appendChild(el); - - el = doc.createElementNS(svgNS, "image"); - el.setAttributeNS(xlinkNS, "xlink:href", renderItem['arguments'][0].src); - el.setAttribute("width", renderItem['arguments'][7]); - el.setAttribute("height", renderItem['arguments'][8]); - el.setAttribute("x", renderItem['arguments'][5]); - el.setAttribute("y", renderItem['arguments'][6]); - el.setAttribute("clip-path", "url(#clipId" + clipId + ")"); - // el.setAttribute("xlink:href", ); - - - el.setAttribute("preserveAspectRatio", "none"); - - svg.appendChild(el); - - - clipId += 1; - /* - ctx.drawImage( - renderItem['arguments'][0], - renderItem['arguments'][1], - renderItem['arguments'][2], - renderItem['arguments'][3], - renderItem['arguments'][4], - renderItem['arguments'][5], - renderItem['arguments'][6], - renderItem['arguments'][7], - renderItem['arguments'][8] - ); - */ - } - } - - - - break; - default: - - } - - } - - } - /* - if (storageContext.clip){ - ctx.restore(); - } - */ - - - - } - - - - - - - - - - - _html2canvas.Util.log("html2canvas: Renderer: SVG Renderer done - returning SVG DOM obj"); - - return svg; - } - }; - - return methods; - - -}; diff --git a/src/renderers/canvas.js b/src/renderers/canvas.js new file mode 100644 index 0000000..052d829 --- /dev/null +++ b/src/renderers/canvas.js @@ -0,0 +1,53 @@ +function CanvasRenderer() { + Renderer.call(this); + this.canvas = document.createElement("canvas"); + this.canvas.width = window.innerWidth; + this.canvas.height = window.innerHeight; + this.ctx = this.canvas.getContext("2d"); + this.ctx.textBaseline = "bottom"; + document.body.appendChild(this.canvas); +} + +CanvasRenderer.prototype = Object.create(Renderer.prototype); + +CanvasRenderer.prototype.setFillStyle = function(color) { + this.ctx.fillStyle = color; + return this.ctx; +}; + +CanvasRenderer.prototype.rectangle = function(left, top, width, height, color) { + this.setFillStyle(color).fillRect(left, top, width, height); +}; + +CanvasRenderer.prototype.drawShape = function(shape, color) { + this.shape(shape); + this.setFillStyle(color).fill(); +}; + +CanvasRenderer.prototype.clip = function(shape, callback, context) { + this.ctx.save(); + this.shape(shape).clip(); + callback.call(context); + this.ctx.restore(); +}; + +CanvasRenderer.prototype.shape = function(shape) { + this.ctx.beginPath(); + shape.forEach(function(point, index) { + this.ctx[(index === 0) ? "moveTo" : point[0] + "To" ].apply(this.ctx, point.slice(1)); + }, this); + this.ctx.closePath(); + return this.ctx; +}; + +CanvasRenderer.prototype.font = function(color, style, variant, weight, size, family) { + this.setFillStyle(color).font = [style, variant, weight, size, family].join(" "); +}; + +CanvasRenderer.prototype.setOpacity = function(opacity) { + this.ctx.globalAlpha = opacity; +}; + +CanvasRenderer.prototype.text = function(text, left, bottom) { + this.ctx.fillText(text, left, bottom); +}; diff --git a/src/stackingcontext.js b/src/stackingcontext.js new file mode 100644 index 0000000..41cc5ac --- /dev/null +++ b/src/stackingcontext.js @@ -0,0 +1,14 @@ +function StackingContext(hasOwnStacking, opacity, element, parent) { + NodeContainer.call(this, element, parent); + this.ownStacking = hasOwnStacking; + this.contexts = []; + this.children = []; + this.opacity = (this.parent ? this.parent.stack.opacity : 1) * opacity; +} + +StackingContext.prototype = Object.create(NodeContainer.prototype); + +StackingContext.prototype.getParentStack = function(context) { + var parentStack = (this.parent) ? this.parent.stack : null; + return parentStack ? (parentStack.ownStacking ? parentStack : parentStack.getParentStack(context)) : context.stack; +}; diff --git a/src/support.js b/src/support.js new file mode 100644 index 0000000..c66f742 --- /dev/null +++ b/src/support.js @@ -0,0 +1,28 @@ +function Support() { + this.rangeBounds = this.testRangeBounds(); +} + +Support.prototype.testRangeBounds = function() { + var range, testElement, rangeBounds, rangeHeight, support = false; + + if (document.createRange) { + range = document.createRange(); + if (range.getBoundingClientRect) { + testElement = document.createElement('boundtest'); + testElement.style.height = "123px"; + testElement.style.display = "block"; + document.body.appendChild(testElement); + + range.selectNode(testElement); + rangeBounds = range.getBoundingClientRect(); + rangeHeight = rangeBounds.height; + + if (rangeHeight === 123) { + support = true; + } + document.body.removeChild(testElement); + } + } + + return support; +}; diff --git a/src/textcontainer.js b/src/textcontainer.js new file mode 100644 index 0000000..6602df5 --- /dev/null +++ b/src/textcontainer.js @@ -0,0 +1,29 @@ +function TextContainer(node, parent) { + NodeContainer.call(this, node, parent); +} + +TextContainer.prototype = Object.create(NodeContainer.prototype); + +TextContainer.prototype.applyTextTransform = function() { + this.node.data = this.transform(this.parent.css("textTransform")); +}; + +TextContainer.prototype.transform = function(transform) { + var text = this.node.data; + 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 capitalize(m, p1, p2) { + if (m.length > 0) { + return p1 + p2.toUpperCase(); + } +} diff --git a/tests/test.js b/tests/test.js index cc720a3..27fdda5 100644 --- a/tests/test.js +++ b/tests/test.js @@ -11,9 +11,9 @@ var h2cSelector, h2cOptions; document.write(srcStart + '/tests/assets/jquery-1.6.2.js' + scrEnd); document.write(srcStart + '/tests/assets/jquery.plugin.html2canvas.js' + scrEnd); - var html2canvas = ['Core', 'Generate', 'Parse', 'Preload', 'Queue', 'Renderer', 'Util', 'Support', 'Font', 'renderers/Canvas'], i; + var html2canvas = ['nodecontainer', 'stackingcontext', 'textcontainer', 'support', 'core', 'renderer', 'renderers/canvas'], i; for (i = 0; i < html2canvas.length; ++i) { - document.write(srcStart + '/src/' + html2canvas[i] + '.js?' + Math.random() + scrEnd); + document.write(srcStart + '/new/' + html2canvas[i] + '.js?' + Math.random() + scrEnd); } window.onload = function() { h2cSelector = [document.body];