html5 实现网页截屏 页面生成图片(源代码)
来源：互联网 发布：船舶签证软件下载 编辑：程序博客网 时间：2024/06/15 12:34
<!DOCTYPE html><html> <head> <meta name="layout" content="main"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script type="text/javascript" src="http://html2canvas.hertzen.com/build/html2canvas.js"></script> <script type="text/javascript" > $(document).ready( function(){ $(".example1").on("click", function(event) { event.preventDefault(); html2canvas(document.body, { allowTaint: true, taintTest: false, onrendered: function(canvas) { canvas.id = "mycanvas"; //document.body.appendChild(canvas); //生成base64图片数据 var dataUrl = canvas.toDataURL(); var newImg = document.createElement("img"); newImg.src = dataUrl; document.body.appendChild(newImg); } }); }); }); </script> </head> <body> Hello! <div class="" style="background-color: #abc;"> html5页面截图 </div> <textArea id="textArea" col="20" rows="10" ></textArea> <input class="example1" type="button" value="截图"> 生成界面如下： </body></html>如果html2canvas.js远程访问不了，可以手动加载js：
/* html2canvas 0.4.1 <http://html2canvas.hertzen.com> Copyright (c) 2013 Niklas von Hertzen Released under MIT License */(function(window, document, undefined){ "use strict"; var _html2canvas = {}, previousElement, computedCSS, html2canvas; _html2canvas.Util = {}; _html2canvas.Util.log = function(a) { if (_html2canvas.logging && window.console && window.console.log) { window.console.log(a); } }; _html2canvas.Util.trimText = (function(isNative){ return function(input) { return isNative ? isNative.apply(input) : ((input || '') + '').replace( /^\s+|\s+$/g , '' ); }; })(String.prototype.trim); _html2canvas.Util.asFloat = function(v) { return parseFloat(v); }; (function() { // TODO: support all possible length values var TEXT_SHADOW_PROPERTY = /((rgba|rgb)\([^\)]+\)(\s-?\d+px){0,})/g; var TEXT_SHADOW_VALUES = /(-?\d+px)|(#.+)|(rgb\(.+\))|(rgba\(.+\))/g; _html2canvas.Util.parseTextShadows = function (value) { if (!value || value === 'none') { return []; } // find multiple shadow declarations var shadows = value.match(TEXT_SHADOW_PROPERTY), results = []; for (var i = 0; shadows && (i < shadows.length); i++) { var s = shadows[i].match(TEXT_SHADOW_VALUES); results.push({ color: s[0], offsetX: s[1] ? s[1].replace('px', '') : 0, offsetY: s[2] ? s[2].replace('px', '') : 0, blur: s[3] ? s[3].replace('px', '') : 0 }); } return results; }; })(); _html2canvas.Util.parseBackgroundImage = function (value) { var whitespace = ' \r\n\t', method, definition, prefix, prefix_i, block, results = [], c, mode = 0, numParen = 0, quote, args; var appendResult = function(){ if(method) { if(definition.substr( 0, 1 ) === '"') { definition = definition.substr( 1, definition.length - 2 ); } if(definition) { args.push(definition); } if(method.substr( 0, 1 ) === '-' && (prefix_i = method.indexOf( '-', 1 ) + 1) > 0) { prefix = method.substr( 0, prefix_i); method = method.substr( prefix_i ); } results.push({ prefix: prefix, method: method.toLowerCase(), value: block, args: args }); } args = []; //for some odd reason, setting .length = 0 didn't work in safari method = prefix = definition = block = ''; }; appendResult(); for(var i = 0, ii = value.length; i<ii; i++) { c = value[i]; if(mode === 0 && whitespace.indexOf( c ) > -1){ continue; } switch(c) { case '"': if(!quote) { quote = c; } else if(quote === c) { quote = null; } break; case '(': if(quote) { break; } else if(mode === 0) { mode = 1; block += c; continue; } else { numParen++; } break; case ')': if(quote) { break; } else if(mode === 1) { if(numParen === 0) { mode = 0; block += c; appendResult(); continue; } else { numParen--; } } break; case ',': if(quote) { break; } else if(mode === 0) { appendResult(); continue; } else if (mode === 1) { if(numParen === 0 && !method.match(/^url$/i)) { args.push(definition); definition = ''; block += c; continue; } } break; } block += c; if(mode === 0) { method += c; } else { definition += c; } } appendResult(); return results; }; _html2canvas.Util.Bounds = function (element) { var clientRect, bounds = {}; if (element.getBoundingClientRect){ clientRect = element.getBoundingClientRect(); // TODO add scroll position to bounds, so no scrolling of window necessary bounds.top = clientRect.top; bounds.bottom = clientRect.bottom || (clientRect.top + clientRect.height); bounds.left = clientRect.left; bounds.width = element.offsetWidth; bounds.height = element.offsetHeight; } return bounds; };// TODO ideally, we'd want everything to go through this function instead of Util.Bounds,// but would require further work to calculate the correct positions for elements with offsetParents _html2canvas.Util.OffsetBounds = function (element) { var parent = element.offsetParent ? _html2canvas.Util.OffsetBounds(element.offsetParent) : {top: 0, left: 0}; return { top: element.offsetTop + parent.top, bottom: element.offsetTop + element.offsetHeight + parent.top, left: element.offsetLeft + parent.left, width: element.offsetWidth, height: element.offsetHeight }; }; function toPX(element, attribute, value ) { var rsLeft = element.runtimeStyle && element.runtimeStyle[attribute], left, style = element.style; // Check if we are not dealing with pixels, (Opera has issues with this) // Ported from jQuery css.js // From the awesome hack by Dean Edwards // http://erik.eae.net/archives/2007/07/27/18.54.15/#comment-102291 // If we're not dealing with a regular pixel number // but a number that has a weird ending, we need to convert it to pixels if ( !/^-?[0-9]+\.?[0-9]*(?:px)?$/i.test( value ) && /^-?\d/.test(value) ) { // Remember the original values left = style.left; // Put in the new values to get a computed value out if (rsLeft) { element.runtimeStyle.left = element.currentStyle.left; } style.left = attribute === "fontSize" ? "1em" : (value || 0); value = style.pixelLeft + "px"; // Revert the changed values style.left = left; if (rsLeft) { element.runtimeStyle.left = rsLeft; } } if (!/^(thin|medium|thick)$/i.test(value)) { return Math.round(parseFloat(value)) + "px"; } return value; } function asInt(val) { return parseInt(val, 10); } function parseBackgroundSizePosition(value, element, attribute, index) { value = (value || '').split(','); value = value[index || 0] || value[0] || 'auto'; value = _html2canvas.Util.trimText(value).split(' '); if(attribute === 'backgroundSize' && (!value[0] || value[0].match(/cover|contain|auto/))) { //these values will be handled in the parent function } else { value[0] = (value[0].indexOf( "%" ) === -1) ? toPX(element, attribute + "X", value[0]) : value[0]; if(value[1] === undefined) { if(attribute === 'backgroundSize') { value[1] = 'auto'; return value; } else { // IE 9 doesn't return double digit always value[1] = value[0]; } } value[1] = (value[1].indexOf("%") === -1) ? toPX(element, attribute + "Y", value[1]) : value[1]; } return value; } _html2canvas.Util.getCSS = function (element, attribute, index) { if (previousElement !== element) { computedCSS = document.defaultView.getComputedStyle(element, null); } var value = computedCSS[attribute]; if (/^background(Size|Position)$/.test(attribute)) { return parseBackgroundSizePosition(value, element, attribute, index); } else if (/border(Top|Bottom)(Left|Right)Radius/.test(attribute)) { var arr = value.split(" "); if (arr.length <= 1) { arr[1] = arr[0]; } return arr.map(asInt); } return value; }; _html2canvas.Util.resizeBounds = function( current_width, current_height, target_width, target_height, stretch_mode ){ var target_ratio = target_width / target_height, current_ratio = current_width / current_height, output_width, output_height; if(!stretch_mode || stretch_mode === 'auto') { output_width = target_width; output_height = target_height; } else if(target_ratio < current_ratio ^ stretch_mode === 'contain') { output_height = target_height; output_width = target_height * current_ratio; } else { output_width = target_width; output_height = target_width / current_ratio; } return { width: output_width, height: output_height }; }; function backgroundBoundsFactory( prop, el, bounds, image, imageIndex, backgroundSize ) { var bgposition = _html2canvas.Util.getCSS( el, prop, imageIndex ) , topPos, left, percentage, val; if (bgposition.length === 1){ val = bgposition[0]; bgposition = []; bgposition[0] = val; bgposition[1] = val; } if (bgposition[0].toString().indexOf("%") !== -1){ percentage = (parseFloat(bgposition[0])/100); left = bounds.width * percentage; if(prop !== 'backgroundSize') { left -= (backgroundSize || image).width*percentage; } } else { if(prop === 'backgroundSize') { if(bgposition[0] === 'auto') { left = image.width; } else { if (/contain|cover/.test(bgposition[0])) { var resized = _html2canvas.Util.resizeBounds(image.width, image.height, bounds.width, bounds.height, bgposition[0]); left = resized.width; topPos = resized.height; } else { left = parseInt(bgposition[0], 10); } } } else { left = parseInt( bgposition[0], 10); } } if(bgposition[1] === 'auto') { topPos = left / image.width * image.height; } else if (bgposition[1].toString().indexOf("%") !== -1){ percentage = (parseFloat(bgposition[1])/100); topPos = bounds.height * percentage; if(prop !== 'backgroundSize') { topPos -= (backgroundSize || image).height * percentage; } } else { topPos = parseInt(bgposition[1],10); } return [left, topPos]; } _html2canvas.Util.BackgroundPosition = function( el, bounds, image, imageIndex, backgroundSize ) { var result = backgroundBoundsFactory( 'backgroundPosition', el, bounds, image, imageIndex, backgroundSize ); return { left: result[0], top: result[1] }; }; _html2canvas.Util.BackgroundSize = function( el, bounds, image, imageIndex ) { var result = backgroundBoundsFactory( 'backgroundSize', el, bounds, image, imageIndex ); return { width: result[0], height: result[1] }; }; _html2canvas.Util.Extend = function (options, defaults) { for (var key in options) { if (options.hasOwnProperty(key)) { defaults[key] = options[key]; } } return defaults; }; /* * Derived from jQuery.contents() * Copyright 2010, John Resig * Dual licensed under the MIT or GPL Version 2 licenses. * http://jquery.org/license */ _html2canvas.Util.Children = function( elem ) { var children; try { children = (elem.nodeName && elem.nodeName.toUpperCase() === "IFRAME") ? elem.contentDocument || elem.contentWindow.document : (function(array) { var ret = []; if (array !== null) { (function(first, second ) { var i = first.length, j = 0; if (typeof second.length === "number") { for (var l = second.length; j < l; j++) { first[i++] = second[j]; } } else { while (second[j] !== undefined) { first[i++] = second[j++]; } } first.length = i; return first; })(ret, array); } return ret; })(elem.childNodes); } catch (ex) { _html2canvas.Util.log("html2canvas.Util.Children failed with exception: " + ex.message); children = []; } return children; }; _html2canvas.Util.isTransparent = function(backgroundColor) { return (backgroundColor === "transparent" || backgroundColor === "rgba(0, 0, 0, 0)"); }; _html2canvas.Util.Font = (function () { var fontData = {}; return function(font, fontSize, doc) { if (fontData[font + "-" + fontSize] !== undefined) { return fontData[font + "-" + fontSize]; } var container = doc.createElement('div'), img = doc.createElement('img'), span = doc.createElement('span'), sampleText = 'Hidden Text', baseline, middle, metricsObj; container.style.visibility = "hidden"; container.style.fontFamily = font; container.style.fontSize = fontSize; container.style.margin = 0; container.style.padding = 0; doc.body.appendChild(container); // http://probablyprogramming.com/2009/03/15/the-tiniest-gif-ever (handtinywhite.gif) img.src = "data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACwAAAAAAQABAAACAkQBADs="; img.width = 1; img.height = 1; img.style.margin = 0; img.style.padding = 0; img.style.verticalAlign = "baseline"; span.style.fontFamily = font; span.style.fontSize = fontSize; span.style.margin = 0; span.style.padding = 0; span.appendChild(doc.createTextNode(sampleText)); container.appendChild(span); container.appendChild(img); baseline = (img.offsetTop - span.offsetTop) + 1; container.removeChild(span); container.appendChild(doc.createTextNode(sampleText)); container.style.lineHeight = "normal"; img.style.verticalAlign = "super"; middle = (img.offsetTop-container.offsetTop) + 1; metricsObj = { baseline: baseline, lineWidth: 1, middle: middle }; fontData[font + "-" + fontSize] = metricsObj; doc.body.removeChild(container); return metricsObj; }; })(); (function(){ var Util = _html2canvas.Util, Generate = {}; _html2canvas.Generate = Generate; var reGradients = [ /^(-webkit-linear-gradient)\(([a-z\s]+)([\w\d\.\s,%\(\)]+)\)$/, /^(-o-linear-gradient)\(([a-z\s]+)([\w\d\.\s,%\(\)]+)\)$/, /^(-webkit-gradient)\((linear|radial),\s((?:\d{1,3}%?)\s(?:\d{1,3}%?),\s(?:\d{1,3}%?)\s(?:\d{1,3}%?))([\w\d\.\s,%\(\)\-]+)\)$/, /^(-moz-linear-gradient)\(((?:\d{1,3}%?)\s(?:\d{1,3}%?))([\w\d\.\s,%\(\)]+)\)$/, /^(-webkit-radial-gradient)\(((?:\d{1,3}%?)\s(?:\d{1,3}%?)),\s(\w+)\s([a-z\-]+)([\w\d\.\s,%\(\)]+)\)$/, /^(-moz-radial-gradient)\(((?:\d{1,3}%?)\s(?:\d{1,3}%?)),\s(\w+)\s?([a-z\-]*)([\w\d\.\s,%\(\)]+)\)$/, /^(-o-radial-gradient)\(((?:\d{1,3}%?)\s(?:\d{1,3}%?)),\s(\w+)\s([a-z\-]+)([\w\d\.\s,%\(\)]+)\)$/ ]; /* * TODO: Add IE10 vendor prefix (-ms) support * TODO: Add W3C gradient (linear-gradient) support * TODO: Add old Webkit -webkit-gradient(radial, ...) support * TODO: Maybe some RegExp optimizations are possible ;o) */ Generate.parseGradient = function(css, bounds) { var gradient, i, len = reGradients.length, m1, stop, m2, m2Len, step, m3, tl,tr,br,bl; for(i = 0; i < len; i+=1){ m1 = css.match(reGradients[i]); if(m1) { break; } } if(m1) { switch(m1[1]) { case '-webkit-linear-gradient': case '-o-linear-gradient': gradient = { type: 'linear', x0: null, y0: null, x1: null, y1: null, colorStops: [] }; // get coordinates m2 = m1[2].match(/\w+/g); if(m2){ m2Len = m2.length; for(i = 0; i < m2Len; i+=1){ switch(m2[i]) { case 'top': gradient.y0 = 0; gradient.y1 = bounds.height; break; case 'right': gradient.x0 = bounds.width; gradient.x1 = 0; break; case 'bottom': gradient.y0 = bounds.height; gradient.y1 = 0; break; case 'left': gradient.x0 = 0; gradient.x1 = bounds.width; break; } } } if(gradient.x0 === null && gradient.x1 === null){ // center gradient.x0 = gradient.x1 = bounds.width / 2; } if(gradient.y0 === null && gradient.y1 === null){ // center gradient.y0 = gradient.y1 = bounds.height / 2; } // get colors and stops m2 = m1[3].match(/((?:rgb|rgba)\(\d{1,3},\s\d{1,3},\s\d{1,3}(?:,\s[0-9\.]+)?\)(?:\s\d{1,3}(?:%|px))?)+/g); if(m2){ m2Len = m2.length; step = 1 / Math.max(m2Len - 1, 1); for(i = 0; i < m2Len; i+=1){ m3 = m2[i].match(/((?:rgb|rgba)\(\d{1,3},\s\d{1,3},\s\d{1,3}(?:,\s[0-9\.]+)?\))\s*(\d{1,3})?(%|px)?/); if(m3[2]){ stop = parseFloat(m3[2]); if(m3[3] === '%'){ stop /= 100; } else { // px - stupid opera stop /= bounds.width; } } else { stop = i * step; } gradient.colorStops.push({ color: m3[1], stop: stop }); } } break; case '-webkit-gradient': gradient = { type: m1[2] === 'radial' ? 'circle' : m1[2], // TODO: Add radial gradient support for older mozilla definitions x0: 0, y0: 0, x1: 0, y1: 0, colorStops: [] }; // get coordinates m2 = m1[3].match(/(\d{1,3})%?\s(\d{1,3})%?,\s(\d{1,3})%?\s(\d{1,3})%?/); if(m2){ gradient.x0 = (m2[1] * bounds.width) / 100; gradient.y0 = (m2[2] * bounds.height) / 100; gradient.x1 = (m2[3] * bounds.width) / 100; gradient.y1 = (m2[4] * bounds.height) / 100; } // get colors and stops m2 = m1[4].match(/((?:from|to|color-stop)\((?:[0-9\.]+,\s)?(?:rgb|rgba)\(\d{1,3},\s\d{1,3},\s\d{1,3}(?:,\s[0-9\.]+)?\)\))+/g); if(m2){ m2Len = m2.length; for(i = 0; i < m2Len; i+=1){ m3 = m2[i].match(/(from|to|color-stop)\(([0-9\.]+)?(?:,\s)?((?:rgb|rgba)\(\d{1,3},\s\d{1,3},\s\d{1,3}(?:,\s[0-9\.]+)?\))\)/); stop = parseFloat(m3[2]); if(m3[1] === 'from') { stop = 0.0; } if(m3[1] === 'to') { stop = 1.0; } gradient.colorStops.push({ color: m3[3], stop: stop }); } } break; case '-moz-linear-gradient': gradient = { type: 'linear', x0: 0, y0: 0, x1: 0, y1: 0, colorStops: [] }; // get coordinates m2 = m1[2].match(/(\d{1,3})%?\s(\d{1,3})%?/); // m2[1] == 0% -> left // m2[1] == 50% -> center // m2[1] == 100% -> right // m2[2] == 0% -> top // m2[2] == 50% -> center // m2[2] == 100% -> bottom if(m2){ gradient.x0 = (m2[1] * bounds.width) / 100; gradient.y0 = (m2[2] * bounds.height) / 100; gradient.x1 = bounds.width - gradient.x0; gradient.y1 = bounds.height - gradient.y0; } // get colors and stops m2 = m1[3].match(/((?:rgb|rgba)\(\d{1,3},\s\d{1,3},\s\d{1,3}(?:,\s[0-9\.]+)?\)(?:\s\d{1,3}%)?)+/g); if(m2){ m2Len = m2.length; step = 1 / Math.max(m2Len - 1, 1); for(i = 0; i < m2Len; i+=1){ m3 = m2[i].match(/((?:rgb|rgba)\(\d{1,3},\s\d{1,3},\s\d{1,3}(?:,\s[0-9\.]+)?\))\s*(\d{1,3})?(%)?/); if(m3[2]){ stop = parseFloat(m3[2]); if(m3[3]){ // percentage stop /= 100; } } else { stop = i * step; } gradient.colorStops.push({ color: m3[1], stop: stop }); } } break; case '-webkit-radial-gradient': case '-moz-radial-gradient': case '-o-radial-gradient': gradient = { type: 'circle', x0: 0, y0: 0, x1: bounds.width, y1: bounds.height, cx: 0, cy: 0, rx: 0, ry: 0, colorStops: [] }; // center m2 = m1[2].match(/(\d{1,3})%?\s(\d{1,3})%?/); if(m2){ gradient.cx = (m2[1] * bounds.width) / 100; gradient.cy = (m2[2] * bounds.height) / 100; } // size m2 = m1[3].match(/\w+/); m3 = m1[4].match(/[a-z\-]*/); if(m2 && m3){ switch(m3[0]){ case 'farthest-corner': case 'cover': // is equivalent to farthest-corner case '': // mozilla removes "cover" from definition :( tl = Math.sqrt(Math.pow(gradient.cx, 2) + Math.pow(gradient.cy, 2)); tr = Math.sqrt(Math.pow(gradient.cx, 2) + Math.pow(gradient.y1 - gradient.cy, 2)); br = Math.sqrt(Math.pow(gradient.x1 - gradient.cx, 2) + Math.pow(gradient.y1 - gradient.cy, 2)); bl = Math.sqrt(Math.pow(gradient.x1 - gradient.cx, 2) + Math.pow(gradient.cy, 2)); gradient.rx = gradient.ry = Math.max(tl, tr, br, bl); break; case 'closest-corner': tl = Math.sqrt(Math.pow(gradient.cx, 2) + Math.pow(gradient.cy, 2)); tr = Math.sqrt(Math.pow(gradient.cx, 2) + Math.pow(gradient.y1 - gradient.cy, 2)); br = Math.sqrt(Math.pow(gradient.x1 - gradient.cx, 2) + Math.pow(gradient.y1 - gradient.cy, 2)); bl = Math.sqrt(Math.pow(gradient.x1 - gradient.cx, 2) + Math.pow(gradient.cy, 2)); gradient.rx = gradient.ry = Math.min(tl, tr, br, bl); break; case 'farthest-side': if(m2[0] === 'circle'){ gradient.rx = gradient.ry = Math.max( gradient.cx, gradient.cy, gradient.x1 - gradient.cx, gradient.y1 - gradient.cy ); } else { // ellipse gradient.type = m2[0]; gradient.rx = Math.max( gradient.cx, gradient.x1 - gradient.cx ); gradient.ry = Math.max( gradient.cy, gradient.y1 - gradient.cy ); } break; case 'closest-side': case 'contain': // is equivalent to closest-side if(m2[0] === 'circle'){ gradient.rx = gradient.ry = Math.min( gradient.cx, gradient.cy, gradient.x1 - gradient.cx, gradient.y1 - gradient.cy ); } else { // ellipse gradient.type = m2[0]; gradient.rx = Math.min( gradient.cx, gradient.x1 - gradient.cx ); gradient.ry = Math.min( gradient.cy, gradient.y1 - gradient.cy ); } break; // TODO: add support for "30px 40px" sizes (webkit only) } } // color stops m2 = m1[5].match(/((?:rgb|rgba)\(\d{1,3},\s\d{1,3},\s\d{1,3}(?:,\s[0-9\.]+)?\)(?:\s\d{1,3}(?:%|px))?)+/g); if(m2){ m2Len = m2.length; step = 1 / Math.max(m2Len - 1, 1); for(i = 0; i < m2Len; i+=1){ m3 = m2[i].match(/((?:rgb|rgba)\(\d{1,3},\s\d{1,3},\s\d{1,3}(?:,\s[0-9\.]+)?\))\s*(\d{1,3})?(%|px)?/); if(m3[2]){ stop = parseFloat(m3[2]); if(m3[3] === '%'){ stop /= 100; } else { // px - stupid opera stop /= bounds.width; } } else { stop = i * step; } gradient.colorStops.push({ color: m3[1], stop: stop }); } } break; } } return gradient; }; function addScrollStops(grad) { return function(colorStop) { try { grad.addColorStop(colorStop.stop, colorStop.color); } catch(e) { Util.log(['failed to add color stop: ', e, '; tried to add: ', colorStop]); } }; } Generate.Gradient = function(src, bounds) { if(bounds.width === 0 || bounds.height === 0) { return; } var canvas = document.createElement('canvas'), ctx = canvas.getContext('2d'), gradient, grad; canvas.width = bounds.width; canvas.height = bounds.height; // TODO: add support for multi defined background gradients gradient = _html2canvas.Generate.parseGradient(src, bounds); if(gradient) { switch(gradient.type) { case 'linear': grad = ctx.createLinearGradient(gradient.x0, gradient.y0, gradient.x1, gradient.y1); gradient.colorStops.forEach(addScrollStops(grad)); ctx.fillStyle = grad; ctx.fillRect(0, 0, bounds.width, bounds.height); break; case 'circle': grad = ctx.createRadialGradient(gradient.cx, gradient.cy, 0, gradient.cx, gradient.cy, gradient.rx); gradient.colorStops.forEach(addScrollStops(grad)); ctx.fillStyle = grad; ctx.fillRect(0, 0, bounds.width, bounds.height); break; case 'ellipse': var canvasRadial = document.createElement('canvas'), ctxRadial = canvasRadial.getContext('2d'), ri = Math.max(gradient.rx, gradient.ry), di = ri * 2; canvasRadial.width = canvasRadial.height = di; grad = ctxRadial.createRadialGradient(gradient.rx, gradient.ry, 0, gradient.rx, gradient.ry, ri); gradient.colorStops.forEach(addScrollStops(grad)); ctxRadial.fillStyle = grad; ctxRadial.fillRect(0, 0, di, di); ctx.fillStyle = gradient.colorStops[gradient.colorStops.length - 1].color; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.drawImage(canvasRadial, gradient.cx - gradient.rx, gradient.cy - gradient.ry, 2 * gradient.rx, 2 * gradient.ry); break; } } return canvas; }; Generate.ListAlpha = function(number) { var tmp = "", modulus; do { modulus = number % 26; tmp = String.fromCharCode((modulus) + 64) + tmp; number = number / 26; }while((number*26) > 26); return tmp; }; Generate.ListRoman = function(number) { var romanArray = ["M", "CM", "D", "CD", "C", "XC", "L", "XL", "X", "IX", "V", "IV", "I"], decimal = [1000, 900, 500, 400, 100, 90, 50, 40, 10, 9, 5, 4, 1], roman = "", v, len = romanArray.length; if (number <= 0 || number >= 4000) { return number; } for (v=0; v < len; v+=1) { while (number >= decimal[v]) { number -= decimal[v]; roman += romanArray[v]; } } return roman; }; })(); function h2cRenderContext(width, height) { var storage = []; return { storage: storage, width: width, height: height, clip: function() { storage.push({ type: "function", name: "clip", 'arguments': arguments }); }, translate: function() { storage.push({ type: "function", name: "translate", 'arguments': arguments }); }, fill: function() { storage.push({ type: "function", name: "fill", 'arguments': arguments }); }, save: function() { storage.push({ type: "function", name: "save", 'arguments': arguments }); }, restore: function() { storage.push({ type: "function", name: "restore", 'arguments': arguments }); }, fillRect: function () { storage.push({ type: "function", name: "fillRect", 'arguments': arguments }); }, createPattern: function() { storage.push({ type: "function", name: "createPattern", 'arguments': arguments }); }, drawShape: function() { var shape = []; storage.push({ type: "function", name: "drawShape", 'arguments': shape }); return { moveTo: function() { shape.push({ name: "moveTo", 'arguments': arguments }); }, lineTo: function() { shape.push({ name: "lineTo", 'arguments': arguments }); }, arcTo: function() { shape.push({ name: "arcTo", 'arguments': arguments }); }, bezierCurveTo: function() { shape.push({ name: "bezierCurveTo", 'arguments': arguments }); }, quadraticCurveTo: function() { shape.push({ name: "quadraticCurveTo", 'arguments': arguments }); } }; }, drawImage: function () { storage.push({ type: "function", name: "drawImage", 'arguments': arguments }); }, fillText: function () { storage.push({ type: "function", name: "fillText", 'arguments': arguments }); }, setVariable: function (variable, value) { storage.push({ type: "variable", name: variable, 'arguments': value }); return value; } }; } _html2canvas.Parse = function (images, options) { window.scroll(0,0); var element = (( options.elements === undefined ) ? document.body : options.elements[0]), // select body by default numDraws = 0, doc = element.ownerDocument, Util = _html2canvas.Util, support = Util.Support(options, doc), ignoreElementsRegExp = new RegExp("(" + options.ignoreElements + ")"), body = doc.body, getCSS = Util.getCSS, pseudoHide = "___html2canvas___pseudoelement", hidePseudoElements = doc.createElement('style'); hidePseudoElements.innerHTML = '.' + pseudoHide + '-before:before { content: "" !important; display: none !important; }' + '.' + pseudoHide + '-after:after { content: "" !important; display: none !important; }'; body.appendChild(hidePseudoElements); images = images || {}; function documentWidth () { return Math.max( Math.max(doc.body.scrollWidth, doc.documentElement.scrollWidth), Math.max(doc.body.offsetWidth, doc.documentElement.offsetWidth), Math.max(doc.body.clientWidth, doc.documentElement.clientWidth) ); } function documentHeight () { return Math.max( Math.max(doc.body.scrollHeight, doc.documentElement.scrollHeight), Math.max(doc.body.offsetHeight, doc.documentElement.offsetHeight), Math.max(doc.body.clientHeight, doc.documentElement.clientHeight) ); } function getCSSInt(element, attribute) { var val = parseInt(getCSS(element, attribute), 10); return (isNaN(val)) ? 0 : val; // borders in old IE are throwing 'medium' for demo.html } function renderRect (ctx, x, y, w, h, bgcolor) { if (bgcolor !== "transparent"){ ctx.setVariable("fillStyle", bgcolor); ctx.fillRect(x, y, w, h); numDraws+=1; } } function capitalize(m, p1, p2) { if (m.length > 0) { return p1 + p2.toUpperCase(); } } function textTransform (text, transform) { switch(transform){ case "lowercase": return text.toLowerCase(); case "capitalize": return text.replace( /(^|\s|:|-|\(|\))([a-z])/g, capitalize); case "uppercase": return text.toUpperCase(); default: return text; } } function noLetterSpacing(letter_spacing) { return (/^(normal|none|0px)$/.test(letter_spacing)); } function drawText(currentText, x, y, ctx){ if (currentText !== null && Util.trimText(currentText).length > 0) { ctx.fillText(currentText, x, y); numDraws+=1; } } function setTextVariables(ctx, el, text_decoration, color) { var align = false, bold = getCSS(el, "fontWeight"), family = getCSS(el, "fontFamily"), size = getCSS(el, "fontSize"), shadows = Util.parseTextShadows(getCSS(el, "textShadow")); switch(parseInt(bold, 10)){ case 401: bold = "bold"; break; case 400: bold = "normal"; break; } ctx.setVariable("fillStyle", color); ctx.setVariable("font", [getCSS(el, "fontStyle"), getCSS(el, "fontVariant"), bold, size, family].join(" ")); ctx.setVariable("textAlign", (align) ? "right" : "left"); if (shadows.length) { // TODO: support multiple text shadows // apply the first text shadow ctx.setVariable("shadowColor", shadows[0].color); ctx.setVariable("shadowOffsetX", shadows[0].offsetX); ctx.setVariable("shadowOffsetY", shadows[0].offsetY); ctx.setVariable("shadowBlur", shadows[0].blur); } if (text_decoration !== "none"){ return Util.Font(family, size, doc); } } function renderTextDecoration(ctx, text_decoration, bounds, metrics, color) { switch(text_decoration) { case "underline": // Draws a line at the baseline of the font // TODO As some browsers display the line as more than 1px if the font-size is big, need to take that into account both in position and size renderRect(ctx, bounds.left, Math.round(bounds.top + metrics.baseline + metrics.lineWidth), bounds.width, 1, color); break; case "overline": renderRect(ctx, bounds.left, Math.round(bounds.top), bounds.width, 1, color); break; case "line-through": // TODO try and find exact position for line-through renderRect(ctx, bounds.left, Math.ceil(bounds.top + metrics.middle + metrics.lineWidth), bounds.width, 1, color); break; } } function getTextBounds(state, text, textDecoration, isLast, transform) { var bounds; if (support.rangeBounds && !transform) { if (textDecoration !== "none" || Util.trimText(text).length !== 0) { bounds = textRangeBounds(text, state.node, state.textOffset); } state.textOffset += text.length; } else if (state.node && typeof state.node.nodeValue === "string" ){ var newTextNode = (isLast) ? state.node.splitText(text.length) : null; bounds = textWrapperBounds(state.node, transform); state.node = newTextNode; } return bounds; } function textRangeBounds(text, textNode, textOffset) { var range = doc.createRange(); range.setStart(textNode, textOffset); range.setEnd(textNode, textOffset + text.length); return range.getBoundingClientRect(); } function textWrapperBounds(oldTextNode, transform) { var parent = oldTextNode.parentNode, wrapElement = doc.createElement('wrapper'), backupText = oldTextNode.cloneNode(true); wrapElement.appendChild(oldTextNode.cloneNode(true)); parent.replaceChild(wrapElement, oldTextNode); var bounds = transform ? Util.OffsetBounds(wrapElement) : Util.Bounds(wrapElement); parent.replaceChild(backupText, wrapElement); return bounds; } function renderText(el, textNode, stack) { var ctx = stack.ctx, color = getCSS(el, "color"), textDecoration = getCSS(el, "textDecoration"), textAlign = getCSS(el, "textAlign"), metrics, textList, state = { node: textNode, textOffset: 0 }; if (Util.trimText(textNode.nodeValue).length > 0) { textNode.nodeValue = textTransform(textNode.nodeValue, getCSS(el, "textTransform")); textAlign = textAlign.replace(["-webkit-auto"],["auto"]); textList = (!options.letterRendering && /^(left|right|justify|auto)$/.test(textAlign) && noLetterSpacing(getCSS(el, "letterSpacing"))) ? textNode.nodeValue.split(/(\b| )/) : textNode.nodeValue.split(""); metrics = setTextVariables(ctx, el, textDecoration, color); if (options.chinese) { textList.forEach(function(word, index) { if (/.*[\u4E00-\u9FA5].*$/.test(word)) { word = word.split(""); word.unshift(index, 1); textList.splice.apply(textList, word); } }); } textList.forEach(function(text, index) { var bounds = getTextBounds(state, text, textDecoration, (index < textList.length - 1), stack.transform.matrix); if (bounds) { drawText(text, bounds.left, bounds.bottom, ctx); renderTextDecoration(ctx, textDecoration, bounds, metrics, color); } }); } } function listPosition (element, val) { var boundElement = doc.createElement( "boundelement" ), originalType, bounds; boundElement.style.display = "inline"; originalType = element.style.listStyleType; element.style.listStyleType = "none"; boundElement.appendChild(doc.createTextNode(val)); element.insertBefore(boundElement, element.firstChild); bounds = Util.Bounds(boundElement); element.removeChild(boundElement); element.style.listStyleType = originalType; return bounds; } function elementIndex(el) { var i = -1, count = 1, childs = el.parentNode.childNodes; if (el.parentNode) { while(childs[++i] !== el) { if (childs[i].nodeType === 1) { count++; } } return count; } else { return -1; } } function listItemText(element, type) { var currentIndex = elementIndex(element), text; switch(type){ case "decimal": text = currentIndex; break; case "decimal-leading-zero": text = (currentIndex.toString().length === 1) ? currentIndex = "0" + currentIndex.toString() : currentIndex.toString(); break; case "upper-roman": text = _html2canvas.Generate.ListRoman( currentIndex ); break; case "lower-roman": text = _html2canvas.Generate.ListRoman( currentIndex ).toLowerCase(); break; case "lower-alpha": text = _html2canvas.Generate.ListAlpha( currentIndex ).toLowerCase(); break; case "upper-alpha": text = _html2canvas.Generate.ListAlpha( currentIndex ); break; } return text + ". "; } function renderListItem(element, stack, elBounds) { var x, text, ctx = stack.ctx, type = getCSS(element, "listStyleType"), listBounds; if (/^(decimal|decimal-leading-zero|upper-alpha|upper-latin|upper-roman|lower-alpha|lower-greek|lower-latin|lower-roman)$/i.test(type)) { text = listItemText(element, type); listBounds = listPosition(element, text); setTextVariables(ctx, element, "none", getCSS(element, "color")); if (getCSS(element, "listStylePosition") === "inside") { ctx.setVariable("textAlign", "left"); x = elBounds.left; } else { return; } drawText(text, x, listBounds.bottom, ctx); } } function loadImage (src){ var img = images[src]; return (img && img.succeeded === true) ? img.img : false; } function clipBounds(src, dst){ var x = Math.max(src.left, dst.left), y = Math.max(src.top, dst.top), x2 = Math.min((src.left + src.width), (dst.left + dst.width)), y2 = Math.min((src.top + src.height), (dst.top + dst.height)); return { left:x, top:y, width:x2-x, height:y2-y }; } function setZ(element, stack, parentStack){ var newContext, isPositioned = stack.cssPosition !== 'static', zIndex = isPositioned ? getCSS(element, 'zIndex') : 'auto', opacity = getCSS(element, 'opacity'), isFloated = getCSS(element, 'cssFloat') !== 'none'; // https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context // When a new stacking context should be created: // the root element (HTML), // positioned (absolutely or relatively) with a z-index value other than "auto", // elements with an opacity value less than 1. (See the specification for opacity), // on mobile WebKit and Chrome 22+, position: fixed always creates a new stacking context, even when z-index is "auto" (See this post) stack.zIndex = newContext = h2czContext(zIndex); newContext.isPositioned = isPositioned; newContext.isFloated = isFloated; newContext.opacity = opacity; newContext.ownStacking = (zIndex !== 'auto' || opacity < 1); if (parentStack) { parentStack.zIndex.children.push(stack); } } function renderImage(ctx, element, image, bounds, borders) { var paddingLeft = getCSSInt(element, 'paddingLeft'), paddingTop = getCSSInt(element, 'paddingTop'), paddingRight = getCSSInt(element, 'paddingRight'), paddingBottom = getCSSInt(element, 'paddingBottom'); drawImage( ctx, image, 0, //sx 0, //sy image.width, //sw image.height, //sh bounds.left + paddingLeft + borders[3].width, //dx bounds.top + paddingTop + borders[0].width, // dy bounds.width - (borders[1].width + borders[3].width + paddingLeft + paddingRight), //dw bounds.height - (borders[0].width + borders[2].width + paddingTop + paddingBottom) //dh ); } function getBorderData(element) { return ["Top", "Right", "Bottom", "Left"].map(function(side) { return { width: getCSSInt(element, 'border' + side + 'Width'), color: getCSS(element, 'border' + side + 'Color') }; }); } function getBorderRadiusData(element) { return ["TopLeft", "TopRight", "BottomRight", "BottomLeft"].map(function(side) { return getCSS(element, 'border' + side + 'Radius'); }); } var getCurvePoints = (function(kappa) { return function(x, y, r1, r2) { var ox = (r1) * kappa, // control point offset horizontal oy = (r2) * kappa, // control point offset vertical xm = x + r1, // x-middle ym = y + r2; // y-middle return { topLeft: bezierCurve({ x:x, y:ym }, { x:x, y:ym - oy }, { x:xm - ox, y:y }, { x:xm, y:y }), topRight: bezierCurve({ x:x, y:y }, { x:x + ox, y:y }, { x:xm, y:ym - oy }, { x:xm, y:ym }), bottomRight: bezierCurve({ x:xm, y:y }, { x:xm, y:y + oy }, { x:x + ox, y:ym }, { x:x, y:ym }), bottomLeft: bezierCurve({ x:xm, y:ym }, { x:xm - ox, y:ym }, { x:x, y:y + oy }, { x:x, y:y }) }; }; })(4 * ((Math.sqrt(2) - 1) / 3)); function bezierCurve(start, startControl, endControl, end) { var lerp = function (a, b, t) { return { x:a.x + (b.x - a.x) * t, y:a.y + (b.y - a.y) * t }; }; return { start: start, startControl: startControl, endControl: endControl, end: end, subdivide: function(t) { var ab = lerp(start, startControl, t), bc = lerp(startControl, endControl, t), cd = lerp(endControl, end, t), abbc = lerp(ab, bc, t), bccd = lerp(bc, cd, t), dest = lerp(abbc, bccd, t); return [bezierCurve(start, ab, abbc, dest), bezierCurve(dest, bccd, cd, end)]; }, curveTo: function(borderArgs) { borderArgs.push(["bezierCurve", startControl.x, startControl.y, endControl.x, endControl.y, end.x, end.y]); }, curveToReversed: function(borderArgs) { borderArgs.push(["bezierCurve", endControl.x, endControl.y, startControl.x, startControl.y, start.x, start.y]); } }; } function parseCorner(borderArgs, radius1, radius2, corner1, corner2, x, y) { if (radius1[0] > 0 || radius1[1] > 0) { borderArgs.push(["line", corner1[0].start.x, corner1[0].start.y]); corner1[0].curveTo(borderArgs); corner1[1].curveTo(borderArgs); } else { borderArgs.push(["line", x, y]); } if (radius2[0] > 0 || radius2[1] > 0) { borderArgs.push(["line", corner2[0].start.x, corner2[0].start.y]); } } function drawSide(borderData, radius1, radius2, outer1, inner1, outer2, inner2) { var borderArgs = []; if (radius1[0] > 0 || radius1[1] > 0) { borderArgs.push(["line", outer1[1].start.x, outer1[1].start.y]); outer1[1].curveTo(borderArgs); } else { borderArgs.push([ "line", borderData.c1[0], borderData.c1[1]]); } if (radius2[0] > 0 || radius2[1] > 0) { borderArgs.push(["line", outer2[0].start.x, outer2[0].start.y]); outer2[0].curveTo(borderArgs); borderArgs.push(["line", inner2[0].end.x, inner2[0].end.y]); inner2[0].curveToReversed(borderArgs); } else { borderArgs.push([ "line", borderData.c2[0], borderData.c2[1]]); borderArgs.push([ "line", borderData.c3[0], borderData.c3[1]]); } if (radius1[0] > 0 || radius1[1] > 0) { borderArgs.push(["line", inner1[1].end.x, inner1[1].end.y]); inner1[1].curveToReversed(borderArgs); } else { borderArgs.push([ "line", borderData.c4[0], borderData.c4[1]]); } return borderArgs; } function calculateCurvePoints(bounds, borderRadius, borders) { var x = bounds.left, y = bounds.top, width = bounds.width, height = bounds.height, tlh = borderRadius[0][0], tlv = borderRadius[0][1], trh = borderRadius[1][0], trv = borderRadius[1][1], brh = borderRadius[2][0], brv = borderRadius[2][1], blh = borderRadius[3][0], blv = borderRadius[3][1], topWidth = width - trh, rightHeight = height - brv, bottomWidth = width - brh, leftHeight = height - blv; return { topLeftOuter: getCurvePoints( x, y, tlh, tlv ).topLeft.subdivide(0.5), topLeftInner: getCurvePoints( x + borders[3].width, y + borders[0].width, Math.max(0, tlh - borders[3].width), Math.max(0, tlv - borders[0].width) ).topLeft.subdivide(0.5), topRightOuter: getCurvePoints( x + topWidth, y, trh, trv ).topRight.subdivide(0.5), topRightInner: getCurvePoints( x + Math.min(topWidth, width + borders[3].width), y + borders[0].width, (topWidth > width + borders[3].width) ? 0 :trh - borders[3].width, trv - borders[0].width ).topRight.subdivide(0.5), bottomRightOuter: getCurvePoints( x + bottomWidth, y + rightHeight, brh, brv ).bottomRight.subdivide(0.5), bottomRightInner: getCurvePoints( x + Math.min(bottomWidth, width + borders[3].width), y + Math.min(rightHeight, height + borders[0].width), Math.max(0, brh - borders[1].width), Math.max(0, brv - borders[2].width) ).bottomRight.subdivide(0.5), bottomLeftOuter: getCurvePoints( x, y + leftHeight, blh, blv ).bottomLeft.subdivide(0.5), bottomLeftInner: getCurvePoints( x + borders[3].width, y + leftHeight, Math.max(0, blh - borders[3].width), Math.max(0, blv - borders[2].width) ).bottomLeft.subdivide(0.5) }; } function getBorderClip(element, borderPoints, borders, radius, bounds) { var backgroundClip = getCSS(element, 'backgroundClip'), borderArgs = []; switch(backgroundClip) { case "content-box": case "padding-box": parseCorner(borderArgs, radius[0], radius[1], borderPoints.topLeftInner, borderPoints.topRightInner, bounds.left + borders[3].width, bounds.top + borders[0].width); parseCorner(borderArgs, radius[1], radius[2], borderPoints.topRightInner, borderPoints.bottomRightInner, bounds.left + bounds.width - borders[1].width, bounds.top + borders[0].width); parseCorner(borderArgs, radius[2], radius[3], borderPoints.bottomRightInner, borderPoints.bottomLeftInner, bounds.left + bounds.width - borders[1].width, bounds.top + bounds.height - borders[2].width); parseCorner(borderArgs, radius[3], radius[0], borderPoints.bottomLeftInner, borderPoints.topLeftInner, bounds.left + borders[3].width, bounds.top + bounds.height - borders[2].width); break; default: parseCorner(borderArgs, radius[0], radius[1], borderPoints.topLeftOuter, borderPoints.topRightOuter, bounds.left, bounds.top); parseCorner(borderArgs, radius[1], radius[2], borderPoints.topRightOuter, borderPoints.bottomRightOuter, bounds.left + bounds.width, bounds.top); parseCorner(borderArgs, radius[2], radius[3], borderPoints.bottomRightOuter, borderPoints.bottomLeftOuter, bounds.left + bounds.width, bounds.top + bounds.height); parseCorner(borderArgs, radius[3], radius[0], borderPoints.bottomLeftOuter, borderPoints.topLeftOuter, bounds.left, bounds.top + bounds.height); break; } return borderArgs; } function parseBorders(element, bounds, borders){ var x = bounds.left, y = bounds.top, width = bounds.width, height = bounds.height, borderSide, bx, by, bw, bh, borderArgs, // http://www.w3.org/TR/css3-background/#the-border-radius borderRadius = getBorderRadiusData(element), borderPoints = calculateCurvePoints(bounds, borderRadius, borders), borderData = { clip: getBorderClip(element, borderPoints, borders, borderRadius, bounds), borders: [] }; for (borderSide = 0; borderSide < 4; borderSide++) { if (borders[borderSide].width > 0) { bx = x; by = y; bw = width; bh = height - (borders[2].width); switch(borderSide) { case 0: // top border bh = borders[0].width; borderArgs = drawSide({ c1: [bx, by], c2: [bx + bw, by], c3: [bx + bw - borders[1].width, by + bh], c4: [bx + borders[3].width, by + bh] }, borderRadius[0], borderRadius[1], borderPoints.topLeftOuter, borderPoints.topLeftInner, borderPoints.topRightOuter, borderPoints.topRightInner); break; case 1: // right border bx = x + width - (borders[1].width); bw = borders[1].width; borderArgs = drawSide({ c1: [bx + bw, by], c2: [bx + bw, by + bh + borders[2].width], c3: [bx, by + bh], c4: [bx, by + borders[0].width] }, borderRadius[1], borderRadius[2], borderPoints.topRightOuter, borderPoints.topRightInner, borderPoints.bottomRightOuter, borderPoints.bottomRightInner); break; case 2: // bottom border by = (by + height) - (borders[2].width); bh = borders[2].width; borderArgs = drawSide({ c1: [bx + bw, by + bh], c2: [bx, by + bh], c3: [bx + borders[3].width, by], c4: [bx + bw - borders[3].width, by] }, borderRadius[2], borderRadius[3], borderPoints.bottomRightOuter, borderPoints.bottomRightInner, borderPoints.bottomLeftOuter, borderPoints.bottomLeftInner); break; case 3: // left border bw = borders[3].width; borderArgs = drawSide({ c1: [bx, by + bh + borders[2].width], c2: [bx, by], c3: [bx + bw, by + borders[0].width], c4: [bx + bw, by + bh] }, borderRadius[3], borderRadius[0], borderPoints.bottomLeftOuter, borderPoints.bottomLeftInner, borderPoints.topLeftOuter, borderPoints.topLeftInner); break; } borderData.borders.push({ args: borderArgs, color: borders[borderSide].color }); } } return borderData; } function createShape(ctx, args) { var shape = ctx.drawShape(); args.forEach(function(border, index) { shape[(index === 0) ? "moveTo" : border[0] + "To" ].apply(null, border.slice(1)); }); return shape; } function renderBorders(ctx, borderArgs, color) { if (color !== "transparent") { ctx.setVariable( "fillStyle", color); createShape(ctx, borderArgs); ctx.fill(); numDraws+=1; } } function renderFormValue (el, bounds, stack){ var valueWrap = doc.createElement('valuewrap'), cssPropertyArray = ['lineHeight','textAlign','fontFamily','color','fontSize','paddingLeft','paddingTop','width','height','border','borderLeftWidth','borderTopWidth'], textValue, textNode; cssPropertyArray.forEach(function(property) { try { valueWrap.style[property] = getCSS(el, property); } catch(e) { // Older IE has issues with "border" Util.log("html2canvas: Parse: Exception caught in renderFormValue: " + e.message); } }); valueWrap.style.borderColor = "black"; valueWrap.style.borderStyle = "solid"; valueWrap.style.display = "block"; valueWrap.style.position = "absolute"; if (/^(submit|reset|button|text|password)$/.test(el.type) || el.nodeName === "SELECT"){ valueWrap.style.lineHeight = getCSS(el, "height"); } valueWrap.style.top = bounds.top + "px"; valueWrap.style.left = bounds.left + "px"; textValue = (el.nodeName === "SELECT") ? (el.options[el.selectedIndex] || 0).text : el.value; if(!textValue) { textValue = el.placeholder; } textNode = doc.createTextNode(textValue); valueWrap.appendChild(textNode); body.appendChild(valueWrap); renderText(el, textNode, stack); body.removeChild(valueWrap); } function drawImage (ctx) { ctx.drawImage.apply(ctx, Array.prototype.slice.call(arguments, 1)); numDraws+=1; } function getPseudoElement(el, which) { var elStyle = window.getComputedStyle(el, which); if(!elStyle || !elStyle.content || elStyle.content === "none" || elStyle.content === "-moz-alt-content" || elStyle.display === "none") { return; } var content = elStyle.content + '', first = content.substr( 0, 1 ); //strips quotes if(first === content.substr( content.length - 1 ) && first.match(/'|"/)) { content = content.substr( 1, content.length - 2 ); } var isImage = content.substr( 0, 3 ) === 'url', elps = document.createElement( isImage ? 'img' : 'span' ); elps.className = pseudoHide + "-before " + pseudoHide + "-after"; Object.keys(elStyle).filter(indexedProperty).forEach(function(prop) { // Prevent assigning of read only CSS Rules, ex. length, parentRule try { elps.style[prop] = elStyle[prop]; } catch (e) { Util.log(['Tried to assign readonly property ', prop, 'Error:', e]); } }); if(isImage) { elps.src = Util.parseBackgroundImage(content)[0].args[0]; } else { elps.innerHTML = content; } return elps; } function indexedProperty(property) { return (isNaN(window.parseInt(property, 10))); } function injectPseudoElements(el, stack) { var before = getPseudoElement(el, ':before'), after = getPseudoElement(el, ':after'); if(!before && !after) { return; } if(before) { el.className += " " + pseudoHide + "-before"; el.parentNode.insertBefore(before, el); parseElement(before, stack, true); el.parentNode.removeChild(before); el.className = el.className.replace(pseudoHide + "-before", "").trim(); } if (after) { el.className += " " + pseudoHide + "-after"; el.appendChild(after); parseElement(after, stack, true); el.removeChild(after); el.className = el.className.replace(pseudoHide + "-after", "").trim(); } } function renderBackgroundRepeat(ctx, image, backgroundPosition, bounds) { var offsetX = Math.round(bounds.left + backgroundPosition.left), offsetY = Math.round(bounds.top + backgroundPosition.top); ctx.createPattern(image); ctx.translate(offsetX, offsetY); ctx.fill(); ctx.translate(-offsetX, -offsetY); } function backgroundRepeatShape(ctx, image, backgroundPosition, bounds, left, top, width, height) { var args = []; args.push(["line", Math.round(left), Math.round(top)]); args.push(["line", Math.round(left + width), Math.round(top)]); args.push(["line", Math.round(left + width), Math.round(height + top)]); args.push(["line", Math.round(left), Math.round(height + top)]); createShape(ctx, args); ctx.save(); ctx.clip(); renderBackgroundRepeat(ctx, image, backgroundPosition, bounds); ctx.restore(); } function renderBackgroundColor(ctx, backgroundBounds, bgcolor) { renderRect( ctx, backgroundBounds.left, backgroundBounds.top, backgroundBounds.width, backgroundBounds.height, bgcolor ); } function renderBackgroundRepeating(el, bounds, ctx, image, imageIndex) { var backgroundSize = Util.BackgroundSize(el, bounds, image, imageIndex), backgroundPosition = Util.BackgroundPosition(el, bounds, image, imageIndex, backgroundSize), backgroundRepeat = getCSS(el, "backgroundRepeat").split(",").map(Util.trimText); image = resizeImage(image, backgroundSize); backgroundRepeat = backgroundRepeat[imageIndex] || backgroundRepeat[0]; switch (backgroundRepeat) { case "repeat-x": backgroundRepeatShape(ctx, image, backgroundPosition, bounds, bounds.left, bounds.top + backgroundPosition.top, 99999, image.height); break; case "repeat-y": backgroundRepeatShape(ctx, image, backgroundPosition, bounds, bounds.left + backgroundPosition.left, bounds.top, image.width, 99999); break; case "no-repeat": backgroundRepeatShape(ctx, image, backgroundPosition, bounds, bounds.left + backgroundPosition.left, bounds.top + backgroundPosition.top, image.width, image.height); break; default: renderBackgroundRepeat(ctx, image, backgroundPosition, { top: bounds.top, left: bounds.left, width: image.width, height: image.height }); break; } } function renderBackgroundImage(element, bounds, ctx) { var backgroundImage = getCSS(element, "backgroundImage"), backgroundImages = Util.parseBackgroundImage(backgroundImage), image, imageIndex = backgroundImages.length; while(imageIndex--) { backgroundImage = backgroundImages[imageIndex]; if (!backgroundImage.args || backgroundImage.args.length === 0) { continue; } var key = backgroundImage.method === 'url' ? backgroundImage.args[0] : backgroundImage.value; image = loadImage(key); // TODO add support for background-origin if (image) { renderBackgroundRepeating(element, bounds, ctx, image, imageIndex); } else { Util.log("html2canvas: Error loading background:", backgroundImage); } } } function resizeImage(image, bounds) { if(image.width === bounds.width && image.height === bounds.height) { return image; } var ctx, canvas = doc.createElement('canvas'); canvas.width = bounds.width; canvas.height = bounds.height; ctx = canvas.getContext("2d"); drawImage(ctx, image, 0, 0, image.width, image.height, 0, 0, bounds.width, bounds.height ); return canvas; } function setOpacity(ctx, element, parentStack) { return ctx.setVariable("globalAlpha", getCSS(element, "opacity") * ((parentStack) ? parentStack.opacity : 1)); } function removePx(str) { return str.replace("px", ""); } var transformRegExp = /(matrix)\((.+)\)/; function getTransform(element, parentStack) { var transform = getCSS(element, "transform") || getCSS(element, "-webkit-transform") || getCSS(element, "-moz-transform") || getCSS(element, "-ms-transform") || getCSS(element, "-o-transform"); var transformOrigin = getCSS(element, "transform-origin") || getCSS(element, "-webkit-transform-origin") || getCSS(element, "-moz-transform-origin") || getCSS(element, "-ms-transform-origin") || getCSS(element, "-o-transform-origin") || "0px 0px"; transformOrigin = transformOrigin.split(" ").map(removePx).map(Util.asFloat); var matrix; if (transform && transform !== "none") { var match = transform.match(transformRegExp); if (match) { switch(match[1]) { case "matrix": matrix = match[2].split(",").map(Util.trimText).map(Util.asFloat); break; } } } return { origin: transformOrigin, matrix: matrix }; } function createStack(element, parentStack, bounds, transform) { var ctx = h2cRenderContext((!parentStack) ? documentWidth() : bounds.width , (!parentStack) ? documentHeight() : bounds.height), stack = { ctx: ctx, opacity: setOpacity(ctx, element, parentStack), cssPosition: getCSS(element, "position"), borders: getBorderData(element), transform: transform, clip: (parentStack && parentStack.clip) ? Util.Extend( {}, parentStack.clip ) : null }; setZ(element, stack, parentStack); // TODO correct overflow for absolute content residing under a static position if (options.useOverflow === true && /(hidden|scroll|auto)/.test(getCSS(element, "overflow")) === true && /(BODY)/i.test(element.nodeName) === false){ stack.clip = (stack.clip) ? clipBounds(stack.clip, bounds) : bounds; } return stack; } function getBackgroundBounds(borders, bounds, clip) { var backgroundBounds = { left: bounds.left + borders[3].width, top: bounds.top + borders[0].width, width: bounds.width - (borders[1].width + borders[3].width), height: bounds.height - (borders[0].width + borders[2].width) }; if (clip) { backgroundBounds = clipBounds(backgroundBounds, clip); } return backgroundBounds; } function getBounds(element, transform) { var bounds = (transform.matrix) ? Util.OffsetBounds(element) : Util.Bounds(element); transform.origin[0] += bounds.left; transform.origin[1] += bounds.top; return bounds; } function renderElement(element, parentStack, pseudoElement, ignoreBackground) { var transform = getTransform(element, parentStack), bounds = getBounds(element, transform), image, stack = createStack(element, parentStack, bounds, transform), borders = stack.borders, ctx = stack.ctx, backgroundBounds = getBackgroundBounds(borders, bounds, stack.clip), borderData = parseBorders(element, bounds, borders), backgroundColor = (ignoreElementsRegExp.test(element.nodeName)) ? "#efefef" : getCSS(element, "backgroundColor"); createShape(ctx, borderData.clip); ctx.save(); ctx.clip(); if (backgroundBounds.height > 0 && backgroundBounds.width > 0 && !ignoreBackground) { renderBackgroundColor(ctx, bounds, backgroundColor); renderBackgroundImage(element, backgroundBounds, ctx); } else if (ignoreBackground) { stack.backgroundColor = backgroundColor; } ctx.restore(); borderData.borders.forEach(function(border) { renderBorders(ctx, border.args, border.color); }); if (!pseudoElement) { injectPseudoElements(element, stack); } switch(element.nodeName){ case "IMG": if ((image = loadImage(element.getAttribute('src')))) { renderImage(ctx, element, image, bounds, borders); } else { Util.log("html2canvas: Error loading <img>:" + element.getAttribute('src')); } break; case "INPUT": // TODO add all relevant type's, i.e. HTML5 new stuff // todo add support for placeholder attribute for browsers which support it if (/^(text|url|email|submit|button|reset)$/.test(element.type) && (element.value || element.placeholder || "").length > 0){ renderFormValue(element, bounds, stack); } break; case "TEXTAREA": if ((element.value || element.placeholder || "").length > 0){ renderFormValue(element, bounds, stack); } break; case "SELECT": if ((element.options||element.placeholder || "").length > 0){ renderFormValue(element, bounds, stack); } break; case "LI": renderListItem(element, stack, backgroundBounds); break; case "CANVAS": renderImage(ctx, element, element, bounds, borders); break; } return stack; } function isElementVisible(element) { return (getCSS(element, 'display') !== "none" && getCSS(element, 'visibility') !== "hidden" && !element.hasAttribute("data-html2canvas-ignore")); } function parseElement (element, stack, pseudoElement) { if (isElementVisible(element)) { stack = renderElement(element, stack, pseudoElement, false) || stack; if (!ignoreElementsRegExp.test(element.nodeName)) { parseChildren(element, stack, pseudoElement); } } } function parseChildren(element, stack, pseudoElement) { Util.Children(element).forEach(function(node) { if (node.nodeType === node.ELEMENT_NODE) { parseElement(node, stack, pseudoElement); } else if (node.nodeType === node.TEXT_NODE) { renderText(element, node, stack); } }); } function init() { var background = getCSS(document.documentElement, "backgroundColor"), transparentBackground = (Util.isTransparent(background) && element === document.body), stack = renderElement(element, null, false, transparentBackground); parseChildren(element, stack); if (transparentBackground) { background = stack.backgroundColor; } body.removeChild(hidePseudoElements); return { backgroundColor: background, stack: stack }; } return init(); }; function h2czContext(zindex) { return { zindex: zindex, children: [] }; } _html2canvas.Preload = function( options ) { var images = { numLoaded: 0, // also failed are counted here numFailed: 0, numTotal: 0, cleanupDone: false }, pageOrigin, Util = _html2canvas.Util, methods, i, count = 0, element = options.elements[0] || document.body, doc = element.ownerDocument, domImages = element.getElementsByTagName('img'), // Fetch images of the present element only imgLen = domImages.length, link = doc.createElement("a"), supportCORS = (function( img ){ return (img.crossOrigin !== undefined); })(new Image()), timeoutTimer; link.href = window.location.href; pageOrigin = link.protocol + link.host; function isSameOrigin(url){ link.href = url; link.href = link.href; // YES, BELIEVE IT OR NOT, that is required for IE9 - http://jsfiddle.net/niklasvh/2e48b/ var origin = link.protocol + link.host; return (origin === pageOrigin); } function start(){ Util.log("html2canvas: start: images: " + images.numLoaded + " / " + images.numTotal + " (failed: " + images.numFailed + ")"); if (!images.firstRun && images.numLoaded >= images.numTotal){ Util.log("Finished loading images: # " + images.numTotal + " (failed: " + images.numFailed + ")"); if (typeof options.complete === "function"){ options.complete(images); } } } // TODO modify proxy to serve images with CORS enabled, where available function proxyGetImage(url, img, imageObj){ var callback_name, scriptUrl = options.proxy, script; link.href = url; url = link.href; // work around for pages with base href="" set - WARNING: this may change the url callback_name = 'html2canvas_' + (count++); imageObj.callbackname = callback_name; if (scriptUrl.indexOf("?") > -1) { scriptUrl += "&"; } else { scriptUrl += "?"; } scriptUrl += 'url=' + encodeURIComponent(url) + '&callback=' + callback_name; script = doc.createElement("script"); window[callback_name] = function(a){ if (a.substring(0,6) === "error:"){ imageObj.succeeded = false; images.numLoaded++; images.numFailed++; start(); } else { setImageLoadHandlers(img, imageObj); img.src = a; } window[callback_name] = undefined; // to work with IE<9 // NOTE: that the undefined callback property-name still exists on the window object (for IE<9) try { delete window[callback_name]; // for all browser that support this } catch(ex) {} script.parentNode.removeChild(script); script = null; delete imageObj.script; delete imageObj.callbackname; }; script.setAttribute("type", "text/javascript"); script.setAttribute("src", scriptUrl); imageObj.script = script; window.document.body.appendChild(script); } function loadPseudoElement(element, type) { var style = window.getComputedStyle(element, type), content = style.content; if (content.substr(0, 3) === 'url') { methods.loadImage(_html2canvas.Util.parseBackgroundImage(content)[0].args[0]); } loadBackgroundImages(style.backgroundImage, element); } function loadPseudoElementImages(element) { loadPseudoElement(element, ":before"); loadPseudoElement(element, ":after"); } function loadGradientImage(backgroundImage, bounds) { var img = _html2canvas.Generate.Gradient(backgroundImage, bounds); if (img !== undefined){ images[backgroundImage] = { img: img, succeeded: true }; images.numTotal++; images.numLoaded++; start(); } } function invalidBackgrounds(background_image) { return (background_image && background_image.method && background_image.args && background_image.args.length > 0 ); } function loadBackgroundImages(background_image, el) { var bounds; _html2canvas.Util.parseBackgroundImage(background_image).filter(invalidBackgrounds).forEach(function(background_image) { if (background_image.method === 'url') { methods.loadImage(background_image.args[0]); } else if(background_image.method.match(/\-?gradient$/)) { if(bounds === undefined) { bounds = _html2canvas.Util.Bounds(el); } loadGradientImage(background_image.value, bounds); } }); } function getImages (el) { var elNodeType = false; // Firefox fails with permission denied on pages with iframes try { Util.Children(el).forEach(getImages); } catch( e ) {} try { elNodeType = el.nodeType; } catch (ex) { elNodeType = false; Util.log("html2canvas: failed to access some element's nodeType - Exception: " + ex.message); } if (elNodeType === 1 || elNodeType === undefined) { loadPseudoElementImages(el); try { loadBackgroundImages(Util.getCSS(el, 'backgroundImage'), el); } catch(e) { Util.log("html2canvas: failed to get background-image - Exception: " + e.message); } loadBackgroundImages(el); } } function setImageLoadHandlers(img, imageObj) { img.onload = function() { if ( imageObj.timer !== undefined ) { // CORS succeeded window.clearTimeout( imageObj.timer ); } images.numLoaded++; imageObj.succeeded = true; img.onerror = img.onload = null; start(); }; img.onerror = function() { if (img.crossOrigin === "anonymous") { // CORS failed window.clearTimeout( imageObj.timer ); // let's try with proxy instead if ( options.proxy ) { var src = img.src; img = new Image(); imageObj.img = img; img.src = src; proxyGetImage( img.src, img, imageObj ); return; } } images.numLoaded++; images.numFailed++; imageObj.succeeded = false; img.onerror = img.onload = null; start(); }; } methods = { loadImage: function( src ) { var img, imageObj; if ( src && images[src] === undefined ) { img = new Image(); if ( src.match(/data:image\/.*;base64,/i) ) { img.src = src.replace(/url\(['"]{0,}|['"]{0,}\)$/ig, ''); imageObj = images[src] = { img: img }; images.numTotal++; setImageLoadHandlers(img, imageObj); } else if ( isSameOrigin( src ) || options.allowTaint === true ) { imageObj = images[src] = { img: img }; images.numTotal++; setImageLoadHandlers(img, imageObj); img.src = src; } else if ( supportCORS && !options.allowTaint && options.useCORS ) { // attempt to load with CORS img.crossOrigin = "anonymous"; imageObj = images[src] = { img: img }; images.numTotal++; setImageLoadHandlers(img, imageObj); img.src = src; } else if ( options.proxy ) { imageObj = images[src] = { img: img }; images.numTotal++; proxyGetImage( src, img, imageObj ); } } }, cleanupDOM: function(cause) { var img, src; if (!images.cleanupDone) { if (cause && typeof cause === "string") { Util.log("html2canvas: Cleanup because: " + cause); } else { Util.log("html2canvas: Cleanup after timeout: " + options.timeout + " ms."); } for (src in images) { if (images.hasOwnProperty(src)) { img = images[src]; if (typeof img === "object" && img.callbackname && img.succeeded === undefined) { // cancel proxy image request window[img.callbackname] = undefined; // to work with IE<9 // NOTE: that the undefined callback property-name still exists on the window object (for IE<9) try { delete window[img.callbackname]; // for all browser that support this } catch(ex) {} if (img.script && img.script.parentNode) { img.script.setAttribute("src", "about:blank"); // try to cancel running request img.script.parentNode.removeChild(img.script); } images.numLoaded++; images.numFailed++; Util.log("html2canvas: Cleaned up failed img: '" + src + "' Steps: " + images.numLoaded + " / " + images.numTotal); } } } // cancel any pending requests if(window.stop !== undefined) { window.stop(); } else if(document.execCommand !== undefined) { document.execCommand("Stop", false); } if (document.close !== undefined) { document.close(); } images.cleanupDone = true; if (!(cause && typeof cause === "string")) { start(); } } }, renderingDone: function() { if (timeoutTimer) { window.clearTimeout(timeoutTimer); } } }; if (options.timeout > 0) { timeoutTimer = window.setTimeout(methods.cleanupDOM, options.timeout); } Util.log('html2canvas: Preload starts: finding background-images'); images.firstRun = true; getImages(element); Util.log('html2canvas: Preload: Finding images'); // load <img> images for (i = 0; i < imgLen; i+=1){ methods.loadImage( domImages[i].getAttribute( "src" ) ); } images.firstRun = false; Util.log('html2canvas: Preload: Done.'); if (images.numTotal === images.numLoaded) { start(); } return methods; }; _html2canvas.Renderer = function(parseQueue, options){ // http://www.w3.org/TR/CSS21/zindex.html function createRenderQueue(parseQueue) { var queue = [], rootContext; rootContext = (function buildStackingContext(rootNode) { var rootContext = {}; function insert(context, node, specialParent) { var zi = (node.zIndex.zindex === 'auto') ? 0 : Number(node.zIndex.zindex), contextForChildren = context, // the stacking context for children isPositioned = node.zIndex.isPositioned, isFloated = node.zIndex.isFloated, stub = {node: node}, childrenDest = specialParent; // where children without z-index should be pushed into if (node.zIndex.ownStacking) { // '!' comes before numbers in sorted array contextForChildren = stub.context = { '!': [{node:node, children: []}]}; childrenDest = undefined; } else if (isPositioned || isFloated) { childrenDest = stub.children = []; } if (zi === 0 && specialParent) { specialParent.push(stub); } else { if (!context[zi]) { context[zi] = []; } context[zi].push(stub); } node.zIndex.children.forEach(function(childNode) { insert(contextForChildren, childNode, childrenDest); }); } insert(rootContext, rootNode); return rootContext; })(parseQueue); function sortZ(context) { Object.keys(context).sort().forEach(function(zi) { var nonPositioned = [], floated = [], positioned = [], list = []; // positioned after static context[zi].forEach(function(v) { if (v.node.zIndex.isPositioned || v.node.zIndex.opacity < 1) { // http://www.w3.org/TR/css3-color/#transparency // non-positioned element with opactiy < 1 should be stacked as if it were a positioned element with ‘z-index: 0’ and ‘opacity: 1’. positioned.push(v); } else if (v.node.zIndex.isFloated) { floated.push(v); } else { nonPositioned.push(v); } }); (function walk(arr) { arr.forEach(function(v) { list.push(v); if (v.children) { walk(v.children); } }); })(nonPositioned.concat(floated, positioned)); list.forEach(function(v) { if (v.context) { sortZ(v.context); } else { queue.push(v.node); } }); }); } sortZ(rootContext); return queue; } function getRenderer(rendererName) { var renderer; if (typeof options.renderer === "string" && _html2canvas.Renderer[rendererName] !== undefined) { renderer = _html2canvas.Renderer[rendererName](options); } else if (typeof rendererName === "function") { renderer = rendererName(options); } else { throw new Error("Unknown renderer"); } if ( typeof renderer !== "function" ) { throw new Error("Invalid renderer defined"); } return renderer; } return getRenderer(options.renderer)(parseQueue, options, document, createRenderQueue(parseQueue.stack), _html2canvas); }; _html2canvas.Util.Support = function (options, doc) { function supportSVGRendering() { var img = new Image(), canvas = doc.createElement("canvas"), ctx = (canvas.getContext === undefined) ? false : canvas.getContext("2d"); if (ctx === false) { return false; } canvas.width = canvas.height = 10; img.src = [ "data:image/svg+xml,", "<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'>", "<foreignObject width='10' height='10'>", "<div xmlns='http://www.w3.org/1999/xhtml' style='width:10;height:10;'>", "sup", "</div>", "</foreignObject>", "</svg>" ].join(""); try { ctx.drawImage(img, 0, 0); canvas.toDataURL(); } catch(e) { return false; } _html2canvas.Util.log('html2canvas: Parse: SVG powered rendering available'); return true; } // Test whether we can use ranges to measure bounding boxes // Opera doesn't provide valid bounds.height/bottom even though it supports the method. function supportRangeBounds() { var r, testElement, rangeBounds, rangeHeight, support = false; if (doc.createRange) { r = doc.createRange(); if (r.getBoundingClientRect) { testElement = doc.createElement('boundtest'); testElement.style.height = "123px"; testElement.style.display = "block"; doc.body.appendChild(testElement); r.selectNode(testElement); rangeBounds = r.getBoundingClientRect(); rangeHeight = rangeBounds.height; if (rangeHeight === 123) { support = true; } doc.body.removeChild(testElement); } } return support; } return { rangeBounds: supportRangeBounds(), svgRendering: options.svgRendering && supportSVGRendering() }; }; window.html2canvas = function(elements, opts) { elements = (elements.length) ? elements : [elements]; var queue, canvas, options = { // general logging: false, elements: elements, background: "#fff", // preload options proxy: null, timeout: 0, // no timeout useCORS: false, // try to load images as CORS (where available), before falling back to proxy allowTaint: false, // whether to allow images to taint the canvas, won't need proxy if set to true // parse options svgRendering: false, // use svg powered rendering where available (FF11+) ignoreElements: "IFRAME|OBJECT|PARAM", useOverflow: true, letterRendering: false, chinese: false, // render options width: null, height: null, taintTest: true, // do a taint test with all images before applying to canvas renderer: "Canvas" }; options = _html2canvas.Util.Extend(opts, options); _html2canvas.logging = options.logging; options.complete = function( images ) { if (typeof options.onpreloaded === "function") { if ( options.onpreloaded( images ) === false ) { return; } } queue = _html2canvas.Parse( images, options ); if (typeof options.onparsed === "function") { if ( options.onparsed( queue ) === false ) { return; } } canvas = _html2canvas.Renderer( queue, options ); if (typeof options.onrendered === "function") { options.onrendered( canvas ); } }; // for pages without images, we still want this to be async, i.e. return methods before executing window.setTimeout( function(){ _html2canvas.Preload( options ); }, 0 ); return { render: function( queue, opts ) { return _html2canvas.Renderer( queue, _html2canvas.Util.Extend(opts, options) ); }, parse: function( images, opts ) { return _html2canvas.Parse( images, _html2canvas.Util.Extend(opts, options) ); }, preload: function( opts ) { return _html2canvas.Preload( _html2canvas.Util.Extend(opts, options) ); }, log: _html2canvas.Util.log }; }; window.html2canvas.log = _html2canvas.Util.log; // for renderers window.html2canvas.Renderer = { Canvas: undefined // We are assuming this will be used }; _html2canvas.Renderer.Canvas = function(options) { options = options || {}; var doc = document, safeImages = [], testCanvas = document.createElement("canvas"), testctx = testCanvas.getContext("2d"), Util = _html2canvas.Util, canvas = options.canvas || doc.createElement('canvas'); function createShape(ctx, args) { ctx.beginPath(); args.forEach(function(arg) { ctx[arg.name].apply(ctx, arg['arguments']); }); ctx.closePath(); } function safeImage(item) { if (safeImages.indexOf(item['arguments'][0].src ) === -1) { testctx.drawImage(item['arguments'][0], 0, 0); try { testctx.getImageData(0, 0, 1, 1); } catch(e) { testCanvas = doc.createElement("canvas"); testctx = testCanvas.getContext("2d"); return false; } safeImages.push(item['arguments'][0].src); } return true; } function renderItem(ctx, item) { switch(item.type){ case "variable": ctx[item.name] = item['arguments']; break; case "function": switch(item.name) { case "createPattern": if (item['arguments'][0].width > 0 && item['arguments'][0].height > 0) { try { ctx.fillStyle = ctx.createPattern(item['arguments'][0], "repeat"); } catch(e) { Util.log("html2canvas: Renderer: Error creating pattern", e.message); } } break; case "drawShape": createShape(ctx, item['arguments']); break; case "drawImage": if (item['arguments'][8] > 0 && item['arguments'][7] > 0) { if (!options.taintTest || (options.taintTest && safeImage(item))) { ctx.drawImage.apply( ctx, item['arguments'] ); } } break; default: ctx[item.name].apply(ctx, item['arguments']); } break; } } return function(parsedData, options, document, queue, _html2canvas) { var ctx = canvas.getContext("2d"), newCanvas, bounds, fstyle, zStack = parsedData.stack; canvas.width = canvas.style.width = options.width || zStack.ctx.width; canvas.height = canvas.style.height = options.height || zStack.ctx.height; fstyle = ctx.fillStyle; ctx.fillStyle = (Util.isTransparent(zStack.backgroundColor) && options.background !== undefined) ? options.background : parsedData.backgroundColor; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.fillStyle = fstyle; queue.forEach(function(storageContext) { // set common settings for canvas ctx.textBaseline = "bottom"; ctx.save(); if (storageContext.transform.matrix) { ctx.translate(storageContext.transform.origin[0], storageContext.transform.origin[1]); ctx.transform.apply(ctx, storageContext.transform.matrix); ctx.translate(-storageContext.transform.origin[0], -storageContext.transform.origin[1]); } if (storageContext.clip){ ctx.beginPath(); ctx.rect(storageContext.clip.left, storageContext.clip.top, storageContext.clip.width, storageContext.clip.height); ctx.clip(); } if (storageContext.ctx.storage) { storageContext.ctx.storage.forEach(function(item) { renderItem(ctx, item); }); } ctx.restore(); }); Util.log("html2canvas: Renderer: Canvas renderer done - returning canvas obj"); if (options.elements.length === 1) { if (typeof options.elements[0] === "object" && options.elements[0].nodeName !== "BODY") { // crop image to the bounds of selected (single) element bounds = _html2canvas.Util.Bounds(options.elements[0]); newCanvas = document.createElement('canvas'); newCanvas.width = Math.ceil(bounds.width); newCanvas.height = Math.ceil(bounds.height); ctx = newCanvas.getContext("2d"); ctx.drawImage(canvas, bounds.left, bounds.top, bounds.width, bounds.height, 0, 0, bounds.width, bounds.height); canvas = null; return newCanvas; } } return canvas; }; };})(window,document);阅读全文
0 0
- html5 实现网页截屏 页面生成图片(源代码)
- html5 实现网页截屏 页面生成图片(源代码)
- html5 实现网页截屏 页面生成图片(图文)
- html5 实现网页截屏 页面生成图片(图文)
- html5 实现网页截屏 页面生成图片(图文)
- html5 实现网页截屏 页面生成图片(图文)
- html5 实现网页截屏 页面生成图片(图文)
- html5 实现网页截屏 页面生成图片(图文)
- html5 实现网页截屏 页面生成图片
- html5 实现动态网页截屏 页面生成图片并打印(图文)
- 网页生成图片代码 IViewObject接口实现
- WEB抓网页形成图片及前台展现实现源代码
- html5实现图片自适应手机屏幕页面的css
- 网页设计~登陆页面源代码
- HTML5网页页面坐标获取
- html5的FileReader实现图片上传预览并生成base64
- html5实现网页全屏
- asp.net 实现输入网址生成当前网页的图片
- 机器学习系统设计之垃圾邮箱(斯坦福machine learning week 6)
- 使用chrome查看真机SharedPreferences文件
- 从0到将突破5000亿美金，阿里18年组织是如何进化的？
- 理解MySQL——索引与优化
- PAT
- html5 实现网页截屏 页面生成图片(源代码)
- Unity PlayMaker插件
- Android开发实例详解之IMF(输入法)（Android SDK Sample—SoftKeyboard）
- sql,hql等join条件字段为null时，易出现错误以及解决办法
- mysql 行级锁的使用
- Java读取文本文件中文乱码问题
- 微信小程序三级联动（数据在我的资源里）
- css+div水平垂直居中布局总结（3种方案）
- 一些常用的小玩意之redis
