refactored background rendering

This commit is contained in:
Niklas von Hertzen 2012-12-30 15:38:17 +02:00
parent 74e93cbb93
commit 1357057cbf

View File

@ -687,44 +687,44 @@ _html2canvas.Parse = function (images, options) {
} }
} }
function renderBackgroundNoRepeat(ctx, image, backgroundPosition, bounds) { function renderBackgroundNoRepeat(ctx, image, backgroundPosition, x, y, w, h) {
var bgw = bounds.width - backgroundPosition.left, var bgdw = w - backgroundPosition.left,
bgh = bounds.height - backgroundPosition.top, bgdh = h - backgroundPosition.top,
bgsx = backgroundPosition.left, bgsx = backgroundPosition.left,
bgsy = backgroundPosition.top, bgsy = backgroundPosition.top,
bgdx = backgroundPosition.left + bounds.left, bgdx = backgroundPosition.left + x,
bgdy = backgroundPosition.top + bounds.top; bgdy = backgroundPosition.top + y;
if (bgsx<0){ if (bgsx<0){
bgsx = Math.abs(bgsx); bgsx = Math.abs(bgsx);
bgdx += bgsx; bgdx += bgsx;
bgw = Math.min(bounds.width,image.width-bgsx); bgdw = Math.min(w,image.width-bgsx);
} else { } else {
bgw = Math.min(bgw,image.width); bgdw = Math.min(bgdw,image.width);
bgsx = 0; bgsx = 0;
} }
if (bgsy < 0){ if (bgsy < 0){
bgsy = Math.abs(bgsy); bgsy = Math.abs(bgsy);
bgdy += bgsy; bgdy += bgsy;
bgh = Math.min(bounds.height, image.height - bgsy); bgdh = Math.min(h, image.height - bgsy);
}else{ } else {
bgh = Math.min(bgh, image.height); bgdh = Math.min(bgdh, image.height);
bgsy = 0; bgsy = 0;
} }
if (bgh>0 && bgw > 0){ if (bgdh > 0 && bgdw > 0){
drawImage( drawImage(
ctx, ctx,
image, image,
bgsx, // source X : 0 bgsx,
bgsy, // source Y : 1695 bgsy,
bgw, // source Width : 18 bgdw,
bgh, // source Height : 1677 bgdh,
bgdx, // destination X :906 bgdx,
bgdy, // destination Y : 1020 bgdy,
bgw, // destination width : 18 bgdw,
bgh // destination height : 1677 bgdh
); );
} }
} }
@ -766,12 +766,32 @@ _html2canvas.Parse = function (images, options) {
); );
} }
function renderBackground(el, bounds, ctx) { function renderBackgroundRepeating(el, bounds, ctx, image) {
var backgroundPosition = _html2canvas.Util.BackgroundPosition(el, bounds, image),
backgroundRepeat = getCSS(el, "backgroundRepeat").split(",")[0];
switch (backgroundRepeat) {
case "repeat-x":
renderBackgroundRepeatX(ctx, image, backgroundPosition, bounds.left, bounds.top, bounds.width, bounds.height);
break;
case "repeat-y":
renderBackgroundRepeatY(ctx, image, backgroundPosition, bounds.left, bounds.top, bounds.width, bounds.height);
break;
case "no-repeat":
renderBackgroundNoRepeat(ctx, image, backgroundPosition, bounds.left, bounds.top, bounds.width, bounds.height);
break;
default:
renderBackgroundRepeat(ctx, image, backgroundPosition, bounds);
break;
}
}
function renderBackgroundImage(element, bounds, ctx) {
// TODO add support for multi background-images // TODO add support for multi background-images
var backgroundImage = getCSS(el, "backgroundImage"), var backgroundImage = getCSS(element, "backgroundImage"),
background_repeat = getCSS(el, "backgroundRepeat").split(",")[0], image;
image,
bgp;
if (!/data:image\/.*;base64,/i.test(backgroundImage) && !/^(-webkit|-moz|linear-gradient|-o-)/.test(backgroundImage)) { if (!/data:image\/.*;base64,/i.test(backgroundImage) && !/^(-webkit|-moz|linear-gradient|-o-)/.test(backgroundImage)) {
backgroundImage = backgroundImage.split(",")[0]; backgroundImage = backgroundImage.split(",")[0];
@ -782,24 +802,7 @@ _html2canvas.Parse = function (images, options) {
// TODO add support for background-origin // TODO add support for background-origin
if (image) { if (image) {
bgp = _html2canvas.Util.BackgroundPosition(el, bounds, image); renderBackgroundRepeating(element, bounds, ctx, image);
switch (background_repeat) {
case "repeat-x":
renderBackgroundRepeatX(ctx, image, bgp, bounds.left, bounds.top, bounds.width, bounds.height);
break;
case "repeat-y":
renderBackgroundRepeatY(ctx, image, bgp, bounds.left, bounds.top, bounds.width, bounds.height);
break;
case "no-repeat":
renderBackgroundNoRepeat(ctx, image, bgp, bounds);
break;
default:
renderBackgroundRepeat(ctx, image, bgp, bounds);
break;
}
} else { } else {
h2clog("html2canvas: Error loading background:" + backgroundImage); h2clog("html2canvas: Error loading background:" + backgroundImage);
} }
@ -861,7 +864,7 @@ _html2canvas.Parse = function (images, options) {
if (backgroundBounds.height > 0 && backgroundBounds.width > 0){ if (backgroundBounds.height > 0 && backgroundBounds.width > 0){
renderBackgroundColor(ctx, backgroundBounds, bgcolor); renderBackgroundColor(ctx, backgroundBounds, bgcolor);
renderBackground(element, backgroundBounds, ctx); renderBackgroundImage(element, backgroundBounds, ctx);
} }
switch(element.nodeName){ switch(element.nodeName){