diff --git a/Gruntfile.js b/Gruntfile.js index d8f3107..a402a0d 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -50,10 +50,10 @@ module.exports = function(grunt) { }, watch: { files: 'src/**/*', - tasks: ['build', 'jshint'] + tasks: ['jshint', 'build'] }, jshint: { - all: ['<%= concat.dist.dest %>'], + all: ['src/**/*.js', '!src/promise.js'], options: grunt.file.readJSON('./.jshintrc') } }); @@ -80,7 +80,7 @@ module.exports = function(grunt) { // 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']); + grunt.registerTask('default', ['jshint', 'concat', 'qunit', 'uglify']); + grunt.registerTask('travis', ['jshint', 'concat','qunit', 'uglify', 'webdriver']); }; diff --git a/build/html2canvas.js b/build/html2canvas.js index 7ad1759..01078b1 100644 --- a/build/html2canvas.js +++ b/build/html2canvas.js @@ -25,7 +25,7 @@ window.html2canvas = function(nodeList, options) { var renderer = new CanvasRenderer(documentWidth(), documentHeight(), imageLoader); var parser = new NodeParser(node, renderer, support, imageLoader, options); - window.console.log(parser); + window.console.log(parser); }); }; @@ -77,6 +77,7 @@ function createWindowClone(ownerDocument, width, height) { documentClone.close(); documentClone.replaceChild(documentClone.adoptNode(documentElement), documentClone.documentElement); + container.contentWindow.scrollTo(window.scrollX, window.scrollY); var div = documentClone.createElement("div"); div.className = "html2canvas-ready-test"; documentClone.body.appendChild(div); @@ -259,10 +260,14 @@ NodeParser.prototype.parse = function(stack) { }; NodeParser.prototype.paint = function(container) { - if (isTextNode(container)) { - this.paintText(container); - } else { - this.paintNode(container); + try { + if (isTextNode(container)) { + this.paintText(container); + } else { + this.paintNode(container); + } + } catch(e) { + log(e); } }; @@ -277,6 +282,17 @@ NodeParser.prototype.paintNode = function(container) { this.renderer.renderBackground(container, bounds); }, this); this.renderer.renderBorders(borderData.borders); + + switch(container.node.nodeName) { + case "IMG": + var imageContainer = this.images.get(container.node.src); + if (imageContainer) { + this.renderer.renderImage(container, bounds, borderData, imageContainer.image); + } else { + log("Error loading ", container.node.src); + } + break; + } }; NodeParser.prototype.paintText = function(container) { @@ -613,10 +629,23 @@ function ImageLoader(options, support) { this.origin = window.location.protocol + window.location.host; } -ImageLoader.prototype.findImages = function(images, container) { - var backgrounds = container.parseBackgroundImages(); - var backgroundImages = backgrounds.filter(this.isImageBackground).map(this.getBackgroundUrl).filter(this.imageExists(images)).map(this.loadImage, this); - return images.concat(backgroundImages); +ImageLoader.prototype.findImages = function(nodes) { + var images = []; + nodes.filter(isImage).map(src).forEach(this.addImage(images, this.loadImage), this); + return images; +}; + +ImageLoader.prototype.findBackgroundImage = function(images, container) { + container.parseBackgroundImages().filter(this.isImageBackground).map(this.getBackgroundUrl).forEach(this.addImage(images, this.loadImage), this); + return images; +}; + +ImageLoader.prototype.addImage = function(images, callback) { + return function(newImage) { + if (!this.imageExists(images, newImage)) { + images.splice(0, 0, callback.apply(this, arguments)); + } + }; }; ImageLoader.prototype.getBackgroundUrl = function(imageData) { @@ -641,12 +670,10 @@ ImageLoader.prototype.loadImage = function(src) { } }; -ImageLoader.prototype.imageExists = function(images) { - return function(newImage) { - return !images.some(function(image) { - return image.src !== newImage.src; - }); - }; +ImageLoader.prototype.imageExists = function(images, src) { + return images.some(function(image) { + return image.src === src; + }); }; ImageLoader.prototype.isSameOrigin = function(url) { @@ -669,11 +696,19 @@ ImageLoader.prototype.get = function(src) { }; ImageLoader.prototype.fetch = function(nodes) { - this.images = nodes.reduce(bind(this.findImages, this), []); + this.images = nodes.reduce(bind(this.findBackgroundImage, this), this.findImages(nodes)); this.ready = Promise.all(this.images.map(this.getPromise)); return this; }; +function isImage(container) { + return container.node.nodeName === "IMG"; +} + +function src(container) { + return container.node.src; +} + function log() { if (window.html2canvas.logging && window.console && window.console.log) { window.console.log.apply(window.console, [(Date.now() - window.html2canvas.start) + "ms", "html2canvas:"].concat([].slice.call(arguments, 0))); @@ -931,6 +966,26 @@ function Renderer(width, height, images) { this.images = images; } +Renderer.prototype.renderImage = function(container, bounds, borderData, image) { + var paddingLeft = container.cssInt('paddingLeft'), + paddingTop = container.cssInt('paddingTop'), + paddingRight = container.cssInt('paddingRight'), + paddingBottom = container.cssInt('paddingBottom'), + borders = borderData.borders; + + this.drawImage( + image, + 0, + 0, + image.width, + image.height, + bounds.left + paddingLeft + borders[3].width, + bounds.top + paddingTop + borders[0].width, + bounds.width - (borders[1].width + borders[3].width + paddingLeft + paddingRight), + bounds.height - (borders[0].width + borders[2].width + paddingTop + paddingBottom) + ); +}; + Renderer.prototype.renderBackground = function(container, bounds) { if (bounds.height > 0 && bounds.width > 0) { this.renderBackgroundColor(container, bounds); @@ -965,7 +1020,7 @@ Renderer.prototype.renderBackgroundImage = function(container, bounds) { } else { log("Error loading background-image", backgroundImage.args[0]); } - } + } }, this); }; @@ -1021,6 +1076,10 @@ CanvasRenderer.prototype.drawShape = function(shape, color) { this.setFillStyle(color).fill(); }; +CanvasRenderer.prototype.drawImage = function(image, sx, sy, sw, sh, dx, dy, dw, dh) { + this.ctx.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh); +}; + CanvasRenderer.prototype.clip = function(shape, callback, context) { this.ctx.save(); this.shape(shape).clip(); @@ -1057,7 +1116,7 @@ CanvasRenderer.prototype.backgroundRepeatShape = function(imageContainer, backgr ["line", Math.round(left), Math.round(height + top)] ]; this.clip(shape, function() { - this.renderBackgroundRepeat(imageContainer, backgroundPosition, bounds); + this.renderBackgroundRepeat(imageContainer, backgroundPosition, size, bounds); }, this); }; diff --git a/build/html2canvas.min.js b/build/html2canvas.min.js index d7fdeb1..c81a7d6 100644 --- a/build/html2canvas.min.js +++ b/build/html2canvas.min.js @@ -4,4 +4,4 @@ Released under MIT License */ -(function(t,e,n){function r(){return Math.max(Math.max(e.body.scrollWidth,e.documentElement.scrollWidth),Math.max(e.body.offsetWidth,e.documentElement.offsetWidth),Math.max(e.body.clientWidth,e.documentElement.clientWidth))}function o(){return Math.max(Math.max(e.body.scrollHeight,e.documentElement.scrollHeight),Math.max(e.body.offsetHeight,e.documentElement.offsetHeight),Math.max(e.body.clientHeight,e.documentElement.clientHeight))}function i(e,n,r){var o=e.documentElement.cloneNode(!0),i=e.createElement("iframe");return i.style.display="hidden",i.style.position="absolute",i.style.width=n+"px",i.style.height=r+"px",e.body.appendChild(i),new Promise(function(e){var n=function(){"none"!==i.contentWindow.getComputedStyle(s,null).backgroundImage?(r.body.removeChild(s),r.body.removeChild(a),e(i)):t.setTimeout(n,10)},r=i.contentWindow.document;r.open(),r.write(""),r.close(),r.replaceChild(r.adoptNode(o),r.documentElement);var s=r.createElement("div");s.className="html2canvas-ready-test",r.body.appendChild(s);var a=r.createElement("style");a.innerHTML="body div.html2canvas-ready-test { background-image:url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7); }",r.body.appendChild(a),n()})}function s(t,e,n,r,o){this.renderer=e,this.options=o,this.range=null,this.support=n,this.stack=new W(!0,1,t.ownerDocument,null);var i=new P(t,null);i.visibile=i.isElementVisible(),this.nodes=[i].concat(this.getChildren(i)).filter(function(t){return t.visible=t.isElementVisible()}),this.images=r.fetch(this.nodes.filter(C)),this.createStackingContexts(),this.sortStackingContexts(this.stack),this.images.ready.then(N(function(){_("Images loaded, starting parsing"),this.parse(this.stack),o.onrendered(e.canvas)},this))}function a(t){return 0>t.cssInt("zIndex")}function c(t){return t.cssInt("zIndex")>0}function u(t){return 0===t.cssInt("zIndex")}function h(t){return-1!==["inline","inline-block","inline-table"].indexOf(t.css("display"))}function p(t){return t instanceof W}function l(t){return t.node.data.trim().length>0}function d(t){return/^(normal|none|0px)$/.test(t.parent.css("letterSpacing"))}function f(t,e,n,r,o,i,s){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",i,s]),(n[0]>0||n[1]>0)&&t.push(["line",o[0].start.x,o[0].start.y])}function g(t){return["TopLeft","TopRight","BottomRight","BottomLeft"].map(function(e){var n=t.css("border"+e+"Radius"),r=n.split(" ");return 1>=r.length&&(r[1]=r[0]),r.map(m)})}function m(t){return parseInt(t,10)}function y(t,e,n,r){var o=4*((Math.sqrt(2)-1)/3),i=n*o,s=r*o,a=t+n,c=e+r;return{topLeft:v({x:t,y:c},{x:t,y:c-s},{x:a-i,y:e},{x:a,y:e}),topRight:v({x:t,y:e},{x:t+i,y:e},{x:a,y:c-s},{x:a,y:c}),bottomRight:v({x:a,y:e},{x:a,y:e+s},{x:t+i,y:c},{x:t,y:c}),bottomLeft:v({x:a,y:c},{x:a-i,y:c},{x:t,y:e+s},{x:t,y:e})}}function b(t,e,n){var r=t.left,o=t.top,i=t.width,s=t.height,a=e[0][0],c=e[0][1],u=e[1][0],h=e[1][1],p=e[2][0],l=e[2][1],d=e[3][0],f=e[3][1],g=i-u,m=s-l,b=i-p,v=s-f;return{topLeftOuter:y(r,o,a,c).topLeft.subdivide(.5),topLeftInner:y(r+n[3].width,o+n[0].width,Math.max(0,a-n[3].width),Math.max(0,c-n[0].width)).topLeft.subdivide(.5),topRightOuter:y(r+g,o,u,h).topRight.subdivide(.5),topRightInner:y(r+Math.min(g,i+n[3].width),o+n[0].width,g>i+n[3].width?0:u-n[3].width,h-n[0].width).topRight.subdivide(.5),bottomRightOuter:y(r+b,o+m,p,l).bottomRight.subdivide(.5),bottomRightInner:y(r+Math.min(b,i+n[3].width),o+Math.min(m,s+n[0].width),Math.max(0,p-n[1].width),Math.max(0,l-n[2].width)).bottomRight.subdivide(.5),bottomLeftOuter:y(r,o+v,d,f).bottomLeft.subdivide(.5),bottomLeftInner:y(r+n[3].width,o+v,Math.max(0,d-n[3].width),Math.max(0,f-n[2].width)).bottomLeft.subdivide(.5)}}function v(t,e,n,r){var o=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(i){var s=o(t,e,i),a=o(e,n,i),c=o(n,r,i),u=o(s,a,i),h=o(a,c,i),p=o(u,h,i);return[v(t,s,u,p),v(p,h,c,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 w(t,e,n,r,o,i,s){var a=[];return e[0]>0||e[1]>0?(a.push(["line",r[1].start.x,r[1].start.y]),r[1].curveTo(a)):a.push(["line",t.c1[0],t.c1[1]]),n[0]>0||n[1]>0?(a.push(["line",i[0].start.x,i[0].start.y]),i[0].curveTo(a),a.push(["line",s[0].end.x,s[0].end.y]),s[0].curveToReversed(a)):(a.push(["line",t.c2[0],t.c2[1]]),a.push(["line",t.c3[0],t.c3[1]])),e[0]>0||e[1]>0?(a.push(["line",o[1].end.x,o[1].end.y]),o[1].curveToReversed(a)):a.push(["line",t.c4[0],t.c4[1]]),a}function x(t){return t.node.nodeType!==Node.ELEMENT_NODE||-1===["SCRIPT","HEAD","TITLE","OBJECT","BR"].indexOf(t.node.nodeName)}function k(t){return[].concat.apply([],t)}function E(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 I(t){return"static"!==t.css("position")}function T(t){return"none"!==t.css("float")}function B(t){var e=this;return function(){return!t.apply(e,arguments)}}function C(t){return t.node.nodeType===Node.ELEMENT_NODE}function O(t){return t.node.nodeType===Node.TEXT_NODE}function S(t,e){return t.cssInt("zIndex")-e.cssInt("zIndex")}function L(t){return 1>t.css("opacity")}function N(t,e){return function(){return t.apply(e,arguments)}}function A(t,e){this.src=t,this.image=new Image;var n=this.image;this.promise=new Promise(function(r,o){n.onload=r,n.onerror=o,e&&(n.crossOrigin="anonymous"),n.src=t})}function M(e,n){this.link=null,this.options=e,this.support=n,this.origin=t.location.protocol+t.location.host}function _(){t.html2canvas.logging&&t.console&&t.console.log&&t.console.log.apply(t.console,[Date.now()-t.html2canvas.start+"ms","html2canvas:"].concat([].slice.call(arguments,0)))}function P(t,e){this.node=t,this.parent=e,this.stack=null,this.bounds=null,this.visible=null,this.computedStyles=null,this.styles={},this.backgroundImages=null}function D(t){return-1!==(""+t).indexOf("%")}function j(t,e,n){this.width=t,this.height=e,this.images=n}function F(t,n){j.apply(this,arguments),this.canvas=e.createElement("canvas"),this.canvas.width=t,this.canvas.height=n,this.ctx=this.canvas.getContext("2d"),this.ctx.textBaseline="bottom"}function W(t,e,n,r){P.call(this,n,r),this.ownStacking=t,this.contexts=[],this.children=[],this.opacity=(this.parent?this.parent.stack.opacity:1)*e}function z(){this.rangeBounds=this.testRangeBounds(),this.cors=this.testCORS()}function H(t,e){P.call(this,t,e)}function V(t,e,r){return t.length>0?e+r.toUpperCase():n}t.html2canvas=function(a,c){c=c||{},c.logging&&(t.html2canvas.logging=!0,t.html2canvas.start=Date.now()),i(e,t.innerWidth,t.innerHeight).then(function(i){_("Document cloned");var u=i.contentWindow;a===n?e.body:a[0];var h=u.document.documentElement,p=new z,l=new M(c,p),d=new F(r(),o(),l),f=new s(h,d,p,l,c);t.console.log(f)})},s.prototype.getChildren=function(t){return k([].filter.call(t.node.childNodes,E).map(function(e){var n=[e.nodeType===Node.TEXT_NODE?new H(e,t):new P(e,t)].filter(x);return e.nodeType===Node.ELEMENT_NODE&&n.length?n[0].isElementVisible()?n.concat(this.getChildren(n[0])):[]:n},this))},s.prototype.newStackingContext=function(t,e){var n=new W(e,t.cssFloat("opacity"),t.node,t.parent);n.visible=t.visible;var r=n.getParentStack(this);r.contexts.push(n),t.stack=n},s.prototype.createStackingContexts=function(){this.nodes.forEach(function(t){C(t)&&(this.isRootElement(t)||L(t)||R(t)||this.isBodyWithTransparentRoot(t))?this.newStackingContext(t,!0):C(t)&&I(t)?this.newStackingContext(t,!1):t.assignStack(t.parent.stack)},this)},s.prototype.isBodyWithTransparentRoot=function(t){return"BODY"===t.node.nodeName&&this.renderer.isTransparent(t.parent.css("backgroundColor"))},s.prototype.isRootElement=function(t){return"HTML"===t.node.nodeName},s.prototype.sortStackingContexts=function(t){t.contexts.sort(S),t.contexts.forEach(this.sortStackingContexts,this)},s.prototype.parseBounds=function(t){return t.bounds=this.getBounds(t.node)},s.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{}},s.prototype.parseTextBounds=function(t){return function(e,n,r){if("none"!==t.parent.css("textDecoration")||0!==e.trim().length){var o=r.slice(0,n).join("").length;if(this.support.rangeBounds)return this.getRangeBounds(t.node,o,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}}}},s.prototype.getWrapperBounds=function(t){var e=t.ownerDocument.createElement("wrapper"),n=t.parentNode,r=t.cloneNode(!0);e.appendChild(t.cloneNode(!0)),n.replaceChild(e,t);var o=this.getBounds(e);return n.replaceChild(r,e),o},s.prototype.getRangeBounds=function(t,e,n){var r=this.range||(this.range=t.ownerDocument.createRange());return r.setStart(t,e),r.setEnd(t,e+n),r.getBoundingClientRect()},s.prototype.parse=function(t){var e=t.contexts.filter(a),n=t.children.filter(C),r=n.filter(B(T)),o=r.filter(B(I)).filter(B(h)),i=n.filter(B(I)).filter(T),s=r.filter(B(I)).filter(h),d=t.contexts.concat(r.filter(I)).filter(u),f=t.children.filter(O).filter(l),g=t.contexts.filter(c),m=[];e.concat(o).concat(i).concat(s).concat(d).concat(f).concat(g).forEach(function(t){if(this.paint(t),-1!==m.indexOf(t.node))throw _(t,t.node),Error("rendering twice");m.push(t.node),p(t)&&this.parse(t)},this)},s.prototype.paint=function(t){O(t)?this.paintText(t):this.paintNode(t)},s.prototype.paintNode=function(t){p(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)},s.prototype.paintText=function(t){t.applyTextTransform();var e=t.node.data.split(!this.options.letterRendering||d(t)?/(\b| )/:""),n=t.parent.fontWeight(),r=t.parent.css("fontSize"),o=t.parent.css("fontFamily");this.renderer.font(t.parent.css("color"),t.parent.css("fontStyle"),t.parent.css("fontVariant"),n,r,o),e.map(this.parseTextBounds(t),this).forEach(function(t,n){t&&this.renderer.text(e[n],t.left,t.bottom)},this)},s.prototype.parseBorders=function(t){var e=t.bounds,n=g(t),r=["Top","Right","Bottom","Left"].map(function(e){return{width:t.cssInt("border"+e+"Width"),color:t.css("border"+e+"Color"),args:null}}),o=b(e,n,r);return{clip:this.parseBackgroundClip(t,o,r,n,e),borders:r.map(function(t,i){if(t.width>0){var s=e.left,a=e.top,c=e.width,u=e.height-r[2].width;switch(i){case 0:u=r[0].width,t.args=w({c1:[s,a],c2:[s+c,a],c3:[s+c-r[1].width,a+u],c4:[s+r[3].width,a+u]},n[0],n[1],o.topLeftOuter,o.topLeftInner,o.topRightOuter,o.topRightInner);break;case 1:s=e.left+e.width-r[1].width,c=r[1].width,t.args=w({c1:[s+c,a],c2:[s+c,a+u+r[2].width],c3:[s,a+u],c4:[s,a+r[0].width]},n[1],n[2],o.topRightOuter,o.topRightInner,o.bottomRightOuter,o.bottomRightInner);break;case 2:a=a+e.height-r[2].width,u=r[2].width,t.args=w({c1:[s+c,a+u],c2:[s,a+u],c3:[s+r[3].width,a],c4:[s+c-r[3].width,a]},n[2],n[3],o.bottomRightOuter,o.bottomRightInner,o.bottomLeftOuter,o.bottomLeftInner);break;case 3:c=r[3].width,t.args=w({c1:[s,a+u+r[2].width],c2:[s,a],c3:[s+c,a+r[0].width],c4:[s+c,a+u]},n[3],n[0],o.bottomLeftOuter,o.bottomLeftInner,o.topLeftOuter,o.topLeftInner)}}return t})}},s.prototype.parseBackgroundClip=function(t,e,n,r,o){var i=t.css("backgroundClip"),s=[];switch(i){case"content-box":case"padding-box":f(s,r[0],r[1],e.topLeftInner,e.topRightInner,o.left+n[3].width,o.top+n[0].width),f(s,r[1],r[2],e.topRightInner,e.bottomRightInner,o.left+o.width-n[1].width,o.top+n[0].width),f(s,r[2],r[3],e.bottomRightInner,e.bottomLeftInner,o.left+o.width-n[1].width,o.top+o.height-n[2].width),f(s,r[3],r[0],e.bottomLeftInner,e.topLeftInner,o.left+n[3].width,o.top+o.height-n[2].width);break;default:f(s,r[0],r[1],e.topLeftOuter,e.topRightOuter,o.left,o.top),f(s,r[1],r[2],e.topRightOuter,e.bottomRightOuter,o.left+o.width,o.top),f(s,r[2],r[3],e.bottomRightOuter,e.bottomLeftOuter,o.left+o.width,o.top+o.height),f(s,r[3],r[0],e.bottomLeftOuter,e.topLeftOuter,o.left,o.top+o.height)}return s},M.prototype.findImages=function(t,e){var n=e.parseBackgroundImages(),r=n.filter(this.isImageBackground).map(this.getBackgroundUrl).filter(this.imageExists(t)).map(this.loadImage,this);return t.concat(r)},M.prototype.getBackgroundUrl=function(t){return t.args[0]},M.prototype.isImageBackground=function(t){return"url"===t.method},M.prototype.loadImage=function(t){return t.match(/data:image\/.*;base64,/i)?new A(t.replace(/url\(['"]{0,}|['"]{0,}\)$/gi,""),!1):this.isSameOrigin(t)||this.options.allowTaint===!0?new A(t,!1):this.support.cors&&!this.options.allowTaint&&this.options.useCORS?new A(t,!0):this.options.proxy?new ProxyImageContainer(t):new DummyImageContainer(t)},M.prototype.imageExists=function(t){return function(e){return!t.some(function(t){return t.src!==e.src})}},M.prototype.isSameOrigin=function(t){var n=this.link||(this.link=e.createElement("a"));n.href=t,n.href=n.href;var r=n.protocol+n.host;return r===this.origin},M.prototype.getPromise=function(t){return t.promise},M.prototype.get=function(t){var e=null;return this.images.some(function(n){return(e=n).src===t})?e:null},M.prototype.fetch=function(t){return this.images=t.reduce(N(this.findImages,this),[]),this.ready=Promise.all(this.images.map(this.getPromise)),this},P.prototype.assignStack=function(t){this.stack=t,t.children.push(this)},P.prototype.isElementVisible=function(){return this.node.nodeType===Node.TEXT_NODE?this.parent.visible:"none"!==this.css("display")&&"hidden"!==this.css("visibility")&&!this.node.hasAttribute("data-html2canvas-ignore")},P.prototype.css=function(t){return this.computedStyles||(this.computedStyles=this.node.ownerDocument.defaultView.getComputedStyle(this.node,null)),this.styles[t]||(this.styles[t]=this.computedStyles[t])},P.prototype.cssInt=function(t){var e=parseInt(this.css(t),10);return Number.isNaN(e)?0:e},P.prototype.cssFloat=function(t){var e=parseFloat(this.css(t));return Number.isNaN(e)?0:e},P.prototype.fontWeight=function(){var t=this.css("fontWeight");switch(parseInt(t,10)){case 401:t="bold";break;case 400:t="normal"}return t},P.prototype.parseBackgroundImages=function(){var t,e,r,o,i,s,a,c=" \r\n ",u=[],h=0,p=0,l=function(){t&&('"'===e.substr(0,1)&&(e=e.substr(1,e.length-2)),e&&a.push(e),"-"===t.substr(0,1)&&(o=t.indexOf("-",1)+1)>0&&(r=t.substr(0,o),t=t.substr(o)),u.push({prefix:r,method:t.toLowerCase(),value:i,args:a,image:null})),a=[],t=r=e=i=""};return a=[],t=r=e=i="",this.css("backgroundImage").split("").forEach(function(r){if(!(0===h&&c.indexOf(r)>-1)){switch(r){case'"':s?s===r&&(s=null):s=r;break;case"(":if(s)break;if(0===h)return h=1,i+=r,n;p++;break;case")":if(s)break;if(1===h){if(0===p)return h=0,i+=r,l(),n;p--}break;case",":if(s)break;if(0===h)return l(),n;if(1===h&&0===p&&!t.match(/^url$/i))return a.push(e),e="",i+=r,n}i+=r,0===h?t+=r:e+=r}}),l(),this.backgroundImages||(this.backgroundImages=u)},P.prototype.cssList=function(t,e){var n=(this.css(t)||"").split(",");return n=n[e||0]||n[0]||"auto",n=n.trim().split(" "),1===n.length&&(n=[n[0],n[0]]),n},P.prototype.parseBackgroundSize=function(t,e,n){var r,o,i=this.cssList("backgroundSize",n);if(D(i[0]))r=t.width*parseFloat(i[0])/100;else{if(/contain|cover/.test(i[0])){var s=t.width/t.height,a=e.width/e.height;return a>s^"contain"===i[0]?{width:t.height*a,height:t.height}:{width:t.width,height:t.width/a}}r=parseInt(i[0],10)}return o="auto"===i[0]&&"auto"===i[1]?e.height:"auto"===i[1]?r/e.width*e.height:D(i[1])?t.height*parseFloat(i[1])/100:parseInt(i[1],10),"auto"===i[0]&&(r=o/e.height*e.width),{width:r,height:o}},P.prototype.parseBackgroundPosition=function(t,e,n,r){var o,i,s=this.cssList("backgroundPosition",n);return o=D(s[0])?(t.width-(r||e).width)*(parseFloat(s[0])/100):parseInt(s[0],10),i="auto"===s[1]?o/e.width*e.height:D(s[1])?(t.height-(r||e).height)*parseFloat(s[1])/100:parseInt(s[1],10),"auto"===s[0]&&(o=i/e.height*e.width),{left:o,top:i}},P.prototype.parseBackgroundRepeat=function(t){return this.cssList("backgroundRepeat",t)[0]},!function(){var r,o,i,s;!function(){var t={},e={};r=function(e,n,r){t[e]={deps:n,callback:r}},s=i=o=function(n){function r(t){if("."!==t.charAt(0))return t;for(var e=t.split("/"),r=n.split("/").slice(0,-1),o=0,i=e.length;i>o;o++){var s=e[o];if(".."===s)r.pop();else{if("."===s)continue;r.push(s)}}return r.join("/")}if(s._eak_seen=t,e[n])return e[n];if(e[n]={},!t[n])throw Error("Could not find module "+n);for(var i,a=t[n],c=a.deps,u=a.callback,h=[],p=0,l=c.length;l>p;p++)"exports"===c[p]?h.push(i={}):h.push(o(r(c[p])));var d=u.apply(this,h);return e[n]=i||d}}(),r("promise/all",["./utils","exports"],function(t,e){"use strict";function n(t){var e=this;if(!r(t))throw new TypeError("You must pass an array to all.");return new e(function(e,n){function r(t){return function(e){i(t,e)}}function i(t,n){a[t]=n,0===--c&&e(a)}var s,a=[],c=t.length;0===c&&e([]);for(var u=0;t.length>u;u++)s=t[u],s&&o(s.then)?s.then(r(u),n):i(u,s)})}var r=t.isArray,o=t.isFunction;e.all=n}),r("promise/asap",["exports"],function(r){"use strict";function o(){return function(){process.nextTick(a)}}function i(){var t=0,n=new p(a),r=e.createTextNode("");return n.observe(r,{characterData:!0}),function(){r.data=t=++t%2}}function s(){return function(){l.setTimeout(a,1)}}function a(){for(var t=0;d.length>t;t++){var e=d[t],n=e[0],r=e[1];n(r)}d=[]}function c(t,e){var n=d.push([t,e]);1===n&&u()}var u,h=t!==n?t:{},p=h.MutationObserver||h.WebKitMutationObserver,l="undefined"!=typeof global?global:this,d=[];u="undefined"!=typeof process&&"[object process]"==={}.toString.call(process)?o():p?i():s(),r.asap=c}),r("promise/cast",["exports"],function(t){"use strict";function e(t){if(t&&"object"==typeof t&&t.constructor===this)return t;var e=this;return new e(function(e){e(t)})}t.cast=e}),r("promise/config",["exports"],function(t){"use strict";function e(t,e){return 2!==arguments.length?n[t]:(n[t]=e,void 0)}var n={instrument:!1};t.config=n,t.configure=e}),r("promise/polyfill",["./promise","./utils","exports"],function(e,n,r){"use strict";function o(){var e="Promise"in t&&"cast"in t.Promise&&"resolve"in t.Promise&&"reject"in t.Promise&&"all"in t.Promise&&"race"in t.Promise&&function(){var e;return new t.Promise(function(t){e=t}),s(e)}();e||(t.Promise=i)}var i=e.Promise,s=n.isFunction;r.polyfill=o}),r("promise/promise",["./config","./utils","./cast","./all","./race","./resolve","./reject","./asap","exports"],function(t,e,n,r,o,i,s,a,c){"use strict";function u(t){if(!k(t))throw new TypeError("You must pass a resolver function as the first argument to the promise constructor");if(!(this instanceof u))throw new TypeError("Failed to construct 'Promise': Please use the 'new' operator, this object constructor cannot be called as a function.");this._subscribers=[],h(t,this)}function h(t,e){function n(t){g(e,t)}function r(t){y(e,t)}try{t(n,r)}catch(o){r(o)}}function p(t,e,n,r){var o,i,s,a,c=k(n);if(c)try{o=n(r),s=!0}catch(u){a=!0,i=u}else o=r,s=!0;f(e,o)||(c&&s?g(e,o):a?y(e,i):t===L?g(e,o):t===N&&y(e,o))}function l(t,e,n,r){var o=t._subscribers,i=o.length;o[i]=e,o[i+L]=n,o[i+N]=r}function d(t,e){for(var n,r,o=t._subscribers,i=t._detail,s=0;o.length>s;s+=3)n=o[s],r=o[s+e],p(e,n,r,i);t._subscribers=null}function f(t,e){var n,r=null;try{if(t===e)throw new TypeError("A promises callback cannot return that same promise.");if(x(e)&&(r=e.then,k(r)))return r.call(e,function(r){return n?!0:(n=!0,e!==r?g(t,r):m(t,r),void 0)},function(e){return n?!0:(n=!0,y(t,e),void 0)}),!0}catch(o){return n?!0:(y(t,o),!0)}return!1}function g(t,e){t===e?m(t,e):f(t,e)||m(t,e)}function m(t,e){t._state===O&&(t._state=S,t._detail=e,w.async(b,t))}function y(t,e){t._state===O&&(t._state=S,t._detail=e,w.async(v,t))}function b(t){d(t,t._state=L)}function v(t){d(t,t._state=N)}var w=t.config,x=(t.configure,e.objectOrFunction),k=e.isFunction,E=(e.now,n.cast),R=r.all,I=o.race,T=i.resolve,B=s.reject,C=a.asap;w.async=C;var O=void 0,S=0,L=1,N=2;u.prototype={constructor:u,_state:void 0,_detail:void 0,_subscribers:void 0,then:function(t,e){var n=this,r=new this.constructor(function(){});if(this._state){var o=arguments;w.async(function(){p(n._state,r,o[n._state-1],n._detail)})}else l(this,r,t,e);return r},"catch":function(t){return this.then(null,t)}},u.all=R,u.cast=E,u.race=I,u.resolve=T,u.reject=B,c.Promise=u}),r("promise/race",["./utils","exports"],function(t,e){"use strict";function n(t){var e=this;if(!r(t))throw new TypeError("You must pass an array to race.");return new e(function(e,n){for(var r,o=0;t.length>o;o++)r=t[o],r&&"function"==typeof r.then?r.then(e,n):e(r)})}var r=t.isArray;e.race=n}),r("promise/reject",["exports"],function(t){"use strict";function e(t){var e=this;return new e(function(e,n){n(t)})}t.reject=e}),r("promise/resolve",["exports"],function(t){"use strict";function e(t){var e=this;return new e(function(e){e(t)})}t.resolve=e}),r("promise/utils",["exports"],function(t){"use strict";function e(t){return n(t)||"object"==typeof t&&null!==t}function n(t){return"function"==typeof t}function r(t){return"[object Array]"===Object.prototype.toString.call(t)}var o=Date.now||function(){return(new Date).getTime()};t.objectOrFunction=e,t.isFunction=n,t.isArray=r,t.now=o}),o("promise/polyfill").polyfill()}(),j.prototype.renderBackground=function(t,e){e.height>0&&e.width>0&&(this.renderBackgroundColor(t,e),this.renderBackgroundImage(t,e))},j.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"))},j.prototype.renderBorders=function(t){t.forEach(this.renderBorder,this)},j.prototype.renderBorder=function(t){this.isTransparent(t.color)||null===t.args||this.drawShape(t.args,t.color)},j.prototype.renderBackgroundImage=function(t,e){var n=t.parseBackgroundImages();n.reverse().forEach(function(n,r,o){if("url"===n.method){var i=this.images.get(n.args[0]);i?this.renderBackgroundRepeating(t,e,i,o.length-(r+1)):_("Error loading background-image",n.args[0])}},this)},j.prototype.renderBackgroundRepeating=function(t,e,n,r){var o=t.parseBackgroundSize(e,n.image,r),i=t.parseBackgroundPosition(e,n.image,r,o),s=t.parseBackgroundRepeat(r);switch(s){case"repeat-x":case"repeat no-repeat":this.backgroundRepeatShape(n,i,o,e,e.left,e.top+i.top,99999,n.image.height);break;case"repeat-y":case"no-repeat repeat":this.backgroundRepeatShape(n,i,o,e,e.left+i.left,e.top,n.image.width,99999);break;case"no-repeat":this.backgroundRepeatShape(n,i,o,e,e.left+i.left,e.top+i.top,n.image.width,n.image.height);break;default:this.renderBackgroundRepeat(n,i,o,{top:e.top,left:e.left})}},j.prototype.isTransparent=function(t){return!t||"transparent"===t||"rgba(0, 0, 0, 0)"===t},F.prototype=Object.create(j.prototype),F.prototype.setFillStyle=function(t){return this.ctx.fillStyle=t,this.ctx},F.prototype.rectangle=function(t,e,n,r,o){this.setFillStyle(o).fillRect(t,e,n,r)},F.prototype.drawShape=function(t,e){this.shape(t),this.setFillStyle(e).fill()},F.prototype.clip=function(t,e,n){this.ctx.save(),this.shape(t).clip(),e.call(n),this.ctx.restore()},F.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},F.prototype.font=function(t,e,n,r,o,i){this.setFillStyle(t).font=[e,n,r,o,i].join(" ")},F.prototype.setOpacity=function(t){this.ctx.globalAlpha=t},F.prototype.text=function(t,e,n){this.ctx.fillText(t,e,n)},F.prototype.backgroundRepeatShape=function(t,e,n,r,o,i,s,a){var c=[["line",Math.round(o),Math.round(i)],["line",Math.round(o+s),Math.round(i)],["line",Math.round(o+s),Math.round(a+i)],["line",Math.round(o),Math.round(a+i)]];this.clip(c,function(){this.renderBackgroundRepeat(t,e,r)},this)},F.prototype.renderBackgroundRepeat=function(t,e,n,r){var o=Math.round(r.left+e.left),i=Math.round(r.top+e.top);this.setFillStyle(this.ctx.createPattern(this.resizeImage(t,n),"repeat")),this.ctx.translate(o,i),this.ctx.fill(),this.ctx.translate(-o,-i)},F.prototype.resizeImage=function(t,n){var r=t.image;if(r.width===n.width&&r.height===n.height)return r;var o,i=e.createElement("canvas");return i.width=n.width,i.height=n.height,o=i.getContext("2d"),o.drawImage(r,0,0,r.width,r.height,0,0,n.width,n.height),i},W.prototype=Object.create(P.prototype),W.prototype.getParentStack=function(t){var e=this.parent?this.parent.stack:null;return e?e.ownStacking?e:e.getParentStack(t):t.stack},z.prototype.testRangeBounds=function(){var t,n,r,o,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),r=t.getBoundingClientRect(),o=r.height,123===o&&(i=!0),e.body.removeChild(n))),i},z.prototype.testCORS=function(){return(new Image).crossOrigin!==n},H.prototype=Object.create(P.prototype),H.prototype.applyTextTransform=function(){this.node.data=this.transform(this.parent.css("textTransform"))},H.prototype.transform=function(t){var e=this.node.data;switch(t){case"lowercase":return e.toLowerCase();case"capitalize":return e.replace(/(^|\s|:|-|\(|\))([a-z])/g,V);case"uppercase":return e.toUpperCase();default:return e}}})(window,document); \ No newline at end of file +(function(t,e,n){function r(){return Math.max(Math.max(e.body.scrollWidth,e.documentElement.scrollWidth),Math.max(e.body.offsetWidth,e.documentElement.offsetWidth),Math.max(e.body.clientWidth,e.documentElement.clientWidth))}function o(){return Math.max(Math.max(e.body.scrollHeight,e.documentElement.scrollHeight),Math.max(e.body.offsetHeight,e.documentElement.offsetHeight),Math.max(e.body.clientHeight,e.documentElement.clientHeight))}function i(e,n,r){var o=e.documentElement.cloneNode(!0),i=e.createElement("iframe");return i.style.display="hidden",i.style.position="absolute",i.style.width=n+"px",i.style.height=r+"px",e.body.appendChild(i),new Promise(function(e){var n=function(){"none"!==i.contentWindow.getComputedStyle(s,null).backgroundImage?(r.body.removeChild(s),r.body.removeChild(a),e(i)):t.setTimeout(n,10)},r=i.contentWindow.document;r.open(),r.write(""),r.close(),r.replaceChild(r.adoptNode(o),r.documentElement),i.contentWindow.scrollTo(t.scrollX,t.scrollY);var s=r.createElement("div");s.className="html2canvas-ready-test",r.body.appendChild(s);var a=r.createElement("style");a.innerHTML="body div.html2canvas-ready-test { background-image:url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7); }",r.body.appendChild(a),n()})}function s(t,e,n,r,o){this.renderer=e,this.options=o,this.range=null,this.support=n,this.stack=new H(!0,1,t.ownerDocument,null);var i=new W(t,null);i.visibile=i.isElementVisible(),this.nodes=[i].concat(this.getChildren(i)).filter(function(t){return t.visible=t.isElementVisible()}),this.images=r.fetch(this.nodes.filter(C)),this.createStackingContexts(),this.sortStackingContexts(this.stack),this.images.ready.then(N(function(){D("Images loaded, starting parsing"),this.parse(this.stack),o.onrendered(e.canvas)},this))}function a(t){return 0>t.cssInt("zIndex")}function c(t){return t.cssInt("zIndex")>0}function u(t){return 0===t.cssInt("zIndex")}function h(t){return-1!==["inline","inline-block","inline-table"].indexOf(t.css("display"))}function p(t){return t instanceof H}function d(t){return t.node.data.trim().length>0}function l(t){return/^(normal|none|0px)$/.test(t.parent.css("letterSpacing"))}function f(t,e,n,r,o,i,s){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",i,s]),(n[0]>0||n[1]>0)&&t.push(["line",o[0].start.x,o[0].start.y])}function g(t){return["TopLeft","TopRight","BottomRight","BottomLeft"].map(function(e){var n=t.css("border"+e+"Radius"),r=n.split(" ");return 1>=r.length&&(r[1]=r[0]),r.map(m)})}function m(t){return parseInt(t,10)}function y(t,e,n,r){var o=4*((Math.sqrt(2)-1)/3),i=n*o,s=r*o,a=t+n,c=e+r;return{topLeft:v({x:t,y:c},{x:t,y:c-s},{x:a-i,y:e},{x:a,y:e}),topRight:v({x:t,y:e},{x:t+i,y:e},{x:a,y:c-s},{x:a,y:c}),bottomRight:v({x:a,y:e},{x:a,y:e+s},{x:t+i,y:c},{x:t,y:c}),bottomLeft:v({x:a,y:c},{x:a-i,y:c},{x:t,y:e+s},{x:t,y:e})}}function w(t,e,n){var r=t.left,o=t.top,i=t.width,s=t.height,a=e[0][0],c=e[0][1],u=e[1][0],h=e[1][1],p=e[2][0],d=e[2][1],l=e[3][0],f=e[3][1],g=i-u,m=s-d,w=i-p,v=s-f;return{topLeftOuter:y(r,o,a,c).topLeft.subdivide(.5),topLeftInner:y(r+n[3].width,o+n[0].width,Math.max(0,a-n[3].width),Math.max(0,c-n[0].width)).topLeft.subdivide(.5),topRightOuter:y(r+g,o,u,h).topRight.subdivide(.5),topRightInner:y(r+Math.min(g,i+n[3].width),o+n[0].width,g>i+n[3].width?0:u-n[3].width,h-n[0].width).topRight.subdivide(.5),bottomRightOuter:y(r+w,o+m,p,d).bottomRight.subdivide(.5),bottomRightInner:y(r+Math.min(w,i+n[3].width),o+Math.min(m,s+n[0].width),Math.max(0,p-n[1].width),Math.max(0,d-n[2].width)).bottomRight.subdivide(.5),bottomLeftOuter:y(r,o+v,l,f).bottomLeft.subdivide(.5),bottomLeftInner:y(r+n[3].width,o+v,Math.max(0,l-n[3].width),Math.max(0,f-n[2].width)).bottomLeft.subdivide(.5)}}function v(t,e,n,r){var o=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(i){var s=o(t,e,i),a=o(e,n,i),c=o(n,r,i),u=o(s,a,i),h=o(a,c,i),p=o(u,h,i);return[v(t,s,u,p),v(p,h,c,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 b(t,e,n,r,o,i,s){var a=[];return e[0]>0||e[1]>0?(a.push(["line",r[1].start.x,r[1].start.y]),r[1].curveTo(a)):a.push(["line",t.c1[0],t.c1[1]]),n[0]>0||n[1]>0?(a.push(["line",i[0].start.x,i[0].start.y]),i[0].curveTo(a),a.push(["line",s[0].end.x,s[0].end.y]),s[0].curveToReversed(a)):(a.push(["line",t.c2[0],t.c2[1]]),a.push(["line",t.c3[0],t.c3[1]])),e[0]>0||e[1]>0?(a.push(["line",o[1].end.x,o[1].end.y]),o[1].curveToReversed(a)):a.push(["line",t.c4[0],t.c4[1]]),a}function x(t){return t.node.nodeType!==Node.ELEMENT_NODE||-1===["SCRIPT","HEAD","TITLE","OBJECT","BR"].indexOf(t.node.nodeName)}function k(t){return[].concat.apply([],t)}function I(t){return t.nodeType===Node.TEXT_NODE||t.nodeType===Node.ELEMENT_NODE}function E(t){var e=t.css("position"),n="absolute"===e||"relative"===e?t.css("zIndex"):"auto";return"auto"!==n}function R(t){return"static"!==t.css("position")}function T(t){return"none"!==t.css("float")}function B(t){var e=this;return function(){return!t.apply(e,arguments)}}function C(t){return t.node.nodeType===Node.ELEMENT_NODE}function O(t){return t.node.nodeType===Node.TEXT_NODE}function S(t,e){return t.cssInt("zIndex")-e.cssInt("zIndex")}function L(t){return 1>t.css("opacity")}function N(t,e){return function(){return t.apply(e,arguments)}}function A(t,e){this.src=t,this.image=new Image;var n=this.image;this.promise=new Promise(function(r,o){n.onload=r,n.onerror=o,e&&(n.crossOrigin="anonymous"),n.src=t})}function M(e,n){this.link=null,this.options=e,this.support=n,this.origin=t.location.protocol+t.location.host}function _(t){return"IMG"===t.node.nodeName}function P(t){return t.node.src}function D(){t.html2canvas.logging&&t.console&&t.console.log&&t.console.log.apply(t.console,[Date.now()-t.html2canvas.start+"ms","html2canvas:"].concat([].slice.call(arguments,0)))}function W(t,e){this.node=t,this.parent=e,this.stack=null,this.bounds=null,this.visible=null,this.computedStyles=null,this.styles={},this.backgroundImages=null}function j(t){return-1!==(""+t).indexOf("%")}function F(t,e,n){this.width=t,this.height=e,this.images=n}function z(t,n){F.apply(this,arguments),this.canvas=e.createElement("canvas"),this.canvas.width=t,this.canvas.height=n,this.ctx=this.canvas.getContext("2d"),this.ctx.textBaseline="bottom"}function H(t,e,n,r){W.call(this,n,r),this.ownStacking=t,this.contexts=[],this.children=[],this.opacity=(this.parent?this.parent.stack.opacity:1)*e}function V(){this.rangeBounds=this.testRangeBounds(),this.cors=this.testCORS()}function X(t,e){W.call(this,t,e)}function Y(t,e,r){return t.length>0?e+r.toUpperCase():n}t.html2canvas=function(a,c){c=c||{},c.logging&&(t.html2canvas.logging=!0,t.html2canvas.start=Date.now()),i(e,t.innerWidth,t.innerHeight).then(function(i){D("Document cloned");var u=i.contentWindow;a===n?e.body:a[0];var h=u.document.documentElement,p=new V,d=new M(c,p),l=new z(r(),o(),d),f=new s(h,l,p,d,c);t.console.log(f)})},s.prototype.getChildren=function(t){return k([].filter.call(t.node.childNodes,I).map(function(e){var n=[e.nodeType===Node.TEXT_NODE?new X(e,t):new W(e,t)].filter(x);return e.nodeType===Node.ELEMENT_NODE&&n.length?n[0].isElementVisible()?n.concat(this.getChildren(n[0])):[]:n},this))},s.prototype.newStackingContext=function(t,e){var n=new H(e,t.cssFloat("opacity"),t.node,t.parent);n.visible=t.visible;var r=n.getParentStack(this);r.contexts.push(n),t.stack=n},s.prototype.createStackingContexts=function(){this.nodes.forEach(function(t){C(t)&&(this.isRootElement(t)||L(t)||E(t)||this.isBodyWithTransparentRoot(t))?this.newStackingContext(t,!0):C(t)&&R(t)?this.newStackingContext(t,!1):t.assignStack(t.parent.stack)},this)},s.prototype.isBodyWithTransparentRoot=function(t){return"BODY"===t.node.nodeName&&this.renderer.isTransparent(t.parent.css("backgroundColor"))},s.prototype.isRootElement=function(t){return"HTML"===t.node.nodeName},s.prototype.sortStackingContexts=function(t){t.contexts.sort(S),t.contexts.forEach(this.sortStackingContexts,this)},s.prototype.parseBounds=function(t){return t.bounds=this.getBounds(t.node)},s.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{}},s.prototype.parseTextBounds=function(t){return function(e,n,r){if("none"!==t.parent.css("textDecoration")||0!==e.trim().length){var o=r.slice(0,n).join("").length;if(this.support.rangeBounds)return this.getRangeBounds(t.node,o,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}}}},s.prototype.getWrapperBounds=function(t){var e=t.ownerDocument.createElement("wrapper"),n=t.parentNode,r=t.cloneNode(!0);e.appendChild(t.cloneNode(!0)),n.replaceChild(e,t);var o=this.getBounds(e);return n.replaceChild(r,e),o},s.prototype.getRangeBounds=function(t,e,n){var r=this.range||(this.range=t.ownerDocument.createRange());return r.setStart(t,e),r.setEnd(t,e+n),r.getBoundingClientRect()},s.prototype.parse=function(t){var e=t.contexts.filter(a),n=t.children.filter(C),r=n.filter(B(T)),o=r.filter(B(R)).filter(B(h)),i=n.filter(B(R)).filter(T),s=r.filter(B(R)).filter(h),l=t.contexts.concat(r.filter(R)).filter(u),f=t.children.filter(O).filter(d),g=t.contexts.filter(c),m=[];e.concat(o).concat(i).concat(s).concat(l).concat(f).concat(g).forEach(function(t){if(this.paint(t),-1!==m.indexOf(t.node))throw D(t,t.node),Error("rendering twice");m.push(t.node),p(t)&&this.parse(t)},this)},s.prototype.paint=function(t){try{O(t)?this.paintText(t):this.paintNode(t)}catch(e){D(e)}},s.prototype.paintNode=function(t){p(t)&&this.renderer.setOpacity(t.opacity);var e=this.parseBounds(t),n=this.parseBorders(t);switch(this.renderer.clip(n.clip,function(){this.renderer.renderBackground(t,e)},this),this.renderer.renderBorders(n.borders),t.node.nodeName){case"IMG":var r=this.images.get(t.node.src);r?this.renderer.renderImage(t,e,n,r.image):D("Error loading ",t.node.src)}},s.prototype.paintText=function(t){t.applyTextTransform();var e=t.node.data.split(!this.options.letterRendering||l(t)?/(\b| )/:""),n=t.parent.fontWeight(),r=t.parent.css("fontSize"),o=t.parent.css("fontFamily");this.renderer.font(t.parent.css("color"),t.parent.css("fontStyle"),t.parent.css("fontVariant"),n,r,o),e.map(this.parseTextBounds(t),this).forEach(function(t,n){t&&this.renderer.text(e[n],t.left,t.bottom)},this)},s.prototype.parseBorders=function(t){var e=t.bounds,n=g(t),r=["Top","Right","Bottom","Left"].map(function(e){return{width:t.cssInt("border"+e+"Width"),color:t.css("border"+e+"Color"),args:null}}),o=w(e,n,r);return{clip:this.parseBackgroundClip(t,o,r,n,e),borders:r.map(function(t,i){if(t.width>0){var s=e.left,a=e.top,c=e.width,u=e.height-r[2].width;switch(i){case 0:u=r[0].width,t.args=b({c1:[s,a],c2:[s+c,a],c3:[s+c-r[1].width,a+u],c4:[s+r[3].width,a+u]},n[0],n[1],o.topLeftOuter,o.topLeftInner,o.topRightOuter,o.topRightInner);break;case 1:s=e.left+e.width-r[1].width,c=r[1].width,t.args=b({c1:[s+c,a],c2:[s+c,a+u+r[2].width],c3:[s,a+u],c4:[s,a+r[0].width]},n[1],n[2],o.topRightOuter,o.topRightInner,o.bottomRightOuter,o.bottomRightInner);break;case 2:a=a+e.height-r[2].width,u=r[2].width,t.args=b({c1:[s+c,a+u],c2:[s,a+u],c3:[s+r[3].width,a],c4:[s+c-r[3].width,a]},n[2],n[3],o.bottomRightOuter,o.bottomRightInner,o.bottomLeftOuter,o.bottomLeftInner);break;case 3:c=r[3].width,t.args=b({c1:[s,a+u+r[2].width],c2:[s,a],c3:[s+c,a+r[0].width],c4:[s+c,a+u]},n[3],n[0],o.bottomLeftOuter,o.bottomLeftInner,o.topLeftOuter,o.topLeftInner)}}return t})}},s.prototype.parseBackgroundClip=function(t,e,n,r,o){var i=t.css("backgroundClip"),s=[];switch(i){case"content-box":case"padding-box":f(s,r[0],r[1],e.topLeftInner,e.topRightInner,o.left+n[3].width,o.top+n[0].width),f(s,r[1],r[2],e.topRightInner,e.bottomRightInner,o.left+o.width-n[1].width,o.top+n[0].width),f(s,r[2],r[3],e.bottomRightInner,e.bottomLeftInner,o.left+o.width-n[1].width,o.top+o.height-n[2].width),f(s,r[3],r[0],e.bottomLeftInner,e.topLeftInner,o.left+n[3].width,o.top+o.height-n[2].width);break;default:f(s,r[0],r[1],e.topLeftOuter,e.topRightOuter,o.left,o.top),f(s,r[1],r[2],e.topRightOuter,e.bottomRightOuter,o.left+o.width,o.top),f(s,r[2],r[3],e.bottomRightOuter,e.bottomLeftOuter,o.left+o.width,o.top+o.height),f(s,r[3],r[0],e.bottomLeftOuter,e.topLeftOuter,o.left,o.top+o.height)}return s},M.prototype.findImages=function(t){var e=[];return t.filter(_).map(P).forEach(this.addImage(e,this.loadImage),this),e},M.prototype.findBackgroundImage=function(t,e){return e.parseBackgroundImages().filter(this.isImageBackground).map(this.getBackgroundUrl).forEach(this.addImage(t,this.loadImage),this),t},M.prototype.addImage=function(t,e){return function(n){this.imageExists(t,n)||t.splice(0,0,e.apply(this,arguments))}},M.prototype.getBackgroundUrl=function(t){return t.args[0]},M.prototype.isImageBackground=function(t){return"url"===t.method},M.prototype.loadImage=function(t){return t.match(/data:image\/.*;base64,/i)?new A(t.replace(/url\(['"]{0,}|['"]{0,}\)$/gi,""),!1):this.isSameOrigin(t)||this.options.allowTaint===!0?new A(t,!1):this.support.cors&&!this.options.allowTaint&&this.options.useCORS?new A(t,!0):this.options.proxy?new ProxyImageContainer(t):new DummyImageContainer(t)},M.prototype.imageExists=function(t,e){return t.some(function(t){return t.src===e})},M.prototype.isSameOrigin=function(t){var n=this.link||(this.link=e.createElement("a"));n.href=t,n.href=n.href;var r=n.protocol+n.host;return r===this.origin},M.prototype.getPromise=function(t){return t.promise},M.prototype.get=function(t){var e=null;return this.images.some(function(n){return(e=n).src===t})?e:null},M.prototype.fetch=function(t){return this.images=t.reduce(N(this.findBackgroundImage,this),this.findImages(t)),this.ready=Promise.all(this.images.map(this.getPromise)),this},W.prototype.assignStack=function(t){this.stack=t,t.children.push(this)},W.prototype.isElementVisible=function(){return this.node.nodeType===Node.TEXT_NODE?this.parent.visible:"none"!==this.css("display")&&"hidden"!==this.css("visibility")&&!this.node.hasAttribute("data-html2canvas-ignore")},W.prototype.css=function(t){return this.computedStyles||(this.computedStyles=this.node.ownerDocument.defaultView.getComputedStyle(this.node,null)),this.styles[t]||(this.styles[t]=this.computedStyles[t])},W.prototype.cssInt=function(t){var e=parseInt(this.css(t),10);return Number.isNaN(e)?0:e},W.prototype.cssFloat=function(t){var e=parseFloat(this.css(t));return Number.isNaN(e)?0:e},W.prototype.fontWeight=function(){var t=this.css("fontWeight");switch(parseInt(t,10)){case 401:t="bold";break;case 400:t="normal"}return t},W.prototype.parseBackgroundImages=function(){var t,e,r,o,i,s,a,c=" \r\n ",u=[],h=0,p=0,d=function(){t&&('"'===e.substr(0,1)&&(e=e.substr(1,e.length-2)),e&&a.push(e),"-"===t.substr(0,1)&&(o=t.indexOf("-",1)+1)>0&&(r=t.substr(0,o),t=t.substr(o)),u.push({prefix:r,method:t.toLowerCase(),value:i,args:a,image:null})),a=[],t=r=e=i=""};return a=[],t=r=e=i="",this.css("backgroundImage").split("").forEach(function(r){if(!(0===h&&c.indexOf(r)>-1)){switch(r){case'"':s?s===r&&(s=null):s=r;break;case"(":if(s)break;if(0===h)return h=1,i+=r,n;p++;break;case")":if(s)break;if(1===h){if(0===p)return h=0,i+=r,d(),n;p--}break;case",":if(s)break;if(0===h)return d(),n;if(1===h&&0===p&&!t.match(/^url$/i))return a.push(e),e="",i+=r,n}i+=r,0===h?t+=r:e+=r}}),d(),this.backgroundImages||(this.backgroundImages=u)},W.prototype.cssList=function(t,e){var n=(this.css(t)||"").split(",");return n=n[e||0]||n[0]||"auto",n=n.trim().split(" "),1===n.length&&(n=[n[0],n[0]]),n},W.prototype.parseBackgroundSize=function(t,e,n){var r,o,i=this.cssList("backgroundSize",n);if(j(i[0]))r=t.width*parseFloat(i[0])/100;else{if(/contain|cover/.test(i[0])){var s=t.width/t.height,a=e.width/e.height;return a>s^"contain"===i[0]?{width:t.height*a,height:t.height}:{width:t.width,height:t.width/a}}r=parseInt(i[0],10)}return o="auto"===i[0]&&"auto"===i[1]?e.height:"auto"===i[1]?r/e.width*e.height:j(i[1])?t.height*parseFloat(i[1])/100:parseInt(i[1],10),"auto"===i[0]&&(r=o/e.height*e.width),{width:r,height:o}},W.prototype.parseBackgroundPosition=function(t,e,n,r){var o,i,s=this.cssList("backgroundPosition",n);return o=j(s[0])?(t.width-(r||e).width)*(parseFloat(s[0])/100):parseInt(s[0],10),i="auto"===s[1]?o/e.width*e.height:j(s[1])?(t.height-(r||e).height)*parseFloat(s[1])/100:parseInt(s[1],10),"auto"===s[0]&&(o=i/e.height*e.width),{left:o,top:i}},W.prototype.parseBackgroundRepeat=function(t){return this.cssList("backgroundRepeat",t)[0]},!function(){var r,o,i,s;!function(){var t={},e={};r=function(e,n,r){t[e]={deps:n,callback:r}},s=i=o=function(n){function r(t){if("."!==t.charAt(0))return t;for(var e=t.split("/"),r=n.split("/").slice(0,-1),o=0,i=e.length;i>o;o++){var s=e[o];if(".."===s)r.pop();else{if("."===s)continue;r.push(s)}}return r.join("/")}if(s._eak_seen=t,e[n])return e[n];if(e[n]={},!t[n])throw Error("Could not find module "+n);for(var i,a=t[n],c=a.deps,u=a.callback,h=[],p=0,d=c.length;d>p;p++)"exports"===c[p]?h.push(i={}):h.push(o(r(c[p])));var l=u.apply(this,h);return e[n]=i||l}}(),r("promise/all",["./utils","exports"],function(t,e){"use strict";function n(t){var e=this;if(!r(t))throw new TypeError("You must pass an array to all.");return new e(function(e,n){function r(t){return function(e){i(t,e)}}function i(t,n){a[t]=n,0===--c&&e(a)}var s,a=[],c=t.length;0===c&&e([]);for(var u=0;t.length>u;u++)s=t[u],s&&o(s.then)?s.then(r(u),n):i(u,s)})}var r=t.isArray,o=t.isFunction;e.all=n}),r("promise/asap",["exports"],function(r){"use strict";function o(){return function(){process.nextTick(a)}}function i(){var t=0,n=new p(a),r=e.createTextNode("");return n.observe(r,{characterData:!0}),function(){r.data=t=++t%2}}function s(){return function(){d.setTimeout(a,1)}}function a(){for(var t=0;l.length>t;t++){var e=l[t],n=e[0],r=e[1];n(r)}l=[]}function c(t,e){var n=l.push([t,e]);1===n&&u()}var u,h=t!==n?t:{},p=h.MutationObserver||h.WebKitMutationObserver,d="undefined"!=typeof global?global:this,l=[];u="undefined"!=typeof process&&"[object process]"==={}.toString.call(process)?o():p?i():s(),r.asap=c}),r("promise/cast",["exports"],function(t){"use strict";function e(t){if(t&&"object"==typeof t&&t.constructor===this)return t;var e=this;return new e(function(e){e(t)})}t.cast=e}),r("promise/config",["exports"],function(t){"use strict";function e(t,e){return 2!==arguments.length?n[t]:(n[t]=e,void 0)}var n={instrument:!1};t.config=n,t.configure=e}),r("promise/polyfill",["./promise","./utils","exports"],function(e,n,r){"use strict";function o(){var e="Promise"in t&&"cast"in t.Promise&&"resolve"in t.Promise&&"reject"in t.Promise&&"all"in t.Promise&&"race"in t.Promise&&function(){var e;return new t.Promise(function(t){e=t}),s(e)}();e||(t.Promise=i)}var i=e.Promise,s=n.isFunction;r.polyfill=o}),r("promise/promise",["./config","./utils","./cast","./all","./race","./resolve","./reject","./asap","exports"],function(t,e,n,r,o,i,s,a,c){"use strict";function u(t){if(!k(t))throw new TypeError("You must pass a resolver function as the first argument to the promise constructor");if(!(this instanceof u))throw new TypeError("Failed to construct 'Promise': Please use the 'new' operator, this object constructor cannot be called as a function.");this._subscribers=[],h(t,this)}function h(t,e){function n(t){g(e,t)}function r(t){y(e,t)}try{t(n,r)}catch(o){r(o)}}function p(t,e,n,r){var o,i,s,a,c=k(n);if(c)try{o=n(r),s=!0}catch(u){a=!0,i=u}else o=r,s=!0;f(e,o)||(c&&s?g(e,o):a?y(e,i):t===L?g(e,o):t===N&&y(e,o))}function d(t,e,n,r){var o=t._subscribers,i=o.length;o[i]=e,o[i+L]=n,o[i+N]=r}function l(t,e){for(var n,r,o=t._subscribers,i=t._detail,s=0;o.length>s;s+=3)n=o[s],r=o[s+e],p(e,n,r,i);t._subscribers=null}function f(t,e){var n,r=null;try{if(t===e)throw new TypeError("A promises callback cannot return that same promise.");if(x(e)&&(r=e.then,k(r)))return r.call(e,function(r){return n?!0:(n=!0,e!==r?g(t,r):m(t,r),void 0)},function(e){return n?!0:(n=!0,y(t,e),void 0)}),!0}catch(o){return n?!0:(y(t,o),!0)}return!1}function g(t,e){t===e?m(t,e):f(t,e)||m(t,e)}function m(t,e){t._state===O&&(t._state=S,t._detail=e,b.async(w,t))}function y(t,e){t._state===O&&(t._state=S,t._detail=e,b.async(v,t))}function w(t){l(t,t._state=L)}function v(t){l(t,t._state=N)}var b=t.config,x=(t.configure,e.objectOrFunction),k=e.isFunction,I=(e.now,n.cast),E=r.all,R=o.race,T=i.resolve,B=s.reject,C=a.asap;b.async=C;var O=void 0,S=0,L=1,N=2;u.prototype={constructor:u,_state:void 0,_detail:void 0,_subscribers:void 0,then:function(t,e){var n=this,r=new this.constructor(function(){});if(this._state){var o=arguments;b.async(function(){p(n._state,r,o[n._state-1],n._detail)})}else d(this,r,t,e);return r},"catch":function(t){return this.then(null,t)}},u.all=E,u.cast=I,u.race=R,u.resolve=T,u.reject=B,c.Promise=u}),r("promise/race",["./utils","exports"],function(t,e){"use strict";function n(t){var e=this;if(!r(t))throw new TypeError("You must pass an array to race.");return new e(function(e,n){for(var r,o=0;t.length>o;o++)r=t[o],r&&"function"==typeof r.then?r.then(e,n):e(r)})}var r=t.isArray;e.race=n}),r("promise/reject",["exports"],function(t){"use strict";function e(t){var e=this;return new e(function(e,n){n(t)})}t.reject=e}),r("promise/resolve",["exports"],function(t){"use strict";function e(t){var e=this;return new e(function(e){e(t)})}t.resolve=e}),r("promise/utils",["exports"],function(t){"use strict";function e(t){return n(t)||"object"==typeof t&&null!==t}function n(t){return"function"==typeof t}function r(t){return"[object Array]"===Object.prototype.toString.call(t)}var o=Date.now||function(){return(new Date).getTime()};t.objectOrFunction=e,t.isFunction=n,t.isArray=r,t.now=o}),o("promise/polyfill").polyfill()}(),F.prototype.renderImage=function(t,e,n,r){var o=t.cssInt("paddingLeft"),i=t.cssInt("paddingTop"),s=t.cssInt("paddingRight"),a=t.cssInt("paddingBottom"),c=n.borders;this.drawImage(r,0,0,r.width,r.height,e.left+o+c[3].width,e.top+i+c[0].width,e.width-(c[1].width+c[3].width+o+s),e.height-(c[0].width+c[2].width+i+a))},F.prototype.renderBackground=function(t,e){e.height>0&&e.width>0&&(this.renderBackgroundColor(t,e),this.renderBackgroundImage(t,e))},F.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"))},F.prototype.renderBorders=function(t){t.forEach(this.renderBorder,this)},F.prototype.renderBorder=function(t){this.isTransparent(t.color)||null===t.args||this.drawShape(t.args,t.color)},F.prototype.renderBackgroundImage=function(t,e){var n=t.parseBackgroundImages();n.reverse().forEach(function(n,r,o){if("url"===n.method){var i=this.images.get(n.args[0]);i?this.renderBackgroundRepeating(t,e,i,o.length-(r+1)):D("Error loading background-image",n.args[0])}},this)},F.prototype.renderBackgroundRepeating=function(t,e,n,r){var o=t.parseBackgroundSize(e,n.image,r),i=t.parseBackgroundPosition(e,n.image,r,o),s=t.parseBackgroundRepeat(r);switch(s){case"repeat-x":case"repeat no-repeat":this.backgroundRepeatShape(n,i,o,e,e.left,e.top+i.top,99999,n.image.height);break;case"repeat-y":case"no-repeat repeat":this.backgroundRepeatShape(n,i,o,e,e.left+i.left,e.top,n.image.width,99999);break;case"no-repeat":this.backgroundRepeatShape(n,i,o,e,e.left+i.left,e.top+i.top,n.image.width,n.image.height);break;default:this.renderBackgroundRepeat(n,i,o,{top:e.top,left:e.left})}},F.prototype.isTransparent=function(t){return!t||"transparent"===t||"rgba(0, 0, 0, 0)"===t},z.prototype=Object.create(F.prototype),z.prototype.setFillStyle=function(t){return this.ctx.fillStyle=t,this.ctx},z.prototype.rectangle=function(t,e,n,r,o){this.setFillStyle(o).fillRect(t,e,n,r)},z.prototype.drawShape=function(t,e){this.shape(t),this.setFillStyle(e).fill()},z.prototype.drawImage=function(t,e,n,r,o,i,s,a,c){this.ctx.drawImage(t,e,n,r,o,i,s,a,c)},z.prototype.clip=function(t,e,n){this.ctx.save(),this.shape(t).clip(),e.call(n),this.ctx.restore()},z.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},z.prototype.font=function(t,e,n,r,o,i){this.setFillStyle(t).font=[e,n,r,o,i].join(" ")},z.prototype.setOpacity=function(t){this.ctx.globalAlpha=t},z.prototype.text=function(t,e,n){this.ctx.fillText(t,e,n)},z.prototype.backgroundRepeatShape=function(t,e,n,r,o,i,s,a){var c=[["line",Math.round(o),Math.round(i)],["line",Math.round(o+s),Math.round(i)],["line",Math.round(o+s),Math.round(a+i)],["line",Math.round(o),Math.round(a+i)]];this.clip(c,function(){this.renderBackgroundRepeat(t,e,n,r)},this)},z.prototype.renderBackgroundRepeat=function(t,e,n,r){var o=Math.round(r.left+e.left),i=Math.round(r.top+e.top);this.setFillStyle(this.ctx.createPattern(this.resizeImage(t,n),"repeat")),this.ctx.translate(o,i),this.ctx.fill(),this.ctx.translate(-o,-i)},z.prototype.resizeImage=function(t,n){var r=t.image;if(r.width===n.width&&r.height===n.height)return r;var o,i=e.createElement("canvas");return i.width=n.width,i.height=n.height,o=i.getContext("2d"),o.drawImage(r,0,0,r.width,r.height,0,0,n.width,n.height),i},H.prototype=Object.create(W.prototype),H.prototype.getParentStack=function(t){var e=this.parent?this.parent.stack:null;return e?e.ownStacking?e:e.getParentStack(t):t.stack},V.prototype.testRangeBounds=function(){var t,n,r,o,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),r=t.getBoundingClientRect(),o=r.height,123===o&&(i=!0),e.body.removeChild(n))),i},V.prototype.testCORS=function(){return(new Image).crossOrigin!==n},X.prototype=Object.create(W.prototype),X.prototype.applyTextTransform=function(){this.node.data=this.transform(this.parent.css("textTransform"))},X.prototype.transform=function(t){var e=this.node.data;switch(t){case"lowercase":return e.toLowerCase();case"capitalize":return e.replace(/(^|\s|:|-|\(|\))([a-z])/g,Y);case"uppercase":return e.toUpperCase();default:return e}}})(window,document); \ No newline at end of file diff --git a/src/core.js b/src/core.js index ca4cd60..3cf30cf 100644 --- a/src/core.js +++ b/src/core.js @@ -68,6 +68,7 @@ function createWindowClone(ownerDocument, width, height) { documentClone.close(); documentClone.replaceChild(documentClone.adoptNode(documentElement), documentClone.documentElement); + container.contentWindow.scrollTo(window.scrollX, window.scrollY); var div = documentClone.createElement("div"); div.className = "html2canvas-ready-test"; documentClone.body.appendChild(div); @@ -250,10 +251,14 @@ NodeParser.prototype.parse = function(stack) { }; NodeParser.prototype.paint = function(container) { - if (isTextNode(container)) { - this.paintText(container); - } else { - this.paintNode(container); + try { + if (isTextNode(container)) { + this.paintText(container); + } else { + this.paintNode(container); + } + } catch(e) { + log(e); } }; @@ -268,6 +273,17 @@ NodeParser.prototype.paintNode = function(container) { this.renderer.renderBackground(container, bounds); }, this); this.renderer.renderBorders(borderData.borders); + + switch(container.node.nodeName) { + case "IMG": + var imageContainer = this.images.get(container.node.src); + if (imageContainer) { + this.renderer.renderImage(container, bounds, borderData, imageContainer.image); + } else { + log("Error loading ", container.node.src); + } + break; + } }; NodeParser.prototype.paintText = function(container) { diff --git a/src/imageloader.js b/src/imageloader.js index 0d6e4fe..cb134bf 100644 --- a/src/imageloader.js +++ b/src/imageloader.js @@ -5,10 +5,23 @@ function ImageLoader(options, support) { this.origin = window.location.protocol + window.location.host; } -ImageLoader.prototype.findImages = function(images, container) { - var backgrounds = container.parseBackgroundImages(); - var backgroundImages = backgrounds.filter(this.isImageBackground).map(this.getBackgroundUrl).filter(this.imageExists(images)).map(this.loadImage, this); - return images.concat(backgroundImages); +ImageLoader.prototype.findImages = function(nodes) { + var images = []; + nodes.filter(isImage).map(src).forEach(this.addImage(images, this.loadImage), this); + return images; +}; + +ImageLoader.prototype.findBackgroundImage = function(images, container) { + container.parseBackgroundImages().filter(this.isImageBackground).map(this.getBackgroundUrl).forEach(this.addImage(images, this.loadImage), this); + return images; +}; + +ImageLoader.prototype.addImage = function(images, callback) { + return function(newImage) { + if (!this.imageExists(images, newImage)) { + images.splice(0, 0, callback.apply(this, arguments)); + } + }; }; ImageLoader.prototype.getBackgroundUrl = function(imageData) { @@ -33,12 +46,10 @@ ImageLoader.prototype.loadImage = function(src) { } }; -ImageLoader.prototype.imageExists = function(images) { - return function(newImage) { - return !images.some(function(image) { - return image.src !== newImage.src; - }); - }; +ImageLoader.prototype.imageExists = function(images, src) { + return images.some(function(image) { + return image.src === src; + }); }; ImageLoader.prototype.isSameOrigin = function(url) { @@ -61,7 +72,15 @@ ImageLoader.prototype.get = function(src) { }; ImageLoader.prototype.fetch = function(nodes) { - this.images = nodes.reduce(bind(this.findImages, this), []); + this.images = nodes.reduce(bind(this.findBackgroundImage, this), this.findImages(nodes)); this.ready = Promise.all(this.images.map(this.getPromise)); return this; }; + +function isImage(container) { + return container.node.nodeName === "IMG"; +} + +function src(container) { + return container.node.src; +} diff --git a/src/renderer.js b/src/renderer.js index cc5d1a0..65c7864 100644 --- a/src/renderer.js +++ b/src/renderer.js @@ -4,6 +4,26 @@ function Renderer(width, height, images) { this.images = images; } +Renderer.prototype.renderImage = function(container, bounds, borderData, image) { + var paddingLeft = container.cssInt('paddingLeft'), + paddingTop = container.cssInt('paddingTop'), + paddingRight = container.cssInt('paddingRight'), + paddingBottom = container.cssInt('paddingBottom'), + borders = borderData.borders; + + this.drawImage( + image, + 0, + 0, + image.width, + image.height, + bounds.left + paddingLeft + borders[3].width, + bounds.top + paddingTop + borders[0].width, + bounds.width - (borders[1].width + borders[3].width + paddingLeft + paddingRight), + bounds.height - (borders[0].width + borders[2].width + paddingTop + paddingBottom) + ); +}; + Renderer.prototype.renderBackground = function(container, bounds) { if (bounds.height > 0 && bounds.width > 0) { this.renderBackgroundColor(container, bounds); diff --git a/src/renderers/canvas.js b/src/renderers/canvas.js index 6da13e3..a185a2e 100644 --- a/src/renderers/canvas.js +++ b/src/renderers/canvas.js @@ -23,6 +23,10 @@ CanvasRenderer.prototype.drawShape = function(shape, color) { this.setFillStyle(color).fill(); }; +CanvasRenderer.prototype.drawImage = function(image, sx, sy, sw, sh, dx, dy, dw, dh) { + this.ctx.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh); +}; + CanvasRenderer.prototype.clip = function(shape, callback, context) { this.ctx.save(); this.shape(shape).clip(); @@ -59,7 +63,7 @@ CanvasRenderer.prototype.backgroundRepeatShape = function(imageContainer, backgr ["line", Math.round(left), Math.round(height + top)] ]; this.clip(shape, function() { - this.renderBackgroundRepeat(imageContainer, backgroundPosition, bounds); + this.renderBackgroundRepeat(imageContainer, backgroundPosition, size, bounds); }, this); };