Implement background-size cover/contain

Author: niklasvh

build/html2canvas.js

@@ -235,9 +235,8 @@ function parseBackgroundSizePosition(value, element, attribute, index) {
     value = (value || '').split(',');
     value = value[index || 0] || value[0] || 'auto';
     value = _html2canvas.Util.trimText(value).split(' ');
-
-    if(attribute === 'backgroundSize' && (!value[0] || value[0].match(/cover|contain|auto/))) {
-        //these values will be handled in the parent function
+    if(attribute === 'backgroundSize' && (value[0] && value[0].match(/^(cover|contain|auto)$/))) {
+        return value;
     } else {
         value[0] = (value[0].indexOf( "%" ) === -1) ? toPX(element, attribute + "X", value[0]) : value[0];
         if(value[1] === undefined) {
@@ -296,71 +295,71 @@ _html2canvas.Util.resizeBounds = function( current_width, current_height, target
   };
 };
 
-function backgroundBoundsFactory( prop, el, bounds, image, imageIndex, backgroundSize ) {
-    var bgposition =  _html2canvas.Util.getCSS( el, prop, imageIndex ) ,
-    topPos,
-    left,
-    percentage,
-    val;
+_html2canvas.Util.BackgroundPosition = function(element, bounds, image, imageIndex, backgroundSize ) {
+    var backgroundPosition =  _html2canvas.Util.getCSS(element, 'backgroundPosition', imageIndex),
+        leftPosition,
+        topPosition;
+    if (backgroundPosition.length === 1){
+        backgroundPosition = [backgroundPosition[0], backgroundPosition[0]];
+    }
 
-    if (bgposition.length === 1){
-      val = bgposition[0];
+    if (backgroundPosition[0].toString().indexOf("%") !== -1){
+        leftPosition = (bounds.width - (backgroundSize || image).width) * (parseFloat(backgroundPosition[0]) / 100);
+    } else {
+        leftPosition = parseInt(backgroundPosition[0], 10);
+    }
 
-      bgposition = [];
+    if (backgroundPosition[1] === 'auto') {
+        topPosition = leftPosition / image.width * image.height;
+    } else if (backgroundPosition[1].toString().indexOf("%") !== -1){
+        topPosition =  (bounds.height - (backgroundSize || image).height) * parseFloat(backgroundPosition[1]) / 100;
+    } else {
+        topPosition = parseInt(backgroundPosition[1], 10);
+    }
 
-      bgposition[0] = val;
-      bgposition[1] = val;
+    if (backgroundPosition[0] === 'auto') {
+        leftPosition = topPosition / image.height * image.width;
     }
 
-    if (bgposition[0].toString().indexOf("%") !== -1){
-      percentage = (parseFloat(bgposition[0])/100);
-      left = bounds.width * percentage;
-      if(prop !== 'backgroundSize') {
-        left -= (backgroundSize || image).width*percentage;
-      }
+    return {left: leftPosition, top: topPosition};
+};
+
+_html2canvas.Util.BackgroundSize = function(element, bounds, image, imageIndex) {
+    var backgroundSize =  _html2canvas.Util.getCSS(element, 'backgroundSize', imageIndex),
+        width,
+        height;
+
+    if (backgroundSize.length === 1){
+        backgroundSize = [backgroundSize[0], backgroundSize[0]];
+    }
+
+    if (backgroundSize[0].toString().indexOf("%") !== -1){
+        width = bounds.width * parseFloat(backgroundSize[0]) / 100;
+    } else if(backgroundSize[0] === 'auto') {
+        width = image.width;
     } else {
-      if(prop === 'backgroundSize') {
-        if(bgposition[0] === 'auto') {
-          left = image.width;
+        if (/contain|cover/.test(backgroundSize[0])) {
+            var resized = _html2canvas.Util.resizeBounds(image.width, image.height, bounds.width, bounds.height, backgroundSize[0]);
+            return {width: resized.width, height: resized.height};
         } else {
-          if (/contain|cover/.test(bgposition[0])) {
-            var resized = _html2canvas.Util.resizeBounds(image.width, image.height, bounds.width, bounds.height, bgposition[0]);
-            left = resized.width;
-            topPos = resized.height;
-          } else {
-            left = parseInt(bgposition[0], 10);
-          }
+            width = parseInt(backgroundSize[0], 10);
         }
-      } else {
-        left = parseInt( bgposition[0], 10);
-      }
     }
 
-
-    if(bgposition[1] === 'auto') {
-      topPos = left / image.width * image.height;
-    } else if (bgposition[1].toString().indexOf("%") !== -1){
-      percentage = (parseFloat(bgposition[1])/100);
-      topPos =  bounds.height * percentage;
-      if(prop !== 'backgroundSize') {
-        topPos -= (backgroundSize || image).height * percentage;
-      }
-
+    if(backgroundSize[1] === 'auto') {
+        height = width / image.width * image.height;
+    } else if (backgroundSize[1].toString().indexOf("%") !== -1){
+        height =  bounds.height * parseFloat(backgroundSize[1]) / 100;
     } else {
-      topPos = parseInt(bgposition[1],10);
+        height = parseInt(backgroundSize[1],10);
     }
 
-    return [left, topPos];
-}
 
-_html2canvas.Util.BackgroundPosition = function( el, bounds, image, imageIndex, backgroundSize ) {
-    var result = backgroundBoundsFactory( 'backgroundPosition', el, bounds, image, imageIndex, backgroundSize );
-    return { left: result[0], top: result[1] };
-};
+    if (backgroundSize[0] === 'auto') {
+        width = height / image.height * image.width;
+    }
 
-_html2canvas.Util.BackgroundSize = function( el, bounds, image, imageIndex ) {
-    var result = backgroundBoundsFactory( 'backgroundSize', el, bounds, image, imageIndex );
-    return { width: result[0], height: result[1] };
+    return {width: width, height: height};
 };
 
 _html2canvas.Util.Extend = function (options, defaults) {
@@ -415,7 +414,7 @@ _html2canvas.Util.Children = function( elem ) {
 };
 
 _html2canvas.Util.isTransparent = function(backgroundColor) {
-  return (backgroundColor === "transparent" || backgroundColor === "rgba(0, 0, 0, 0)");
+  return (!backgroundColor || backgroundColor === "transparent" || backgroundColor === "rgba(0, 0, 0, 0)");
 };
 _html2canvas.Util.Font = (function () {
 
@@ -2945,7 +2944,7 @@ _html2canvas.Renderer.Canvas = function(options) {
     canvas.height = canvas.style.height = options.height || zStack.ctx.height;
 
     fstyle = ctx.fillStyle;
-    ctx.fillStyle = (Util.isTransparent(zStack.backgroundColor) && options.background !== undefined) ? options.background : parsedData.backgroundColor;
+    ctx.fillStyle = (Util.isTransparent(parsedData.backgroundColor) && options.background !== undefined) ? options.background : parsedData.backgroundColor;
     ctx.fillRect(0, 0, canvas.width, canvas.height);
     ctx.fillStyle = fstyle;