From db9a1d16ad88fe7904c858dbcfdf511609a45e21 Mon Sep 17 00:00:00 2001 From: MoyuScript Date: Thu, 21 Jul 2011 03:12:17 +0300 Subject: [PATCH] added support for proxys, fixed a lot of background position issues, added test console --- .gitignore | 1 + build/html2canvas.js | 291 +++++++++++++++++----- build/html2canvas.min.js | 76 +++--- build/jquery.plugin.html2canvas.js | 13 +- loading.gif | Bin 0 -> 8238 bytes readme.md | 2 +- screenshots.html | 304 +++++++++++++++++++++++ src/Background.js | 106 ++++++-- src/Core.js | 32 ++- src/Draw.js | 4 +- src/Images.js | 92 +++++-- src/LICENSE | 2 +- src/Renderer.js | 32 ++- src/Util.js | 26 +- src/plugins/jquery.plugin.html2canvas.js | 11 +- tests/proxy.html | 27 ++ 16 files changed, 841 insertions(+), 178 deletions(-) create mode 100644 loading.gif create mode 100644 screenshots.html create mode 100644 tests/proxy.html diff --git a/.gitignore b/.gitignore index 8a14284..76906b6 100644 --- a/.gitignore +++ b/.gitignore @@ -1,6 +1,7 @@ /nbproject/ /images/ /tests/templates/ +/tests/cache/ /dist/ /build/tmp.js index.html \ No newline at end of file diff --git a/build/html2canvas.js b/build/html2canvas.js index 143fe70..6d17d7f 100644 --- a/build/html2canvas.js +++ b/build/html2canvas.js @@ -1,5 +1,5 @@ /* - * html2canvas v0.20 + * html2canvas v0.25 * Copyright (c) 2011 Niklas von Hertzen. All rights reserved. * http://www.twitter.com/niklasvh * @@ -52,9 +52,19 @@ function html2canvas(el, userOptions) { reorderZ: true, throttle:true, letterRendering:false, + proxyUrl: null, + logger: function(a){ + if (window.console && window.console.log){ + window.console.log(a); + }else{ + alert(a); + } + }, + canvasWidth:0, + canvasHeight:0, renderOrder: "canvas flash html" }); - + this.element = el; var imageLoaded, @@ -71,6 +81,7 @@ function html2canvas(el, userOptions) { this.ignoreElements = "IFRAME|OBJECT|PARAM"; this.needReorder = false; this.blockElements = new RegExp("(BR|PARAM)"); + this.pageOrigin = window.location.protocol + window.location.hostname; this.ignoreRe = new RegExp("("+this.ignoreElements+")"); @@ -132,16 +143,22 @@ html2canvas.prototype.init = function(){ this.canvas = this.ctx.canvas; */ - this.log('Finding background images'); + this.log('Finding background-images'); + this.images.push('start'); + this.getImages(this.element); this.log('Finding images'); - this.each(document.images,function(i,e){ + // console.log(this.element.ownerDocument); + + + + this.each(this.element.ownerDocument.images,function(i,e){ _.preloadImage(_.getAttr(e,'src')); }); - - + this.images.splice(0,1); + // console.log(this.images); if (this.images.length == 0){ this.start(); } @@ -154,9 +171,10 @@ html2canvas.prototype.init = function(){ */ html2canvas.prototype.start = function(){ - + // console.log(this.images); if (this.images.length == 0 || this.imagesLoaded==this.images.length/2){ - this.log('Started parsing'); + + this.log('Finished loading '+this.imagesLoaded+' images, Started parsing'); this.bodyOverflow = document.getElementsByTagName('body')[0].style.overflow; document.getElementsByTagName('body')[0].style.overflow = "hidden"; var rootStack = new this.storageContext($(document).width(),$(document).height()); @@ -275,8 +293,8 @@ html2canvas.prototype.drawBackground = function(el,bounds,ctx){ var background_image = this.getCSS(el,"background-image"); var background_repeat = this.getCSS(el,"background-repeat"); - if (typeof background_image != "undefined" && /^(1|none)$/.test(background_image)==false){ - + if (typeof background_image != "undefined" && /^(1|none)$/.test(background_image)==false && /^(-webkit|-moz|linear-gradient|-o-)/.test(background_image)==false){ + background_image = this.backgroundImageUrl(background_image); var image = this.loadImage(background_image); @@ -284,7 +302,6 @@ html2canvas.prototype.drawBackground = function(el,bounds,ctx){ var bgp = this.getBackgroundPosition(el,bounds,image), bgy; - if (image){ switch(background_repeat){ @@ -297,10 +314,70 @@ html2canvas.prototype.drawBackground = function(el,bounds,ctx){ break; case "no-repeat": - - this.drawBackgroundRepeat(ctx,image,bgp.left+bounds.left,bgp.top+bounds.top,Math.min(bounds.width,image.width),Math.min(bounds.height,image.height),bounds.left,bounds.top); - // ctx.drawImage(image,(bounds.left+bgp.left),(bounds.top+bgp.top)); - break; + /* + this.drawBackgroundRepeat( + ctx, + image, + bgp.left+bounds.left, // sx + bgp.top+bounds.top, // sy + Math.min(bounds.width,image.width), + Math.min(bounds.height,image.height), + bounds.left, + bounds.top + );*/ + + + // console.log($(el).css('background-image')); + var bgw = bounds.width-bgp.left, + bgh = bounds.height-bgp.top, + bgsx = bgp.left, + bgsy = bgp.top, + bgdx = bgp.left+bounds.left, + bgdy = bgp.top+bounds.top; + + // + // bgw = Math.min(bgw,image.width); + // bgh = Math.min(bgh,image.height); + + if (bgsx<0){ + bgsx = Math.abs(bgsx); + bgdx += bgsx; + bgw = Math.min(bounds.width,image.width-bgsx); + }else{ + bgw = Math.min(bgw,image.width); + bgsx = 0; + } + + if (bgsy<0){ + bgsy = Math.abs(bgsy); + bgdy += bgsy; + // bgh = bgh-bgsy; + bgh = Math.min(bounds.height,image.height-bgsy); + }else{ + bgh = Math.min(bgh,image.height); + bgsy = 0; + } + + + // bgh = Math.abs(bgh); + // bgw = Math.abs(bgw); + if (bgh>0 && bgw > 0){ + this.drawImage( + ctx, + image, + bgsx, // source X : 0 + bgsy, // source Y : 1695 + bgw, // source Width : 18 + bgh, // source Height : 1677 + bgdx, // destination X :906 + bgdy, // destination Y : 1020 + bgw, // destination width : 18 + bgh // destination height : 1677 + ); + + // ctx.drawImage(image,(bounds.left+bgp.left),(bounds.top+bgp.top)); + break; + } default: var height, @@ -365,6 +442,8 @@ html2canvas.prototype.backgroundImageUrl = function(src){ src = src.substr(4); src = src.substr(0,src.length-1); } + + return src; } @@ -375,8 +454,9 @@ html2canvas.prototype.backgroundImageUrl = function(src){ html2canvas.prototype.getBackgroundPosition = function(el,bounds,image){ var bgpos = this.getCSS(el,"backgroundPosition") || "0 0"; + // var bgpos = $(el).css("backgroundPosition") || "0 0"; var bgposition = bgpos.split(" "), - top, + topPos, left, percentage; @@ -388,6 +468,8 @@ html2canvas.prototype.getBackgroundPosition = function(el,bounds,image){ bgposition[1] = val; } + + if (bgposition[0].toString().indexOf("%")!=-1){ percentage = (parseFloat(bgposition[0])/100); @@ -400,15 +482,29 @@ html2canvas.prototype.getBackgroundPosition = function(el,bounds,image){ if (bgposition[1].toString().indexOf("%")!=-1){ percentage = (parseFloat(bgposition[1])/100); - top = ((bounds.height * percentage)-(image.height*percentage)); + topPos = ((bounds.height * percentage)-(image.height*percentage)); }else{ - top = parseInt(bgposition[1],10); + + topPos = parseInt(bgposition[1],10); + } + + + + + var returnObj = {} + /* + "top": topPos, + "left": left + };*/ + + + returnObj.top = topPos; + returnObj.left = left; + + - return { - top: top, - left: left - }; + return returnObj; } @@ -627,7 +723,7 @@ html2canvas.prototype.newElement = function(el,parentStack){ if (el.nodeName=="IMG"){ image = _.loadImage(_.getAttr(el,'src')); if (image){ - + // console.log(image.width); this.drawImage( ctx, image, @@ -641,7 +737,7 @@ html2canvas.prototype.newElement = function(el,parentStack){ bounds.height - (borders[0].width + borders[2].width + parseInt(_.getCSS(el,'padding-top'),10) + parseInt(_.getCSS(el,'padding-bottom'),10)) //dh ); - }else{ + }else { this.log("Error loading :" + _.getAttr(el,'src')); } } @@ -717,7 +813,8 @@ html2canvas.prototype.getImages = function(el) { if (el.nodeType==1 || typeof el.nodeType == "undefined"){ var background_image = this.getCSS(el,'background-image'); - if (background_image && background_image != "1" && background_image != "none" && background_image.substring(0,7)!="-webkit" && background_image.substring(0,4)!="-moz"){ + if (background_image && background_image != "1" && background_image != "none" && background_image.substring(0,7)!="-webkit" && background_image.substring(0,3)!="-o-" && background_image.substring(0,4)!="-moz"){ + var src = this.backgroundImageUrl(background_image); this.preloadImage(src); } @@ -748,28 +845,83 @@ html2canvas.prototype.preloadImage = function(src){ if (this.getIndex(this.images,src)==-1){ - this.images.push(src); - - var img = new Image(); - // TODO remove jQuery dependancy - var _ = this; - $(img).load(function(){ - _.imagesLoaded++; - _.start(); + if (this.isSameOrigin(src)){ + this.images.push(src); + // console.log('a'+src); + var img = new Image(); + // TODO remove jQuery dependancy + var _ = this; + $(img).load(function(){ + _.imagesLoaded++; + _.start(); - }); - img.onerror = function(){ - _.images.splice(_.images.indexOf(img.src),2); - _.imagesLoaded++; - _.start(); + }); + img.onerror = function(){ + _.images.splice(_.images.indexOf(img.src),2); + // _.imagesLoaded++; + _.start(); + } + img.src = src; + this.images.push(img); + }else if (this.opts.proxyUrl){ + // console.log('b'+src); + this.images.push(src); + var img = new Image(); + this.proxyGetImage(src,img); + this.images.push(img); } - img.src = src; - this.images.push(img); - } } + +html2canvas.prototype.proxyGetImage = function(url,img){ + var _ = this; + var link = document.createElement("a"); + link.href = url; + url = link.href; // work around for pages with base href="" set + + + // todo remove jQuery dependency and enable xhr2 requests where available (no need for base64 / json) + $.ajax({ + data:{ + xhr2:false, + url:url + }, + url: this.opts.proxyUrl, + dataType: "jsonp", + success: function(a){ + + if (a.substring(0,6)=="error:"){ + _.images.splice(_.images.indexOf(url),2); + _.start(); + _.log('Proxy was unable to load '+url+' '+a); + }else{ + // document.createElement(a); + // console.log(img); + img.onload = function(){ + // console.log('w'+img.width); + _.imagesLoaded++; + _.start(); + + } + + img.src = a; + } + + + }, + error: function(){ + + _.images.splice(_.images.indexOf(url),2); + // _.imagesLoaded++; + _.start(); + } + + + }); + +} html2canvas.prototype.Renderer = function(queue){ var _ = this; @@ -795,25 +947,26 @@ html2canvas.prototype.Renderer = function(queue){ var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(script, s); - */ + if (typeof FlashCanvas != "undefined") { _.canvas = initCanvas(document.getElementById("testflash")); FlashCanvas.initElement(_.canvas); _.ctx = _.canvas.getContext("2d"); - // _.canvas = document.createElement('canvas'); + // _.canvas = document.createElement('canvas'); // _.log('Using Flashcanvas renderer'); _.canvasRenderer(queue); return false; } + */ break; - case "html": - // TODO add renderer - _log("Using HTML renderer"); - return false; - break; + case "html": + // TODO add renderer + _.log("Using HTML renderer"); + return false; + break; } @@ -822,7 +975,7 @@ html2canvas.prototype.Renderer = function(queue){ }); - this.log('No renderer chosen, rendering quit'); +// this.log('No renderer chosen, rendering quit'); return this; // this.canvasRenderer(queue); @@ -849,6 +1002,11 @@ html2canvas.prototype.Renderer = function(queue){ } +html2canvas.prototype.throttler = function(queue){ + + + }; + html2canvas.prototype.canvasRenderer = function(queue){ @@ -859,9 +1017,9 @@ html2canvas.prototype.canvasRenderer = function(queue){ - - this.canvas.width = $(document).width(); - this.canvas.height = $(document).height(); + + this.canvas.width = Math.max($(document).width(),this.opts.canvasWidth); + this.canvas.height = Math.max($(document).height(),this.opts.canvasHeight); this.ctx = this.canvas.getContext("2d"); @@ -885,6 +1043,9 @@ html2canvas.prototype.canvasRenderer = function(queue){ }else if(renderItem.name=="fillText"){ _.ctx.fillText(renderItem.arguments[0],renderItem.arguments[1],renderItem.arguments[2]); }else if(renderItem.name=="drawImage"){ + // console.log(renderItem); + // console.log(renderItem.arguments[0].width); + if (renderItem.arguments[8] > 0 && renderItem.arguments[7]){ _.ctx.drawImage( renderItem.arguments[0], renderItem.arguments[1], @@ -896,6 +1057,7 @@ html2canvas.prototype.canvasRenderer = function(queue){ renderItem.arguments[7], renderItem.arguments[8] ); + } }else{ this.log(renderItem); } @@ -1298,21 +1460,11 @@ html2canvas.prototype.parsing = function(el,stack){ // Simple logger -html2canvas.prototype.log = function(a){ - +html2canvas.prototype.log = function(a){ if (this.opts.logging){ - if (window.console && window.console.log){ - console.log(a); - }else{ - alert(a); - } - /* - if (typeof(window.console) != "undefined" && console.log){ - console.log(a); - }else{ - alert(a); - }*/ + this.opts.logger(a); + } } @@ -1464,3 +1616,12 @@ html2canvas.prototype.getIndex = function(array,src){ } } + + +html2canvas.prototype.isSameOrigin = function(url){ + var link = document.createElement("a"); + link.href = url; + + return ((link.protocol + link.hostname) == this.pageOrigin); +} + diff --git a/build/html2canvas.min.js b/build/html2canvas.min.js index 3c41bb4..416b2ff 100644 --- a/build/html2canvas.min.js +++ b/build/html2canvas.min.js @@ -1,45 +1,49 @@ /* - * html2canvas v0.20 + * html2canvas v0.25 * Copyright (c) 2011 Niklas von Hertzen. All rights reserved. * http://www.twitter.com/niklasvh * * Released under MIT License */ -function html2canvas(a,b){this.opts=this.extendObj(b||{},{logging:!1,ready:function(a){document.body.appendChild(a.canvas)},iframeDefault:"default",flashCanvasPath:"http://html2canvas.hertzen.com/external/flashcanvas/flashcanvas.js",renderViewport:!1,reorderZ:!0,throttle:!0,letterRendering:!1,renderOrder:"canvas flash html"});this.element=a;this.imagesLoaded=0;this.images=[];this.fontData=[];this.numDraws=0;this.contextStacks=[];this.ignoreElements="IFRAME|OBJECT|PARAM";this.needReorder=!1;this.blockElements= -/(BR|PARAM)/;this.ignoreRe=RegExp("("+this.ignoreElements+")");this.support={rangeBounds:!1};if(document.createRange){var c=document.createRange();if(c.getBoundingClientRect){var d=document.createElement("boundtest");d.style.height="123px";d.style.display="block";document.getElementsByTagName("body")[0].appendChild(d);c.selectNode(d);if(c.getBoundingClientRect().height==123)this.support.rangeBounds=!0;document.getElementsByTagName("body")[0].removeChild(d)}}this.init();return this} -html2canvas.prototype.init=function(){var a=this;this.log("Finding background images");this.getImages(this.element);this.log("Finding images");this.each(document.images,function(b,c){a.preloadImage(a.getAttr(c,"src"))});this.images.length==0&&this.start()}; -html2canvas.prototype.start=function(){if(this.images.length==0||this.imagesLoaded==this.images.length/2){this.log("Started parsing");this.bodyOverflow=document.getElementsByTagName("body")[0].style.overflow;document.getElementsByTagName("body")[0].style.overflow="hidden";var a=new this.storageContext($(document).width(),$(document).height());a.opacity=this.getCSS(this.element,"opacity");this.parseElement(this.element,this.newElement(this.element,a))}}; +function html2canvas(a,b){this.opts=this.extendObj(b||{},{logging:!1,ready:function(a){document.body.appendChild(a.canvas)},storageReady:function(a){a.Renderer(a.contextStacks)},iframeDefault:"default",flashCanvasPath:"http://html2canvas.hertzen.com/external/flashcanvas/flashcanvas.js",renderViewport:!1,reorderZ:!0,throttle:!0,letterRendering:!1,proxyUrl:null,logger:function(a){window.console&&window.console.log?window.console.log(a):alert(a)},canvasWidth:0,canvasHeight:0,renderOrder:"canvas flash html"}); +this.element=a;this.imagesLoaded=0;this.images=[];this.fontData=[];this.numDraws=0;this.contextStacks=[];this.ignoreElements="IFRAME|OBJECT|PARAM";this.needReorder=!1;this.blockElements=/(BR|PARAM)/;this.pageOrigin=window.location.protocol+window.location.hostname;this.ignoreRe=RegExp("("+this.ignoreElements+")");this.support={rangeBounds:!1};if(document.createRange){var d=document.createRange();if(d.getBoundingClientRect){var c=document.createElement("boundtest");c.style.height="123px";c.style.display= +"block";document.getElementsByTagName("body")[0].appendChild(c);d.selectNode(c);if(d.getBoundingClientRect().height==123)this.support.rangeBounds=!0;document.getElementsByTagName("body")[0].removeChild(c)}}this.init();return this} +html2canvas.prototype.init=function(){var a=this;this.log("Finding background-images");this.images.push("start");this.getImages(this.element);this.log("Finding images");this.each(this.element.ownerDocument.images,function(b,d){a.preloadImage(a.getAttr(d,"src"))});this.images.splice(0,1);this.images.length==0&&this.start()}; +html2canvas.prototype.start=function(){if(this.images.length==0||this.imagesLoaded==this.images.length/2){this.log("Finished loading "+this.imagesLoaded+" images, Started parsing");this.bodyOverflow=document.getElementsByTagName("body")[0].style.overflow;document.getElementsByTagName("body")[0].style.overflow="hidden";var a=new this.storageContext($(document).width(),$(document).height());a.opacity=this.getCSS(this.element,"opacity");this.parseElement(this.element,this.newElement(this.element,a))}}; html2canvas.prototype.stackingContext=function(a){this.canvas=document.createElement("canvas");this.canvas.width=a;this.canvas.height=a;if(this.canvas.getContext)this.ctx=this.canvas.getContext("2d");this.ctx.textBaseline="bottom";return this.ctx}; -html2canvas.prototype.storageContext=function(a,b){this.storage=[];this.width=a;this.height=b;this.fillRect=function(a,b,e,f){this.storage.push({type:"function",name:"fillRect",arguments:[a,b,e,f]})};this.drawImage=function(a,b,e,f,g,k,i,j,h){this.storage.push({type:"function",name:"drawImage",arguments:[a,b,e,f,g,k,i,j,h]})};this.fillText=function(a,b,e){this.storage.push({type:"function",name:"fillText",arguments:[a,b,e]})};return this}; +html2canvas.prototype.storageContext=function(a,b){this.storage=[];this.width=a;this.height=b;this.fillRect=function(a,b,e,f){this.storage.push({type:"function",name:"fillRect",arguments:[a,b,e,f]})};this.drawImage=function(a,b,e,f,g,j,h,k,i){this.storage.push({type:"function",name:"drawImage",arguments:[a,b,e,f,g,j,h,k,i]})};this.fillText=function(a,b,e){this.storage.push({type:"function",name:"fillText",arguments:[a,b,e]})};return this}; html2canvas.prototype.finish=function(){this.log("Finished rendering");document.getElementsByTagName("body")[0].style.overflow=this.bodyOverflow;this.opts.ready(this)}; -html2canvas.prototype.drawBackground=function(a,b,c){var d=this.getCSS(a,"background-image"),e=this.getCSS(a,"background-repeat");if(typeof d!="undefined"&&/^(1|none)$/.test(d)==!1){var d=this.backgroundImageUrl(d),f=this.loadImage(d),a=this.getBackgroundPosition(a,b,f);if(f)switch(e){case "repeat-x":this.drawbackgroundRepeatX(c,f,a,b.left,b.top,b.width,b.height);break;case "repeat-y":this.drawbackgroundRepeatY(c,f,a,b.left,b.top,b.width,b.height);break;case "no-repeat":this.drawBackgroundRepeat(c, -f,a.left+b.left,a.top+b.top,Math.min(b.width,f.width),Math.min(b.height,f.height),b.left,b.top);break;default:var g;a.top-=Math.ceil(a.top/f.height)*f.height;for(d=b.top+a.top;de+d?e+d-d:f.height,d0&&(a.top+=g),d=Math.floor(d+f.height)-g}else this.log("Error loading background:"+d)}}; -html2canvas.prototype.backgroundImageUrl=function(a){a.substr(0,5)=='url("'?(a=a.substr(5),a=a.substr(0,a.length-2)):(a=a.substr(4),a=a.substr(0,a.length-1));return a}; -html2canvas.prototype.getBackgroundPosition=function(a,b,c){var a=(this.getCSS(a,"backgroundPosition")||"0 0").split(" "),d,e;a.length==1&&(d=a,a=[],a[0]=d,a[1]=d);a[0].toString().indexOf("%")!=-1?(e=parseFloat(a[0])/100,d=b.width*e-c.width*e):d=parseInt(a[0],10);a[1].toString().indexOf("%")!=-1?(e=parseFloat(a[1])/100,b=b.height*e-c.height*e):b=parseInt(a[1],10);return{top:b,left:d}}; -html2canvas.prototype.drawbackgroundRepeatY=function(a,b,c,d,e,f,g){var k=Math.min(b.width,f),i;c.top-=Math.ceil(c.top/b.height)*b.height;for(i=e+c.top;ig+e?g+e-i:b.height,this.drawBackgroundRepeat(a,b,d+c.left,i,k,f,d,e),i=Math.floor(i+b.height)}; -html2canvas.prototype.drawbackgroundRepeatX=function(a,b,c,d,e,f,g){var g=Math.min(b.height,g),k,i;c.left-=Math.ceil(c.left/b.width)*b.width;for(i=d+c.left;if+d?f+d-i:b.width,this.drawBackgroundRepeat(a,b,i,e+c.top,k,g,d,e),i=Math.floor(i+b.width)};html2canvas.prototype.drawBackgroundRepeat=function(a,b,c,d,e,f,g,k){var i=0,j=0;g-c>0&&(i=g-c);k-d>0&&(j=k-d);this.drawImage(a,b,i,j,e-i,f-j,c+i,d+j,e-i,f-j)}; -html2canvas.prototype.getBorderData=function(a){var b=[],c=this;this.each(["top","right","bottom","left"],function(d,e){b.push({width:parseInt(c.getCSS(a,"border-"+e+"-width"),10),color:c.getCSS(a,"border-"+e+"-color")})});return b}; -html2canvas.prototype.drawBorders=function(a,b,c,d,e,f){var g=this.getBorderData(a),k=this;this.each(g,function(a,j){if(j.width>0){var h=c,l=d,m=e,n=f-g[2].width;switch(a){case 0:n=g[0].width;break;case 1:h=c+e-g[1].width;m=g[1].width;break;case 2:l=l+f-g[2].width;n=g[2].width;break;case 3:m=g[3].width}k.newRect(b,h,l,m,n,j.color)}});return g}; -html2canvas.prototype.newElement=function(a,b){var c=this.getBounds(a),d=c.left,e=c.top,f=c.width,g=c.height,k=this.getCSS(a,"background-color"),b=b||{},i=this.formatZ(this.getCSS(a,"zIndex"),this.getCSS(a,"position"),b.zIndex,a.parentNode),j=this.getCSS(a,"opacity"),h={ctx:new this.storageContext,zIndex:i,opacity:j*b.opacity},i=this.contextStacks.push(h),j=this.contextStacks[i-1].ctx;this.setContextVariable(j,"globalAlpha",h.opacity);h=this.drawBorders(a,j,c.left,c.top,c.width,c.height);this.ignoreRe.test(a.nodeName)&& -this.opts.iframeDefault!="transparent"&&(k=this.opts.iframeDefault=="default"?"#efefef":this.opts.iframeDefault);this.newRect(j,d+h[3].width,e+h[0].width,f-(h[1].width+h[3].width),g-(h[0].width+h[2].width),k);this.drawBackground(a,{left:d+h[3].width,top:e+h[0].width,width:f-(h[1].width+h[3].width),height:g-(h[0].width+h[2].width)},j);a.nodeName=="IMG"&&((f=this.loadImage(this.getAttr(a,"src")))?this.drawImage(j,f,0,0,f.width,f.height,d+parseInt(this.getCSS(a,"padding-left"),10)+h[3].width,e+parseInt(this.getCSS(a, -"padding-top"),10)+h[0].width,c.width-(h[1].width+h[3].width+parseInt(this.getCSS(a,"padding-left"),10)+parseInt(this.getCSS(a,"padding-right"),10)),c.height-(h[0].width+h[2].width+parseInt(this.getCSS(a,"padding-top"),10)+parseInt(this.getCSS(a,"padding-bottom"),10))):this.log("Error loading :"+this.getAttr(a,"src")));return this.contextStacks[i-1]};html2canvas.prototype.printText=function(a,b,c,d){this.trim(a).length>0&&(d.fillText(a,b,c),this.numDraws++)}; -html2canvas.prototype.newRect=function(a,b,c,d,e,f){f!="transparent"&&(this.setContextVariable(a,"fillStyle",f),a.fillRect(b,c,d,e),this.numDraws++)};html2canvas.prototype.drawImage=function(a,b,c,d,e,f,g,k,i,j){a.drawImage(b,c,d,e,f,g,k,i,j);this.numDraws++}; -html2canvas.prototype.getImages=function(a){var b=this;this.ignoreRe.test(a.nodeName)||this.each($(a).contents(),function(a,d){RegExp("("+this.ignoreElements+")").test(d.nodeName)||b.getImages(d)});if(a.nodeType==1||typeof a.nodeType=="undefined")(a=this.getCSS(a,"background-image"))&&a!="1"&&a!="none"&&a.substring(0,7)!="-webkit"&&a.substring(0,4)!="-moz"&&this.preloadImage(this.backgroundImageUrl(a))}; -html2canvas.prototype.loadImage=function(a){a=this.getIndex(this.images,a);return a!=-1?this.images[a+1]:!1};html2canvas.prototype.preloadImage=function(a){if(this.getIndex(this.images,a)==-1){this.images.push(a);var b=new Image,c=this;$(b).load(function(){c.imagesLoaded++;c.start()});b.onerror=function(){c.images.splice(c.images.indexOf(b.src),2);c.imagesLoaded++;c.start()};b.src=a;this.images.push(b)}}; -html2canvas.prototype.Renderer=function(a){var b=this;this.each(this.opts.renderOrder.split(" "),function(c,d){switch(d){case "canvas":if(b.canvas=document.createElement("canvas"),b.canvas.getContext)return b.canvasRenderer(a),!1}})}; -html2canvas.prototype.canvasRenderer=function(a){var b=this,a=this.sortQueue(a);this.canvas.width=$(document).width();this.canvas.height=$(document).height();this.ctx=this.canvas.getContext("2d");this.ctx.textBaseline="bottom";this.each(a,function(a,d){d.ctx.storage&&b.each(d.ctx.storage,function(a,c){switch(c.type){case "variable":b.ctx[c.name]=c.arguments;break;case "function":c.name=="fillRect"?b.ctx.fillRect(c.arguments[0],c.arguments[1],c.arguments[2],c.arguments[3]):c.name=="fillText"?b.ctx.fillText(c.arguments[0], -c.arguments[1],c.arguments[2]):c.name=="drawImage"?b.ctx.drawImage(c.arguments[0],c.arguments[1],c.arguments[2],c.arguments[3],c.arguments[4],c.arguments[5],c.arguments[6],c.arguments[7],c.arguments[8]):this.log(c)}})})}; -html2canvas.prototype.sortQueue=function(a){if(!this.opts.reorderZ||!this.needReorder)return a;var b=0;this.each(a,function(a,c){if(be.zIndex.length;)e.zIndex+="0";for(e.zIndex+=c;b+f+c.toString().length>e.zIndex.length;)e.zIndex+="0";c++});return a=a.sort(function(a,b){return a.zIndexb.zIndex?1:0})}; -html2canvas.prototype.setContextVariable=function(a,b,c){a.storage?a.storage.push({type:"variable",name:b,arguments:c}):a[b]=c}; -html2canvas.prototype.newText=function(a,b,c){var d=this.getCSS(a,"font-family"),e=this.getCSS(a,"font-size"),f=this.getCSS(a,"color"),g=this.getCSS(a,"font-weight"),k=this.getCSS(a,"font-style"),i=this.getCSS(a,"font-variant"),j=this.getCSS(a,"text-decoration"),h=this.getCSS(a,"text-align"),l=this.getCSS(a,"letter-spacing");b.nodeValue=this.textTransform(b.nodeValue,this.getCSS(a,"text-transform"));if(this.trim(b.nodeValue).length>0){switch(g){case "401":g="bold"}if(j!="none")var m=this.fontMetrics(d, -e);a=i+" "+g+" "+k+" "+e+" "+d;h=h.replace(["-webkit-auto"],["auto"]);h=this.opts.letterRendering==!1&&/^(left|right|justify|auto)$/.test(h)&&/^(normal|none)$/.test(l)?b.nodeValue.split(/(\b| )/):b.nodeValue.split("");this.setContextVariable(c,"fillStyle",f);this.setContextVariable(c,"font",a);for(l=0;l-1)return this.fontData[c+1];c=document.createElement("div");document.getElementsByTagName("body")[0].appendChild(c);$(c).css({visibility:"hidden",fontFamily:a,fontSize:b,margin:0,padding:0});var d=document.createElement("img");d.src="http://html2canvas.hertzen.com/images/8.jpg";d.width=1;d.height=1;$(d).css({margin:0,padding:0});var e=document.createElement("span");$(e).css({fontFamily:a,fontSize:b,margin:0, -padding:0});e.appendChild(document.createTextNode("Hidden Text"));c.appendChild(e);c.appendChild(d);var f=d.offsetTop-e.offsetTop+1;c.removeChild(e);c.appendChild(document.createTextNode("Hidden Text"));$(c).css("line-height","normal");$(d).css("vertical-align","super");d={baseline:f,lineWidth:1,middle:d.offsetTop-c.offsetTop+1};this.fontData.push(a+"-"+b);this.fontData.push(d);$(c).remove();return d}; -html2canvas.prototype.textTransform=function(a,b){switch(b){case "lowercase":return a.toLowerCase();case "capitalize":return a.replace(/(^|\s|:|-|\(|\))([a-z])/g,function(a,b,e){return b+e.toUpperCase()});case "uppercase":return a.toUpperCase();default:return a}};html2canvas.prototype.trim=function(a){return a.replace(/^\s*/,"").replace(/\s*$/,"")};html2canvas.prototype.parseElement=function(a,b){var c=this;this.each(a.children,function(a,e){c.parsing(e,b)});this.Renderer(this.contextStacks);this.finish()}; -html2canvas.prototype.parsing=function(a,b){if(this.getCSS(a,"display")!="none"&&this.getCSS(a,"visibility")!="hidden"){var c=this,b=this.newElement(a,b)||b,d=b.ctx;if(!this.ignoreRe.test(a.nodeName)){var e=this.contentsInZ(a);e.length==1?e[0].nodeType==1?this.parsing(e[0],b):e[0].nodeType==3&&this.newText(a,e[0],b.ctx):this.each(e,function(e,g){g.nodeType==1?c.parsing(g,b):g.nodeType==3&&c.newText(a,g,d)})}}};html2canvas.prototype.log=function(){}; -html2canvas.prototype.getBounds=function(a){window.scroll(0,0);if(a.getBoundingClientRect)return a=a.getBoundingClientRect(),a.top=a.top,a.left=a.left,a;else{var b=$(a).offset();return{left:b.left+parseInt(this.getCSS(a,"border-left-width"),10),top:b.top+parseInt(this.getCSS(a,"border-top-width"),10),width:$(a).innerWidth(),height:$(a).innerHeight()}}};html2canvas.prototype.each=function(a,b){for(var b=b||function(){},c=0;c0&&c>0){this.drawImage(d,f,g,j,c,e,h,k,c,e);break}default:a.top-=Math.ceil(a.top/f.height)*f.height;for(c=b.top+a.top;ce+c?e+c-c:f.height,c< +b.top?(g=b.top-c,c=b.top):g=0,this.drawbackgroundRepeatX(d,f,a,b.left,c,b.width,e),g>0&&(a.top+=g),c=Math.floor(c+f.height)-g}else this.log("Error loading background:"+c)}};html2canvas.prototype.backgroundImageUrl=function(a){a.substr(0,5)=='url("'?(a=a.substr(5),a=a.substr(0,a.length-2)):(a=a.substr(4),a=a.substr(0,a.length-1));return a}; +html2canvas.prototype.getBackgroundPosition=function(a,b,d){var c=(this.getCSS(a,"backgroundPosition")||"0 0").split(" "),e;c.length==1&&(a=c,c=[],c[0]=a,c[1]=a);c[0].toString().indexOf("%")!=-1?(e=parseFloat(c[0])/100,a=b.width*e-d.width*e):a=parseInt(c[0],10);c[1].toString().indexOf("%")!=-1?(e=parseFloat(c[1])/100,b=b.height*e-d.height*e):b=parseInt(c[1],10);d={};d.top=b;d.left=a;return d}; +html2canvas.prototype.drawbackgroundRepeatY=function(a,b,d,c,e,f,g){var j=Math.min(b.width,f),h;d.top-=Math.ceil(d.top/b.height)*b.height;for(h=e+d.top;hg+e?g+e-h:b.height,this.drawBackgroundRepeat(a,b,c+d.left,h,j,f,c,e),h=Math.floor(h+b.height)}; +html2canvas.prototype.drawbackgroundRepeatX=function(a,b,d,c,e,f,g){var g=Math.min(b.height,g),j,h;d.left-=Math.ceil(d.left/b.width)*b.width;for(h=c+d.left;hf+c?f+c-h:b.width,this.drawBackgroundRepeat(a,b,h,e+d.top,j,g,c,e),h=Math.floor(h+b.width)};html2canvas.prototype.drawBackgroundRepeat=function(a,b,d,c,e,f,g,j){var h=0,k=0;g-d>0&&(h=g-d);j-c>0&&(k=j-c);this.drawImage(a,b,h,k,e-h,f-k,d+h,c+k,e-h,f-k)}; +html2canvas.prototype.getBorderData=function(a){var b=[],d=this;this.each(["top","right","bottom","left"],function(c,e){b.push({width:parseInt(d.getCSS(a,"border-"+e+"-width"),10),color:d.getCSS(a,"border-"+e+"-color")})});return b}; +html2canvas.prototype.drawBorders=function(a,b,d,c,e,f){var g=this.getBorderData(a),j=this;this.each(g,function(a,k){if(k.width>0){var i=d,l=c,m=e,n=f-g[2].width;switch(a){case 0:n=g[0].width;break;case 1:i=d+e-g[1].width;m=g[1].width;break;case 2:l=l+f-g[2].width;n=g[2].width;break;case 3:m=g[3].width}j.newRect(b,i,l,m,n,k.color)}});return g}; +html2canvas.prototype.newElement=function(a,b){var d=this.getBounds(a),c=d.left,e=d.top,f=d.width,g=d.height,j=this.getCSS(a,"background-color"),b=b||{},h=this.formatZ(this.getCSS(a,"zIndex"),this.getCSS(a,"position"),b.zIndex,a.parentNode),k=this.getCSS(a,"opacity"),i={ctx:new this.storageContext,zIndex:h,opacity:k*b.opacity},h=this.contextStacks.push(i),k=this.contextStacks[h-1].ctx;this.setContextVariable(k,"globalAlpha",i.opacity);i=this.drawBorders(a,k,d.left,d.top,d.width,d.height);this.ignoreRe.test(a.nodeName)&& +this.opts.iframeDefault!="transparent"&&(j=this.opts.iframeDefault=="default"?"#efefef":this.opts.iframeDefault);this.newRect(k,c+i[3].width,e+i[0].width,f-(i[1].width+i[3].width),g-(i[0].width+i[2].width),j);this.drawBackground(a,{left:c+i[3].width,top:e+i[0].width,width:f-(i[1].width+i[3].width),height:g-(i[0].width+i[2].width)},k);a.nodeName=="IMG"&&((f=this.loadImage(this.getAttr(a,"src")))?this.drawImage(k,f,0,0,f.width,f.height,c+parseInt(this.getCSS(a,"padding-left"),10)+i[3].width,e+parseInt(this.getCSS(a, +"padding-top"),10)+i[0].width,d.width-(i[1].width+i[3].width+parseInt(this.getCSS(a,"padding-left"),10)+parseInt(this.getCSS(a,"padding-right"),10)),d.height-(i[0].width+i[2].width+parseInt(this.getCSS(a,"padding-top"),10)+parseInt(this.getCSS(a,"padding-bottom"),10))):this.log("Error loading :"+this.getAttr(a,"src")));return this.contextStacks[h-1]};html2canvas.prototype.printText=function(a,b,d,c){this.trim(a).length>0&&(c.fillText(a,b,d),this.numDraws++)}; +html2canvas.prototype.newRect=function(a,b,d,c,e,f){f!="transparent"&&(this.setContextVariable(a,"fillStyle",f),a.fillRect(b,d,c,e),this.numDraws++)};html2canvas.prototype.drawImage=function(a,b,d,c,e,f,g,j,h,k){a.drawImage(b,d,c,e,f,g,j,h,k);this.numDraws++}; +html2canvas.prototype.getImages=function(a){var b=this;this.ignoreRe.test(a.nodeName)||this.each($(a).contents(),function(a,c){RegExp("("+this.ignoreElements+")").test(c.nodeName)||b.getImages(c)});if(a.nodeType==1||typeof a.nodeType=="undefined")(a=this.getCSS(a,"background-image"))&&a!="1"&&a!="none"&&a.substring(0,7)!="-webkit"&&a.substring(0,3)!="-o-"&&a.substring(0,4)!="-moz"&&this.preloadImage(this.backgroundImageUrl(a))}; +html2canvas.prototype.loadImage=function(a){a=this.getIndex(this.images,a);return a!=-1?this.images[a+1]:!1};html2canvas.prototype.preloadImage=function(a){if(this.getIndex(this.images,a)==-1)if(this.isSameOrigin(a)){this.images.push(a);var b=new Image,d=this;$(b).load(function(){d.imagesLoaded++;d.start()});b.onerror=function(){d.images.splice(d.images.indexOf(b.src),2);d.start()};b.src=a;this.images.push(b)}else this.opts.proxyUrl&&(this.images.push(a),b=new Image,this.proxyGetImage(a,b),this.images.push(b))}; +html2canvas.prototype.proxyGetImage=function(a,b){var d=this,c=document.createElement("a");c.href=a;a=c.href;$.ajax({data:{xhr2:!1,url:a},url:this.opts.proxyUrl,dataType:"jsonp",success:function(c){c.substring(0,6)=="error:"?(d.images.splice(d.images.indexOf(a),2),d.start(),d.log("Proxy was unable to load "+a+" "+c)):(b.onload=function(){d.imagesLoaded++;d.start()},b.src=c)},error:function(){d.images.splice(d.images.indexOf(a),2);d.start()}})}; +html2canvas.prototype.Renderer=function(a){var b=this;this.log("Renderer initiated");this.each(this.opts.renderOrder.split(" "),function(d,c){switch(c){case "canvas":b.canvas=document.createElement("canvas");if(b.canvas.getContext)return b.canvasRenderer(a),b.log("Using canvas renderer"),!1;break;case "html":return b.log("Using HTML renderer"),!1}});return this};html2canvas.prototype.throttler=function(){}; +html2canvas.prototype.canvasRenderer=function(a){var b=this,a=this.sortQueue(a);this.canvas.width=Math.max($(document).width(),this.opts.canvasWidth);this.canvas.height=Math.max($(document).height(),this.opts.canvasHeight);this.ctx=this.canvas.getContext("2d");this.ctx.textBaseline="bottom";this.each(a,function(a,c){c.ctx.storage&&b.each(c.ctx.storage,function(a,c){switch(c.type){case "variable":b.ctx[c.name]=c.arguments;break;case "function":c.name=="fillRect"?b.ctx.fillRect(c.arguments[0],c.arguments[1], +c.arguments[2],c.arguments[3]):c.name=="fillText"?b.ctx.fillText(c.arguments[0],c.arguments[1],c.arguments[2]):c.name=="drawImage"?c.arguments[8]>0&&c.arguments[7]&&b.ctx.drawImage(c.arguments[0],c.arguments[1],c.arguments[2],c.arguments[3],c.arguments[4],c.arguments[5],c.arguments[6],c.arguments[7],c.arguments[8]):this.log(c)}})})}; +html2canvas.prototype.sortQueue=function(a){if(!this.opts.reorderZ||!this.needReorder)return a;var b=0;this.each(a,function(a,d){if(be.zIndex.length;)e.zIndex+="0";for(e.zIndex+=d;b+f+d.toString().length>e.zIndex.length;)e.zIndex+="0";d++});return a=a.sort(function(a,b){return a.zIndexb.zIndex?1:0})}; +html2canvas.prototype.setContextVariable=function(a,b,d){a.storage?a.storage.push({type:"variable",name:b,arguments:d}):a[b]=d}; +html2canvas.prototype.newText=function(a,b,d){var c=this.getCSS(a,"font-family"),e=this.getCSS(a,"font-size"),f=this.getCSS(a,"color"),g=this.getCSS(a,"font-weight"),j=this.getCSS(a,"font-style"),h=this.getCSS(a,"font-variant"),k=this.getCSS(a,"text-decoration"),i=this.getCSS(a,"text-align"),l=this.getCSS(a,"letter-spacing");b.nodeValue=this.textTransform(b.nodeValue,this.getCSS(a,"text-transform"));if(this.trim(b.nodeValue).length>0){switch(g){case 401:g="bold";break;case 400:g="normal"}if(k!="none")var m= +this.fontMetrics(c,e);a=h+" "+g+" "+j+" "+e+" "+c;i=i.replace(["-webkit-auto"],["auto"]);i=this.opts.letterRendering==!1&&/^(left|right|justify|auto)$/.test(i)&&/^(normal|none)$/.test(l)?b.nodeValue.split(/(\b| )/):b.nodeValue.split("");this.setContextVariable(d,"fillStyle",f);this.setContextVariable(d,"font",a);for(l=0;l-1)return this.fontData[d+1];d=document.createElement("div");document.getElementsByTagName("body")[0].appendChild(d);$(d).css({visibility:"hidden",fontFamily:a,fontSize:b,margin:0,padding:0});var c=document.createElement("img");c.src="http://html2canvas.hertzen.com/images/8.jpg";c.width=1;c.height=1;$(c).css({margin:0,padding:0});var e=document.createElement("span");$(e).css({fontFamily:a,fontSize:b,margin:0,padding:0}); +e.appendChild(document.createTextNode("Hidden Text"));d.appendChild(e);d.appendChild(c);var f=c.offsetTop-e.offsetTop+1;d.removeChild(e);d.appendChild(document.createTextNode("Hidden Text"));$(d).css("line-height","normal");$(c).css("vertical-align","super");c={baseline:f,lineWidth:1,middle:c.offsetTop-d.offsetTop+1};this.fontData.push(a+"-"+b);this.fontData.push(c);$(d).remove();return c}; +html2canvas.prototype.textTransform=function(a,b){switch(b){case "lowercase":return a.toLowerCase();case "capitalize":return a.replace(/(^|\s|:|-|\(|\))([a-z])/g,function(a,b,e){return b+e.toUpperCase()});case "uppercase":return a.toUpperCase();default:return a}};html2canvas.prototype.trim=function(a){return a.replace(/^\s*/,"").replace(/\s*$/,"")}; +html2canvas.prototype.parseElement=function(a,b){var d=this;this.each(a.children,function(a,e){d.parsing(e,b)});this.log("Render queue stored");this.opts.storageReady(this);this.finish()}; +html2canvas.prototype.parsing=function(a,b){if(this.getCSS(a,"display")!="none"&&this.getCSS(a,"visibility")!="hidden"){var d=this,b=this.newElement(a,b)||b,c=b.ctx;if(!this.ignoreRe.test(a.nodeName)){var e=this.contentsInZ(a);e.length==1?e[0].nodeType==1?this.parsing(e[0],b):e[0].nodeType==3&&this.newText(a,e[0],b.ctx):this.each(e,function(e,g){g.nodeType==1?d.parsing(g,b):g.nodeType==3&&d.newText(a,g,c)})}}};html2canvas.prototype.log=function(a){this.opts.logging&&this.opts.logger(a)}; +html2canvas.prototype.getBounds=function(a){window.scroll(0,0);if(a.getBoundingClientRect)return a=a.getBoundingClientRect(),a.top=a.top,a.left=a.left,a;else{var b=$(a).offset();return{left:b.left+parseInt(this.getCSS(a,"border-left-width"),10),top:b.top+parseInt(this.getCSS(a,"border-top-width"),10),width:$(a).innerWidth(),height:$(a).innerHeight()}}};html2canvas.prototype.each=function(a,b){for(var b=b||function(){},d=0;d + * html2canvas v0.25 * Copyright (c) 2011 Niklas von Hertzen. All rights reserved. * http://www.twitter.com/niklasvh * @@ -34,15 +34,16 @@ */ (function( $ ){ - $.fn.html2canvas = function() { + $.fn.html2canvas = function(options) { var date = new Date(); var message, timeoutTimer, timer = date.getTime(); - new html2canvas(this.get(0), { - logging: true, + var object = $.extend({},{ + logging: false, + proxyUrl: "http://html2canvas.appspot.com/", // running html2canvas-python proxy ready: function(renderer) { var finishTime = new Date(); @@ -79,7 +80,9 @@ }); } - }); + },options) + + new html2canvas(this.get(0), object); function throwMessage(msg,duration){ diff --git a/loading.gif b/loading.gif new file mode 100644 index 0000000000000000000000000000000000000000..7eca29038a50532be35b4beb18c08840154571ba GIT binary patch literal 8238 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 M*!1h~`(M}p0RjuIr~m)} literal 0 HcmV?d00001 diff --git a/readme.md b/readme.md index a4d446e..ebc541c 100644 --- a/readme.md +++ b/readme.md @@ -33,4 +33,4 @@ There are still a lot of CSS properties missing, including most CSS3 properties ### Examples ### -For more information and examples, please visit the homepage. \ No newline at end of file +For more information and examples, please visit the homepage or try the test console. \ No newline at end of file diff --git a/screenshots.html b/screenshots.html new file mode 100644 index 0000000..7bca272 --- /dev/null +++ b/screenshots.html @@ -0,0 +1,304 @@ + + + + JavaScript screenshot creator + + + + + + + + + + +
+

JavaScript screenshot creator

+ + +
+ + Tested with Google Chrome 12, Firefox 4 and Opera 12 +
+
+
+ + + + + +
+ +
+ + +
+
+ + +
+

Recommended (tested) pages:

+ + +
+ +
+
About
+ The whole screenshot is created with JavaScript. The only server interaction that is happening on this page is the proxy for loading the external pages/images into JSONP/CORS enabled page and onwards onto the JavaScript renderer script. + There are a lot of problems of loading external pages, even with a proxy, and as such many pages will not render at all. If you wish to try the script properly, I recommend you get a copy of the source from here instead. +
+
+ + + diff --git a/src/Background.js b/src/Background.js index 62044f8..9c0344b 100644 --- a/src/Background.js +++ b/src/Background.js @@ -6,8 +6,8 @@ html2canvas.prototype.drawBackground = function(el,bounds,ctx){ var background_image = this.getCSS(el,"background-image"); var background_repeat = this.getCSS(el,"background-repeat"); - if (typeof background_image != "undefined" && /^(1|none)$/.test(background_image)==false){ - + if (typeof background_image != "undefined" && /^(1|none)$/.test(background_image)==false && /^(-webkit|-moz|linear-gradient|-o-)/.test(background_image)==false){ + background_image = this.backgroundImageUrl(background_image); var image = this.loadImage(background_image); @@ -15,7 +15,6 @@ html2canvas.prototype.drawBackground = function(el,bounds,ctx){ var bgp = this.getBackgroundPosition(el,bounds,image), bgy; - if (image){ switch(background_repeat){ @@ -28,10 +27,70 @@ html2canvas.prototype.drawBackground = function(el,bounds,ctx){ break; case "no-repeat": - - this.drawBackgroundRepeat(ctx,image,bgp.left+bounds.left,bgp.top+bounds.top,Math.min(bounds.width,image.width),Math.min(bounds.height,image.height),bounds.left,bounds.top); - // ctx.drawImage(image,(bounds.left+bgp.left),(bounds.top+bgp.top)); - break; + /* + this.drawBackgroundRepeat( + ctx, + image, + bgp.left+bounds.left, // sx + bgp.top+bounds.top, // sy + Math.min(bounds.width,image.width), + Math.min(bounds.height,image.height), + bounds.left, + bounds.top + );*/ + + + // console.log($(el).css('background-image')); + var bgw = bounds.width-bgp.left, + bgh = bounds.height-bgp.top, + bgsx = bgp.left, + bgsy = bgp.top, + bgdx = bgp.left+bounds.left, + bgdy = bgp.top+bounds.top; + + // + // bgw = Math.min(bgw,image.width); + // bgh = Math.min(bgh,image.height); + + if (bgsx<0){ + bgsx = Math.abs(bgsx); + bgdx += bgsx; + bgw = Math.min(bounds.width,image.width-bgsx); + }else{ + bgw = Math.min(bgw,image.width); + bgsx = 0; + } + + if (bgsy<0){ + bgsy = Math.abs(bgsy); + bgdy += bgsy; + // bgh = bgh-bgsy; + bgh = Math.min(bounds.height,image.height-bgsy); + }else{ + bgh = Math.min(bgh,image.height); + bgsy = 0; + } + + + // bgh = Math.abs(bgh); + // bgw = Math.abs(bgw); + if (bgh>0 && bgw > 0){ + this.drawImage( + ctx, + image, + bgsx, // source X : 0 + bgsy, // source Y : 1695 + bgw, // source Width : 18 + bgh, // source Height : 1677 + bgdx, // destination X :906 + bgdy, // destination Y : 1020 + bgw, // destination width : 18 + bgh // destination height : 1677 + ); + + // ctx.drawImage(image,(bounds.left+bgp.left),(bounds.top+bgp.top)); + break; + } default: var height, @@ -96,6 +155,8 @@ html2canvas.prototype.backgroundImageUrl = function(src){ src = src.substr(4); src = src.substr(0,src.length-1); } + + return src; } @@ -106,8 +167,9 @@ html2canvas.prototype.backgroundImageUrl = function(src){ html2canvas.prototype.getBackgroundPosition = function(el,bounds,image){ var bgpos = this.getCSS(el,"backgroundPosition") || "0 0"; + // var bgpos = $(el).css("backgroundPosition") || "0 0"; var bgposition = bgpos.split(" "), - top, + topPos, left, percentage; @@ -119,6 +181,8 @@ html2canvas.prototype.getBackgroundPosition = function(el,bounds,image){ bgposition[1] = val; } + + if (bgposition[0].toString().indexOf("%")!=-1){ percentage = (parseFloat(bgposition[0])/100); @@ -131,15 +195,29 @@ html2canvas.prototype.getBackgroundPosition = function(el,bounds,image){ if (bgposition[1].toString().indexOf("%")!=-1){ percentage = (parseFloat(bgposition[1])/100); - top = ((bounds.height * percentage)-(image.height*percentage)); + topPos = ((bounds.height * percentage)-(image.height*percentage)); }else{ - top = parseInt(bgposition[1],10); + + topPos = parseInt(bgposition[1],10); + } + + + + + var returnObj = {} + /* + "top": topPos, + "left": left + };*/ + + + returnObj.top = topPos; + returnObj.left = left; + + - return { - top: top, - left: left - }; + return returnObj; } diff --git a/src/Core.js b/src/Core.js index 7cb41c5..f564808 100644 --- a/src/Core.js +++ b/src/Core.js @@ -22,9 +22,19 @@ function html2canvas(el, userOptions) { reorderZ: true, throttle:true, letterRendering:false, + proxyUrl: null, + logger: function(a){ + if (window.console && window.console.log){ + window.console.log(a); + }else{ + alert(a); + } + }, + canvasWidth:0, + canvasHeight:0, renderOrder: "canvas flash html" }); - + this.element = el; var imageLoaded, @@ -41,6 +51,7 @@ function html2canvas(el, userOptions) { this.ignoreElements = "IFRAME|OBJECT|PARAM"; this.needReorder = false; this.blockElements = new RegExp("(BR|PARAM)"); + this.pageOrigin = window.location.protocol + window.location.hostname; this.ignoreRe = new RegExp("("+this.ignoreElements+")"); @@ -102,16 +113,22 @@ html2canvas.prototype.init = function(){ this.canvas = this.ctx.canvas; */ - this.log('Finding background images'); + this.log('Finding background-images'); + this.images.push('start'); + this.getImages(this.element); this.log('Finding images'); - this.each(document.images,function(i,e){ + // console.log(this.element.ownerDocument); + + + + this.each(this.element.ownerDocument.images,function(i,e){ _.preloadImage(_.getAttr(e,'src')); }); - - + this.images.splice(0,1); + // console.log(this.images); if (this.images.length == 0){ this.start(); } @@ -124,9 +141,10 @@ html2canvas.prototype.init = function(){ */ html2canvas.prototype.start = function(){ - + // console.log(this.images); if (this.images.length == 0 || this.imagesLoaded==this.images.length/2){ - this.log('Started parsing'); + + this.log('Finished loading '+this.imagesLoaded+' images, Started parsing'); this.bodyOverflow = document.getElementsByTagName('body')[0].style.overflow; document.getElementsByTagName('body')[0].style.overflow = "hidden"; var rootStack = new this.storageContext($(document).width(),$(document).height()); diff --git a/src/Draw.js b/src/Draw.js index 613e9fb..39f72a1 100644 --- a/src/Draw.js +++ b/src/Draw.js @@ -72,7 +72,7 @@ html2canvas.prototype.newElement = function(el,parentStack){ if (el.nodeName=="IMG"){ image = _.loadImage(_.getAttr(el,'src')); if (image){ - + // console.log(image.width); this.drawImage( ctx, image, @@ -86,7 +86,7 @@ html2canvas.prototype.newElement = function(el,parentStack){ bounds.height - (borders[0].width + borders[2].width + parseInt(_.getCSS(el,'padding-top'),10) + parseInt(_.getCSS(el,'padding-bottom'),10)) //dh ); - }else{ + }else { this.log("Error loading :" + _.getAttr(el,'src')); } } diff --git a/src/Images.js b/src/Images.js index 2aee524..83a8206 100644 --- a/src/Images.js +++ b/src/Images.js @@ -18,7 +18,8 @@ html2canvas.prototype.getImages = function(el) { if (el.nodeType==1 || typeof el.nodeType == "undefined"){ var background_image = this.getCSS(el,'background-image'); - if (background_image && background_image != "1" && background_image != "none" && background_image.substring(0,7)!="-webkit" && background_image.substring(0,4)!="-moz"){ + if (background_image && background_image != "1" && background_image != "none" && background_image.substring(0,7)!="-webkit" && background_image.substring(0,3)!="-o-" && background_image.substring(0,4)!="-moz"){ + var src = this.backgroundImageUrl(background_image); this.preloadImage(src); } @@ -49,25 +50,80 @@ html2canvas.prototype.preloadImage = function(src){ if (this.getIndex(this.images,src)==-1){ - this.images.push(src); - - var img = new Image(); - // TODO remove jQuery dependancy - var _ = this; - $(img).load(function(){ - _.imagesLoaded++; - _.start(); + if (this.isSameOrigin(src)){ + this.images.push(src); + // console.log('a'+src); + var img = new Image(); + // TODO remove jQuery dependancy + var _ = this; + $(img).load(function(){ + _.imagesLoaded++; + _.start(); - }); - img.onerror = function(){ - _.images.splice(_.images.indexOf(img.src),2); - _.imagesLoaded++; - _.start(); + }); + img.onerror = function(){ + _.images.splice(_.images.indexOf(img.src),2); + // _.imagesLoaded++; + _.start(); + } + img.src = src; + this.images.push(img); + }else if (this.opts.proxyUrl){ + // console.log('b'+src); + this.images.push(src); + var img = new Image(); + this.proxyGetImage(src,img); + this.images.push(img); } - img.src = src; - this.images.push(img); - } } - \ No newline at end of file + +html2canvas.prototype.proxyGetImage = function(url,img){ + var _ = this; + + var link = document.createElement("a"); + link.href = url; + url = link.href; // work around for pages with base href="" set + + + // todo remove jQuery dependency and enable xhr2 requests where available (no need for base64 / json) + $.ajax({ + data:{ + xhr2:false, + url:url + }, + url: this.opts.proxyUrl, + dataType: "jsonp", + success: function(a){ + + if (a.substring(0,6)=="error:"){ + _.images.splice(_.images.indexOf(url),2); + _.start(); + _.log('Proxy was unable to load '+url+' '+a); + }else{ + // document.createElement(a); + // console.log(img); + img.onload = function(){ + // console.log('w'+img.width); + _.imagesLoaded++; + _.start(); + + } + + img.src = a; + } + + + }, + error: function(){ + + _.images.splice(_.images.indexOf(url),2); + // _.imagesLoaded++; + _.start(); + } + + + }); + +} \ No newline at end of file diff --git a/src/LICENSE b/src/LICENSE index 3f8d405..4161c97 100644 --- a/src/LICENSE +++ b/src/LICENSE @@ -1,5 +1,5 @@ /* - * html2canvas v0.20 + * html2canvas v0.25 * Copyright (c) 2011 Niklas von Hertzen. All rights reserved. * http://www.twitter.com/niklasvh * diff --git a/src/Renderer.js b/src/Renderer.js index b3d562e..9c9057a 100644 --- a/src/Renderer.js +++ b/src/Renderer.js @@ -23,25 +23,26 @@ html2canvas.prototype.Renderer = function(queue){ var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(script, s); - */ + if (typeof FlashCanvas != "undefined") { _.canvas = initCanvas(document.getElementById("testflash")); FlashCanvas.initElement(_.canvas); _.ctx = _.canvas.getContext("2d"); - // _.canvas = document.createElement('canvas'); + // _.canvas = document.createElement('canvas'); // _.log('Using Flashcanvas renderer'); _.canvasRenderer(queue); return false; } + */ break; - case "html": - // TODO add renderer - _log("Using HTML renderer"); - return false; - break; + case "html": + // TODO add renderer + _.log("Using HTML renderer"); + return false; + break; } @@ -50,7 +51,7 @@ html2canvas.prototype.Renderer = function(queue){ }); - this.log('No renderer chosen, rendering quit'); +// this.log('No renderer chosen, rendering quit'); return this; // this.canvasRenderer(queue); @@ -77,6 +78,11 @@ html2canvas.prototype.Renderer = function(queue){ } +html2canvas.prototype.throttler = function(queue){ + + + }; + html2canvas.prototype.canvasRenderer = function(queue){ @@ -87,9 +93,9 @@ html2canvas.prototype.canvasRenderer = function(queue){ - - this.canvas.width = $(document).width(); - this.canvas.height = $(document).height(); + + this.canvas.width = Math.max($(document).width(),this.opts.canvasWidth); + this.canvas.height = Math.max($(document).height(),this.opts.canvasHeight); this.ctx = this.canvas.getContext("2d"); @@ -113,6 +119,9 @@ html2canvas.prototype.canvasRenderer = function(queue){ }else if(renderItem.name=="fillText"){ _.ctx.fillText(renderItem.arguments[0],renderItem.arguments[1],renderItem.arguments[2]); }else if(renderItem.name=="drawImage"){ + // console.log(renderItem); + // console.log(renderItem.arguments[0].width); + if (renderItem.arguments[8] > 0 && renderItem.arguments[7]){ _.ctx.drawImage( renderItem.arguments[0], renderItem.arguments[1], @@ -124,6 +133,7 @@ html2canvas.prototype.canvasRenderer = function(queue){ renderItem.arguments[7], renderItem.arguments[8] ); + } }else{ this.log(renderItem); } diff --git a/src/Util.js b/src/Util.js index 98d669a..b749192 100644 --- a/src/Util.js +++ b/src/Util.js @@ -1,20 +1,10 @@ // Simple logger -html2canvas.prototype.log = function(a){ - +html2canvas.prototype.log = function(a){ if (this.opts.logging){ - if (window.console && window.console.log){ - console.log(a); - }else{ - alert(a); - } - /* - if (typeof(window.console) != "undefined" && console.log){ - console.log(a); - }else{ - alert(a); - }*/ + this.opts.logger(a); + } } @@ -165,4 +155,12 @@ html2canvas.prototype.getIndex = function(array,src){ return -1; } -} \ No newline at end of file +} + + +html2canvas.prototype.isSameOrigin = function(url){ + var link = document.createElement("a"); + link.href = url; + + return ((link.protocol + link.hostname) == this.pageOrigin); +} diff --git a/src/plugins/jquery.plugin.html2canvas.js b/src/plugins/jquery.plugin.html2canvas.js index 640ebd1..09730e3 100644 --- a/src/plugins/jquery.plugin.html2canvas.js +++ b/src/plugins/jquery.plugin.html2canvas.js @@ -4,15 +4,16 @@ */ (function( $ ){ - $.fn.html2canvas = function() { + $.fn.html2canvas = function(options) { var date = new Date(); var message, timeoutTimer, timer = date.getTime(); - new html2canvas(this.get(0), { - logging: true, + var object = $.extend({},{ + logging: false, + proxyUrl: "http://html2canvas.appspot.com/", // running html2canvas-python proxy ready: function(renderer) { var finishTime = new Date(); @@ -49,7 +50,9 @@ }); } - }); + },options) + + new html2canvas(this.get(0), object); function throwMessage(msg,duration){ diff --git a/tests/proxy.html b/tests/proxy.html new file mode 100644 index 0000000..db66c1c --- /dev/null +++ b/tests/proxy.html @@ -0,0 +1,27 @@ + + + + External content tests + + + + + + + + + + + +

External image

+ + +

External image (using <base> href)

+ + + +