mirror of
https://github.com/niklasvh/html2canvas.git
synced 2023-08-10 21:13:10 +03:00
fixed z-index ordering bug with backgrounds
This commit is contained in:
Niklas von Hertzen
parent
71369d3b33
commit
78e1f9829f
@ -1078,7 +1078,7 @@ html2canvas.prototype.canvasRenderContext = function(storageContext,ctx){
|
||||
if (storageContext.clip){
|
||||
ctx.save();
|
||||
ctx.beginPath();
|
||||
// console.log(storageContext);
|
||||
// console.log(storageContext);
|
||||
ctx.rect(storageContext.clip.left,storageContext.clip.top,storageContext.clip.width,storageContext.clip.height);
|
||||
ctx.clip();
|
||||
|
||||
@ -1094,25 +1094,20 @@ html2canvas.prototype.canvasRenderContext = function(storageContext,ctx){
|
||||
break;
|
||||
case "function":
|
||||
if (renderItem.name=="fillRect"){
|
||||
|
||||
ctx.fillRect(
|
||||
renderItem.arguments[0]-(storageContext.canvasPosition.x || 0),
|
||||
renderItem.arguments[1]-(storageContext.canvasPosition.y || 0),
|
||||
renderItem.arguments[0],
|
||||
renderItem.arguments[1],
|
||||
renderItem.arguments[2],
|
||||
renderItem.arguments[3]
|
||||
);
|
||||
}else if(renderItem.name=="fillText"){
|
||||
// console.log(renderItem.arguments[0]);
|
||||
|
||||
ctx.fillText(renderItem.arguments[0],renderItem.arguments[1]-(storageContext.canvasPosition.x || 0),renderItem.arguments[2]-(storageContext.canvasPosition.y || 0));
|
||||
/*
|
||||
if (renderItem.arguments[0]=="Highlights"){
|
||||
console.log(renderItem);
|
||||
console.log(storageContext);
|
||||
$('body').append(ctx.canvas);
|
||||
}*/
|
||||
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);
|
||||
// console.log(renderItem.arguments[0].width);
|
||||
if (renderItem.arguments[8] > 0 && renderItem.arguments[7]){
|
||||
ctx.drawImage(
|
||||
renderItem.arguments[0],
|
||||
@ -1120,8 +1115,8 @@ html2canvas.prototype.canvasRenderContext = function(storageContext,ctx){
|
||||
renderItem.arguments[2],
|
||||
renderItem.arguments[3],
|
||||
renderItem.arguments[4],
|
||||
renderItem.arguments[5]-(storageContext.canvasPosition.x || 0),
|
||||
renderItem.arguments[6]-(storageContext.canvasPosition.y || 0),
|
||||
renderItem.arguments[5],
|
||||
renderItem.arguments[6],
|
||||
renderItem.arguments[7],
|
||||
renderItem.arguments[8]
|
||||
);
|
||||
@ -1140,9 +1135,9 @@ html2canvas.prototype.canvasRenderContext = function(storageContext,ctx){
|
||||
});
|
||||
|
||||
}
|
||||
if (storageContext.clip){
|
||||
ctx.restore();
|
||||
}
|
||||
if (storageContext.clip){
|
||||
ctx.restore();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -1790,9 +1785,10 @@ html2canvas.prototype.formatZ = function(zindex,position,parentZ,parentNode){
|
||||
var parentPosition = this.getCSS(parentNode,"position");
|
||||
if (parentPosition!="static" && typeof parentPosition != "undefined"){
|
||||
zindex = 0;
|
||||
}else{
|
||||
return parentZ;
|
||||
}
|
||||
/*else{
|
||||
return parentZ;
|
||||
}*/
|
||||
}
|
||||
|
||||
var b = this.leadingZero(this.numDraws,9);
|
||||
|
||||
8
build/html2canvas.min.js
vendored
8
build/html2canvas.min.js
vendored
@ -30,9 +30,9 @@ html2canvas.prototype.getImages=function(a){var b=this;this.ignoreRe.test(a.node
|
||||
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,c=this;$(b).load(function(){c.imagesLoaded++;c.start()});b.onerror=function(){c.images.splice(c.images.indexOf(b.src),2);c.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 c=this,d=document.createElement("a");d.href=a;a=d.href;$.ajax({data:{xhr2:!1,url:a},url:this.opts.proxyUrl,dataType:"jsonp",success:function(d){d.substring(0,6)=="error:"?(c.images.splice(c.images.indexOf(a),2),c.start(),c.log("Proxy was unable to load "+a+" "+d)):(b.onload=function(){c.imagesLoaded++;c.start()},b.src=d)},error:function(){c.images.splice(c.images.indexOf(a),2);c.start()}})};
|
||||
html2canvas.prototype.Renderer=function(a){var b=this;this.log("Renderer initiated");this.each(this.opts.renderOrder.split(" "),function(c,d){switch(d){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.canvasRenderContext=function(a,b){b.textBaseline="bottom";var c=this;a.clip&&(b.save(),b.beginPath(),b.rect(a.clip.left,a.clip.top,a.clip.width,a.clip.height),b.clip());a.ctx.storage&&c.each(a.ctx.storage,function(d,e){switch(e.type){case "variable":b[e.name]=e.arguments;break;case "function":e.name=="fillRect"?b.fillRect(e.arguments[0]-(a.canvasPosition.x||0),e.arguments[1]-(a.canvasPosition.y||0),e.arguments[2],e.arguments[3]):e.name=="fillText"?b.fillText(e.arguments[0],e.arguments[1]-
|
||||
(a.canvasPosition.x||0),e.arguments[2]-(a.canvasPosition.y||0)):e.name=="drawImage"?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]-(a.canvasPosition.x||0),e.arguments[6]-(a.canvasPosition.y||0),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){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.canvasRenderStorage(a,this.ctx)};
|
||||
html2canvas.prototype.canvasRenderContext=function(a,b){b.textBaseline="bottom";var c=this;a.clip&&(b.save(),b.beginPath(),b.rect(a.clip.left,a.clip.top,a.clip.width,a.clip.height),b.clip());a.ctx.storage&&c.each(a.ctx.storage,function(a,e){switch(e.type){case "variable":b[e.name]=e.arguments;break;case "function":e.name=="fillRect"?b.fillRect(e.arguments[0],e.arguments[1],e.arguments[2],e.arguments[3]):e.name=="fillText"?b.fillText(e.arguments[0],e.arguments[1],e.arguments[2]):e.name=="drawImage"?
|
||||
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){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.canvasRenderStorage(a,this.ctx)};
|
||||
html2canvas.prototype.sortQueue=function(a){if(!this.opts.reorderZ||!this.needReorder)return a;var b=0;this.each(a,function(a,c){if(b<c.zIndex.length)b=c.zIndex.length});var c=0;this.each(a,function(d,e){for(var f=a.length.toString().length-c.toString().length;b>e.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.zIndex<b.zIndex?-1:a.zIndex>b.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 c=c.ctx,d=this.getCSS(a,"font-family"),e=this.getCSS(a,"font-size"),f=this.getCSS(a,"color"),h=this.getCSS(a,"font-weight"),i=this.getCSS(a,"font-style"),g=this.getCSS(a,"font-variant"),j=this.getCSS(a,"text-decoration"),k=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(h){case 401:h="bold";break;case 400:h="normal"}if(j!=
|
||||
@ -46,5 +46,5 @@ html2canvas.prototype.parseElement=function(a,b){var c=this;this.each(a.children
|
||||
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+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;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.leadingZero=function(a,b){var c="000000000"+a;return c.substr(c.length-b)};
|
||||
html2canvas.prototype.formatZ=function(a,b,c,d){c||(c="0");if(b!="static"&&c.charAt(0)=="0")this.needReorder=!0,c="1"+c.slice(1);if(a=="auto")if(a=this.getCSS(d,"position"),a!="static"&&typeof a!="undefined")a=0;else return c;b=this.leadingZero(this.numDraws,9);a=this.leadingZero(a+1,9);return c+""+a+""+b};html2canvas.prototype.getContents=function(a){return a.nodeName=="iframe"?a.contentDocument||a.contentWindow.document:a.childNodes};html2canvas.prototype.getCSS=function(a,b){return $(a).css(b)};
|
||||
html2canvas.prototype.formatZ=function(a,b,c,d){c||(c="0");if(b!="static"&&c.charAt(0)=="0")this.needReorder=!0,c="1"+c.slice(1);a=="auto"&&(b=this.getCSS(d,"position"),b!="static"&&typeof b!="undefined"&&(a=0));b=this.leadingZero(this.numDraws,9);a=this.leadingZero(a+1,9);return c+""+a+""+b};html2canvas.prototype.getContents=function(a){return a.nodeName=="iframe"?a.contentDocument||a.contentWindow.document:a.childNodes};html2canvas.prototype.getCSS=function(a,b){return $(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};
|
||||
|
||||
@ -94,7 +94,7 @@ html2canvas.prototype.canvasRenderContext = function(storageContext,ctx){
|
||||
if (storageContext.clip){
|
||||
ctx.save();
|
||||
ctx.beginPath();
|
||||
// console.log(storageContext);
|
||||
// console.log(storageContext);
|
||||
ctx.rect(storageContext.clip.left,storageContext.clip.top,storageContext.clip.width,storageContext.clip.height);
|
||||
ctx.clip();
|
||||
|
||||
@ -110,25 +110,20 @@ html2canvas.prototype.canvasRenderContext = function(storageContext,ctx){
|
||||
break;
|
||||
case "function":
|
||||
if (renderItem.name=="fillRect"){
|
||||
|
||||
ctx.fillRect(
|
||||
renderItem.arguments[0]-(storageContext.canvasPosition.x || 0),
|
||||
renderItem.arguments[1]-(storageContext.canvasPosition.y || 0),
|
||||
renderItem.arguments[0],
|
||||
renderItem.arguments[1],
|
||||
renderItem.arguments[2],
|
||||
renderItem.arguments[3]
|
||||
);
|
||||
}else if(renderItem.name=="fillText"){
|
||||
// console.log(renderItem.arguments[0]);
|
||||
|
||||
ctx.fillText(renderItem.arguments[0],renderItem.arguments[1]-(storageContext.canvasPosition.x || 0),renderItem.arguments[2]-(storageContext.canvasPosition.y || 0));
|
||||
/*
|
||||
if (renderItem.arguments[0]=="Highlights"){
|
||||
console.log(renderItem);
|
||||
console.log(storageContext);
|
||||
$('body').append(ctx.canvas);
|
||||
}*/
|
||||
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);
|
||||
// console.log(renderItem.arguments[0].width);
|
||||
if (renderItem.arguments[8] > 0 && renderItem.arguments[7]){
|
||||
ctx.drawImage(
|
||||
renderItem.arguments[0],
|
||||
@ -136,8 +131,8 @@ html2canvas.prototype.canvasRenderContext = function(storageContext,ctx){
|
||||
renderItem.arguments[2],
|
||||
renderItem.arguments[3],
|
||||
renderItem.arguments[4],
|
||||
renderItem.arguments[5]-(storageContext.canvasPosition.x || 0),
|
||||
renderItem.arguments[6]-(storageContext.canvasPosition.y || 0),
|
||||
renderItem.arguments[5],
|
||||
renderItem.arguments[6],
|
||||
renderItem.arguments[7],
|
||||
renderItem.arguments[8]
|
||||
);
|
||||
@ -156,9 +151,9 @@ html2canvas.prototype.canvasRenderContext = function(storageContext,ctx){
|
||||
});
|
||||
|
||||
}
|
||||
if (storageContext.clip){
|
||||
ctx.restore();
|
||||
}
|
||||
if (storageContext.clip){
|
||||
ctx.restore();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
@ -144,9 +144,10 @@ html2canvas.prototype.formatZ = function(zindex,position,parentZ,parentNode){
|
||||
var parentPosition = this.getCSS(parentNode,"position");
|
||||
if (parentPosition!="static" && typeof parentPosition != "undefined"){
|
||||
zindex = 0;
|
||||
}else{
|
||||
return parentZ;
|
||||
}
|
||||
/*else{
|
||||
return parentZ;
|
||||
}*/
|
||||
}
|
||||
|
||||
var b = this.leadingZero(this.numDraws,9);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user