fixed IE 9 text issues

This commit is contained in:
Niklas von Hertzen 2011-08-11 16:19:42 +03:00
parent be241066ce
commit 6fe937eb66
4 changed files with 23 additions and 13 deletions

View File

@ -1489,8 +1489,13 @@ html2canvas.prototype.newText = function(el,textNode,stack,form){
var oldTextNode = textNode; var oldTextNode = textNode;
for(var c=0;c<renderList.length;c++){ for(var c=0;c<renderList.length;c++){
// IE 9 bug
if (typeof oldTextNode.nodeValue != "string"){
continue;
}
// TODO only do the splitting for non-range prints // TODO only do the splitting for non-range prints
var newTextNode = oldTextNode.splitText(renderList[c].length); var newTextNode = oldTextNode.splitText(renderList[c].length);
if (text_decoration!="none" || this.trim(oldTextNode.nodeValue).length != 0){ if (text_decoration!="none" || this.trim(oldTextNode.nodeValue).length != 0){
@ -1514,7 +1519,7 @@ html2canvas.prototype.newText = function(el,textNode,stack,form){
} }
}else{ }else{
// it isn't supported, so let's wrap it inside an element instead and the bounds there // it isn't supported, so let's wrap it inside an element instead and the bounds there
var parent = oldTextNode.parentNode; var parent = oldTextNode.parentNode;
var wrapElement = document.createElement('wrapper'); var wrapElement = document.createElement('wrapper');
var backupText = oldTextNode.cloneNode(true); var backupText = oldTextNode.cloneNode(true);
@ -1522,7 +1527,6 @@ html2canvas.prototype.newText = function(el,textNode,stack,form){
parent.replaceChild(wrapElement,oldTextNode); parent.replaceChild(wrapElement,oldTextNode);
var bounds = this.getBounds(wrapElement); var bounds = this.getBounds(wrapElement);
parent.replaceChild(backupText,wrapElement); parent.replaceChild(backupText,wrapElement);
} }
@ -1778,6 +1782,7 @@ html2canvas.prototype.getBounds = function(el){
// need to create new object, as clientrect bounds can't be modified, thanks pufuwozu // need to create new object, as clientrect bounds can't be modified, thanks pufuwozu
// TODO add scroll position to bounds, so no scrolling of window necessary // TODO add scroll position to bounds, so no scrolling of window necessary
bounds.top = clientRect.top; bounds.top = clientRect.top;
bounds.bottom = clientRect.bottom || (clientRect.top + clientRect.height);
bounds.left = clientRect.left; bounds.left = clientRect.left;
bounds.width = clientRect.width; bounds.width = clientRect.width;
bounds.height = clientRect.height; bounds.height = clientRect.height;

View File

@ -37,15 +37,15 @@ html2canvas.prototype.canvasRenderContext=function(a,b){b.textBaseline="bottom";
e.arguments[8]>0&&e.arguments[7]&&b.drawImage(e.arguments[0],e.arguments[1],e.arguments[2],e.arguments[3],e.arguments[4],e.arguments[5],e.arguments[6],e.arguments[7],e.arguments[8]):c.log(e)}});a.clip&&b.restore()};html2canvas.prototype.canvasRenderStorage=function(a,b){for(;0<a.length;){var c=a.splice(0,1)[0];c.canvasPosition=c.canvasPosition||{};this.canvasRenderContext(c,b)}}; e.arguments[8]>0&&e.arguments[7]&&b.drawImage(e.arguments[0],e.arguments[1],e.arguments[2],e.arguments[3],e.arguments[4],e.arguments[5],e.arguments[6],e.arguments[7],e.arguments[8]):c.log(e)}});a.clip&&b.restore()};html2canvas.prototype.canvasRenderStorage=function(a,b){for(;0<a.length;){var c=a.splice(0,1)[0];c.canvasPosition=c.canvasPosition||{};this.canvasRenderContext(c,b)}};
html2canvas.prototype.canvasRenderer=function(a){this.sortZ(this.zStack);a=this.queue;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.canvasRenderStorage(a,this.ctx)};html2canvas.prototype.setContextVariable=function(a,b,c){a.storage?a.storage.push({type:"variable",name:b,arguments:c}):a[b]=c}; html2canvas.prototype.canvasRenderer=function(a){this.sortZ(this.zStack);a=this.queue;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.canvasRenderStorage(a,this.ctx)};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 c=c.ctx,d=this.getCSS(a,"font-family"),e=this.getCSS(a,"font-size"),f=this.getCSS(a,"color"),g=this.getCSS(a,"font-weight"),i=this.getCSS(a,"font-style"),h=this.getCSS(a,"font-variant"),j=this.getCSS(a,"text-decoration"),l=this.getCSS(a,"text-align"),m=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(j!= html2canvas.prototype.newText=function(a,b,c){var c=c.ctx,d=this.getCSS(a,"font-family"),e=this.getCSS(a,"font-size"),f=this.getCSS(a,"color"),g=this.getCSS(a,"font-weight"),i=this.getCSS(a,"font-style"),h=this.getCSS(a,"font-variant"),j=this.getCSS(a,"text-decoration"),l=this.getCSS(a,"text-align"),m=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(j!=
"none")var k=this.fontMetrics(d,e);d=h+" "+g+" "+i+" "+e+" "+d;l=l.replace(["-webkit-auto"],["auto"]);a=this.opts.letterRendering==!1&&/^(left|right|justify|auto)$/.test(l)&&/^(normal|none)$/.test(m)?b.nodeValue.split(/(\b| )/):b.nodeValue.split("");this.setContextVariable(c,"fillStyle",f);this.setContextVariable(c,"font",d);for(l=0;l<a.length;l++){m=b.splitText(a[l].length);if(j!="none"||this.trim(b.nodeValue).length!=0)switch(this.support.rangeBounds?(document.createRange?(d=document.createRange(), "none")var k=this.fontMetrics(d,e);d=h+" "+g+" "+i+" "+e+" "+d;l=l.replace(["-webkit-auto"],["auto"]);a=this.opts.letterRendering==!1&&/^(left|right|justify|auto)$/.test(l)&&/^(normal|none)$/.test(m)?b.nodeValue.split(/(\b| )/):b.nodeValue.split("");this.setContextVariable(c,"fillStyle",f);this.setContextVariable(c,"font",d);for(l=0;l<a.length;l++)if(typeof b.nodeValue=="string"){m=b.splitText(a[l].length);if(j!="none"||this.trim(b.nodeValue).length!=0)switch(this.support.rangeBounds?(document.createRange?
d.selectNode(b)):d=document.body.createTextRange(),d=d.getBoundingClientRect()?d.getBoundingClientRect():{}):(e=b.parentNode,g=document.createElement("wrapper"),i=b.cloneNode(!0),g.appendChild(b.cloneNode(!0)),e.replaceChild(g,b),d=this.getBounds(g),e.replaceChild(i,g)),this.printText(b.nodeValue,d.left,d.bottom,c),j){case "underline":this.newRect(c,d.left,Math.round(d.top+k.baseline+k.lineWidth),d.width,1,f);break;case "overline":this.newRect(c,d.left,d.top,d.width,1,f);break;case "line-through":this.newRect(c, (d=document.createRange(),d.selectNode(b)):d=document.body.createTextRange(),d=d.getBoundingClientRect()?d.getBoundingClientRect():{}):(e=b.parentNode,g=document.createElement("wrapper"),i=b.cloneNode(!0),g.appendChild(b.cloneNode(!0)),e.replaceChild(g,b),d=this.getBounds(g),e.replaceChild(i,g)),this.printText(b.nodeValue,d.left,d.bottom,c),j){case "underline":this.newRect(c,d.left,Math.round(d.top+k.baseline+k.lineWidth),d.width,1,f);break;case "overline":this.newRect(c,d.left,d.top,d.width,1,f);
d.left,Math.ceil(d.top+k.middle+k.lineWidth),d.width,1,f)}b=m}}}; break;case "line-through":this.newRect(c,d.left,Math.ceil(d.top+k.middle+k.lineWidth),d.width,1,f)}b=m}}};
html2canvas.prototype.fontMetrics=function(a,b){var c=this.fontData.indexOf(a+"-"+b);if(c>-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, html2canvas.prototype.fontMetrics=function(a,b){var c=this.fontData.indexOf(a+"-"+b);if(c>-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}; 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.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.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 c=this,b=this.newElement(a,b)||b;this.ignoreRe.test(a.nodeName)||this.each(this.contentsInZ(a),function(d,e){e.nodeType==1?c.parsing(e,b):e.nodeType==3&&c.newText(a,e,b)})}}; html2canvas.prototype.parseElement=function(a,b){var c=this;this.each(a.children,function(a,e){c.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 c=this,b=this.newElement(a,b)||b;this.ignoreRe.test(a.nodeName)||this.each(this.contentsInZ(a),function(d,e){e.nodeType==1?c.parsing(e,b):e.nodeType==3&&c.newText(a,e,b)})}};
html2canvas.prototype.log=function(a){this.opts.logging&&this.opts.logger(a)};html2canvas.prototype.withinBounds=function(a,b){return!a?!0:(a.left<=b.left||b.left+b.width<a.left)&&(a.top<=b.top||b.top+b.height<a.top)};html2canvas.prototype.clipBounds=function(a,b){var c=Math.max(a.left,b.left),d=Math.max(a.top,b.top);return{left:c,top:d,width:Math.min(a.left+a.width,b.left+b.width)-c,height:Math.min(a.top+a.height,b.top+b.height)-d}}; html2canvas.prototype.log=function(a){this.opts.logging&&this.opts.logger(a)};html2canvas.prototype.withinBounds=function(a,b){return!a?!0:(a.left<=b.left||b.left+b.width<a.left)&&(a.top<=b.top||b.top+b.height<a.top)};html2canvas.prototype.clipBounds=function(a,b){var c=Math.max(a.left,b.left),d=Math.max(a.top,b.top);return{left:c,top:d,width:Math.min(a.left+a.width,b.left+b.width)-c,height:Math.min(a.top+a.height,b.top+b.height)-d}};
html2canvas.prototype.getBounds=function(a){window.scroll(0,0);if(a.getBoundingClientRect){var a=a.getBoundingClientRect(),b={};b.top=a.top;b.left=a.left;b.width=a.width;b.height=a.height;return b}else return b=$(a).offset(),{left:b.left+this.getCSS(a,"border-left-width",!0),top:b.top+this.getCSS(a,"border-top-width",!0),width:$(a).innerWidth(),height:$(a).innerHeight()}};html2canvas.prototype.each=function(a,b){for(var b=b||function(){},c=0;c<a.length;c++)if(b(c,a[c])===!1)break}; html2canvas.prototype.getBounds=function(a){window.scroll(0,0);if(a.getBoundingClientRect){var a=a.getBoundingClientRect(),b={};b.top=a.top;b.bottom=a.bottom||a.top+a.height;b.left=a.left;b.width=a.width;b.height=a.height;return b}else return b=$(a).offset(),{left:b.left+this.getCSS(a,"border-left-width",!0),top:b.top+this.getCSS(a,"border-top-width",!0),width:$(a).innerWidth(),height:$(a).innerHeight()}};
html2canvas.prototype.contentsInZ=function(a){return $(a).contents()};html2canvas.prototype.getAttr=function(a,b){return a.getAttribute(b)};html2canvas.prototype.extendObj=function(a,b){for(var c in a)b[c]=a[c];return b};html2canvas.prototype.zContext=function(a){return{zindex:a,children:[]}};html2canvas.prototype.setZ=function(a,b,c){return!c?this.zStack=new this.zContext(0):a!="auto"?(this.needReorder=!0,a=new this.zContext(a),c.children.push(a),a):c}; html2canvas.prototype.each=function(a,b){for(var b=b||function(){},c=0;c<a.length;c++)if(b(c,a[c])===!1)break};html2canvas.prototype.contentsInZ=function(a){return $(a).contents()};html2canvas.prototype.getAttr=function(a,b){return a.getAttribute(b)};html2canvas.prototype.extendObj=function(a,b){for(var c in a)b[c]=a[c];return b};html2canvas.prototype.zContext=function(a){return{zindex:a,children:[]}};
html2canvas.prototype.sortZ=function(a){var b=[],c=[],d=this;this.each(a.children,function(a,f){f.children&&f.children.length>0?(b.push(f),c.push(f.zindex)):d.queue.push(f)});c.sort(function(a,b){return a-b});this.each(c,function(a,c){for(var g=0;g<=b.length;g++)if(b[g].zindex==c){g=b.splice(g,1);d.sortZ(g[0]);break}})};html2canvas.prototype.getContents=function(a){return a.nodeName=="iframe"?a.contentDocument||a.contentWindow.document:a.childNodes}; html2canvas.prototype.setZ=function(a,b,c){return!c?this.zStack=new this.zContext(0):a!="auto"?(this.needReorder=!0,a=new this.zContext(a),c.children.push(a),a):c};html2canvas.prototype.sortZ=function(a){var b=[],c=[],d=this;this.each(a.children,function(a,f){f.children&&f.children.length>0?(b.push(f),c.push(f.zindex)):d.queue.push(f)});c.sort(function(a,b){return a-b});this.each(c,function(a,c){for(var g=0;g<=b.length;g++)if(b[g].zindex==c){g=b.splice(g,1);d.sortZ(g[0]);break}})};
html2canvas.prototype.getCSS=function(a,b,c){return c?parseInt($(a).css(b),10):$(a).css(b)};html2canvas.prototype.getIndex=function(a,b){if(a.indexOf)return a.indexOf(b);else{for(var c=0;c<a.length;c++)if(this[c]==b)return c;return-1}};html2canvas.prototype.isSameOrigin=function(a){var b=document.createElement("a");b.href=a;return b.protocol+b.host==this.pageOrigin}; html2canvas.prototype.getContents=function(a){return a.nodeName=="iframe"?a.contentDocument||a.contentWindow.document:a.childNodes};html2canvas.prototype.getCSS=function(a,b,c){return c?parseInt($(a).css(b),10):$(a).css(b)};html2canvas.prototype.getIndex=function(a,b){if(a.indexOf)return a.indexOf(b);else{for(var c=0;c<a.length;c++)if(this[c]==b)return c;return-1}};html2canvas.prototype.isSameOrigin=function(a){var b=document.createElement("a");b.href=a;return b.protocol+b.host==this.pageOrigin};

View File

@ -74,8 +74,13 @@ html2canvas.prototype.newText = function(el,textNode,stack,form){
var oldTextNode = textNode; var oldTextNode = textNode;
for(var c=0;c<renderList.length;c++){ for(var c=0;c<renderList.length;c++){
// IE 9 bug
if (typeof oldTextNode.nodeValue != "string"){
continue;
}
// TODO only do the splitting for non-range prints // TODO only do the splitting for non-range prints
var newTextNode = oldTextNode.splitText(renderList[c].length); var newTextNode = oldTextNode.splitText(renderList[c].length);
if (text_decoration!="none" || this.trim(oldTextNode.nodeValue).length != 0){ if (text_decoration!="none" || this.trim(oldTextNode.nodeValue).length != 0){
@ -99,7 +104,7 @@ html2canvas.prototype.newText = function(el,textNode,stack,form){
} }
}else{ }else{
// it isn't supported, so let's wrap it inside an element instead and the bounds there // it isn't supported, so let's wrap it inside an element instead and the bounds there
var parent = oldTextNode.parentNode; var parent = oldTextNode.parentNode;
var wrapElement = document.createElement('wrapper'); var wrapElement = document.createElement('wrapper');
var backupText = oldTextNode.cloneNode(true); var backupText = oldTextNode.cloneNode(true);
@ -107,7 +112,6 @@ html2canvas.prototype.newText = function(el,textNode,stack,form){
parent.replaceChild(wrapElement,oldTextNode); parent.replaceChild(wrapElement,oldTextNode);
var bounds = this.getBounds(wrapElement); var bounds = this.getBounds(wrapElement);
parent.replaceChild(backupText,wrapElement); parent.replaceChild(backupText,wrapElement);
} }

View File

@ -52,6 +52,7 @@ html2canvas.prototype.getBounds = function(el){
// need to create new object, as clientrect bounds can't be modified, thanks pufuwozu // need to create new object, as clientrect bounds can't be modified, thanks pufuwozu
// TODO add scroll position to bounds, so no scrolling of window necessary // TODO add scroll position to bounds, so no scrolling of window necessary
bounds.top = clientRect.top; bounds.top = clientRect.top;
bounds.bottom = clientRect.bottom || (clientRect.top + clientRect.height);
bounds.left = clientRect.left; bounds.left = clientRect.left;
bounds.width = clientRect.width; bounds.width = clientRect.width;
bounds.height = clientRect.height; bounds.height = clientRect.height;