Refactoring logging and gradients

src/Core.js

@@ -5,18 +5,17 @@ previousElement,
 computedCSS,
 html2canvas;
 
-function h2clog(a) {
+_html2canvas.Util = {};
+
+_html2canvas.Util.log = function(a) {
   if (_html2canvas.logging && window.console && window.console.log) {
     window.console.log(a);
   }
-}
+};
-
-_html2canvas.Util = {};
 
 _html2canvas.Util.trimText = (function(isNative){
   return function(input) {
-    if(isNative) { return isNative.apply( input ); }
+    return isNative ? isNative.apply(input) : ((input || '') + '').replace( /^\s+|\s+$/g , '' );
-    else { return ((input || '') + '').replace( /^\s+|\s+$/g , '' ); }
   };
 })(String.prototype.trim);
 
@@ -386,7 +385,7 @@ _html2canvas.Util.Children = function( elem ) {
     })(elem.childNodes);
 
   } catch (ex) {
-    h2clog("html2canvas.Util.Children failed with exception: " + ex.message);
+    _html2canvas.Util.log("html2canvas.Util.Children failed with exception: " + ex.message);
     children = [];
   }
   return children;

src/Generate.js

@@ -1,6 +1,8 @@
 (function(){
+  var Util = _html2canvas.Util,
+    Generate = {};
 
-  _html2canvas.Generate = {};
+  _html2canvas.Generate = Generate;
 
   var reGradients = [
   /^(-webkit-linear-gradient)\(([a-z\s]+)([\w\d\.\s,%\(\)]+)\)$/,
@@ -18,7 +20,7 @@
  * TODO: Add old Webkit -webkit-gradient(radial, ...) support
  * TODO: Maybe some RegExp optimizations are possible ;o)
  */
-  _html2canvas.Generate.parseGradient = function(css, bounds) {
+  Generate.parseGradient = function(css, bounds) {
     var gradient, i, len = reGradients.length, m1, stop, m2, m2Len, step, m3, tl,tr,br,bl;
 
     for(i = 0; i < len; i+=1){
@@ -320,14 +322,25 @@
     return gradient;
   };
 
-  _html2canvas.Generate.Gradient = function(src, bounds) {
+  function addScrollStops(grad) {
+    return function(colorStop) {
+      try {
+        grad.addColorStop(colorStop.stop, colorStop.color);
+      }
+      catch(e) {
+        Util.log(['failed to add color stop: ', e, '; tried to add: ', colorStop]);
+      }
+    };
+  }
+
+  Generate.Gradient = function(src, bounds) {
     if(bounds.width === 0 || bounds.height === 0) {
       return;
     }
 
     var canvas = document.createElement('canvas'),
     ctx = canvas.getContext('2d'),
-    gradient, grad, i, len;
+    gradient, grad;
 
     canvas.width = bounds.width;
     canvas.height = bounds.height;
@@ -336,72 +349,46 @@
     gradient = _html2canvas.Generate.parseGradient(src, bounds);
 
     if(gradient) {
-      if(gradient.type === 'linear') {
+      switch(gradient.type) {
+        case 'linear':
           grad = ctx.createLinearGradient(gradient.x0, gradient.y0, gradient.x1, gradient.y1);
-
+          gradient.colorStops.forEach(addScrollStops(grad));
-        for (i = 0, len = gradient.colorStops.length; i < len; i+=1) {
-          try {
-            grad.addColorStop(gradient.colorStops[i].stop, gradient.colorStops[i].color);
-          }
-          catch(e) {
-            h2clog(['failed to add color stop: ', e, '; tried to add: ', gradient.colorStops[i], '; stop: ', i, '; in: ', src]);
-          }
-        }
-
           ctx.fillStyle = grad;
           ctx.fillRect(0, 0, bounds.width, bounds.height);
+          break;
 
-      } else if(gradient.type === 'circle') {
+        case 'circle':
-
           grad = ctx.createRadialGradient(gradient.cx, gradient.cy, 0, gradient.cx, gradient.cy, gradient.rx);
-
+          gradient.colorStops.forEach(addScrollStops(grad));
-        for (i = 0, len = gradient.colorStops.length; i < len; i+=1) {
-          try {
-            grad.addColorStop(gradient.colorStops[i].stop, gradient.colorStops[i].color);
-          }
-          catch(e) {
-            h2clog(['failed to add color stop: ', e, '; tried to add: ', gradient.colorStops[i], '; stop: ', i, '; in: ', src]);
-          }
-        }
-
           ctx.fillStyle = grad;
           ctx.fillRect(0, 0, bounds.width, bounds.height);
+          break;
 
-      } else if(gradient.type === 'ellipse') {
+        case 'ellipse':
-
-        // draw circle
           var canvasRadial = document.createElement('canvas'),
             ctxRadial = canvasRadial.getContext('2d'),
             ri = Math.max(gradient.rx, gradient.ry),
-        di = ri * 2, imgRadial;
+            di = ri * 2;
 
           canvasRadial.width = canvasRadial.height = di;
 
           grad = ctxRadial.createRadialGradient(gradient.rx, gradient.ry, 0, gradient.rx, gradient.ry, ri);
-
+          gradient.colorStops.forEach(addScrollStops(grad));
-        for (i = 0, len = gradient.colorStops.length; i < len; i+=1) {
-          try {
-            grad.addColorStop(gradient.colorStops[i].stop, gradient.colorStops[i].color);
-          }
-          catch(e) {
-            h2clog(['failed to add color stop: ', e, '; tried to add: ', gradient.colorStops[i], '; stop: ', i, '; in: ', src]);
-          }
-        }
 
           ctxRadial.fillStyle = grad;
           ctxRadial.fillRect(0, 0, di, di);
 
-        ctx.fillStyle = gradient.colorStops[i - 1].color;
+          ctx.fillStyle = gradient.colorStops[gradient.colorStops.length - 1].color;
           ctx.fillRect(0, 0, canvas.width, canvas.height);
           ctx.drawImage(canvasRadial, gradient.cx - gradient.rx, gradient.cy - gradient.ry, 2 * gradient.rx, 2 * gradient.ry);
-
+          break;
       }
     }
 
     return canvas;
   };
 
-  _html2canvas.Generate.ListAlpha = function(number) {
+  Generate.ListAlpha = function(number) {
     var tmp = "",
     modulus;
 
@@ -414,7 +401,7 @@
     return tmp;
   };
 
-  _html2canvas.Generate.ListRoman = function(number) {
+  Generate.ListRoman = function(number) {
     var romanArray = ["M", "CM", "D", "CD", "C", "XC", "L", "XL", "X", "IX", "V", "IV", "I"],
     decimal = [1000, 900, 500, 400, 100, 90, 50, 40, 10, 9, 5, 4, 1],
     roman = "",
@@ -433,7 +420,5 @@
     }
 
     return roman;
-
   };
-
 })();

src/Parse.js

@@ -734,7 +734,7 @@ _html2canvas.Parse = function (images, options) {
         valueWrap.style[property] = getCSS(el, property);
       } catch(e) {
         // Older IE has issues with "border"
-        h2clog("html2canvas: Parse: Exception caught in renderFormValue: " + e.message);
+        Util.log("html2canvas: Parse: Exception caught in renderFormValue: " + e.message);
       }
     });
 
@@ -791,7 +791,7 @@ _html2canvas.Parse = function (images, options) {
       try {
         elps.style[prop] = elStyle[prop];
       } catch (e) {
-        h2clog(['Tried to assign readonly property ', prop, 'Error:', e]);
+        Util.log(['Tried to assign readonly property ', prop, 'Error:', e]);
       }
     });
 
@@ -925,7 +925,7 @@ _html2canvas.Parse = function (images, options) {
       if (image) {
         renderBackgroundRepeating(element, bounds, ctx, image, imageIndex);
       } else {
-        h2clog("html2canvas: Error loading background:", backgroundImage);
+        Util.log("html2canvas: Error loading background:", backgroundImage);
       }
     }
   }
@@ -1041,7 +1041,7 @@ _html2canvas.Parse = function (images, options) {
         if ((image = loadImage(element.getAttribute('src')))) {
           renderImage(ctx, element, image, bounds, borders);
         } else {
-          h2clog("html2canvas: Error loading <img>:" + element.getAttribute('src'));
+          Util.log("html2canvas: Error loading <img>:" + element.getAttribute('src'));
         }
         break;
       case "INPUT":

src/Preload.js

@@ -7,6 +7,7 @@ _html2canvas.Preload = function( options ) {
     cleanupDone: false
   },
   pageOrigin,
+  Util = _html2canvas.Util,
   methods,
   i,
   count = 0,
@@ -31,9 +32,9 @@ _html2canvas.Preload = function( options ) {
   }
 
   function start(){
-    h2clog("html2canvas: start: images: " + images.numLoaded + " / " + images.numTotal + " (failed: " + images.numFailed + ")");
+    Util.log("html2canvas: start: images: " + images.numLoaded + " / " + images.numTotal + " (failed: " + images.numFailed + ")");
     if (!images.firstRun && images.numLoaded >= images.numTotal){
-      h2clog("Finished loading images: # " + images.numTotal + " (failed: " + images.numFailed + ")");
+      Util.log("Finished loading images: # " + images.numTotal + " (failed: " + images.numFailed + ")");
 
       if (typeof options.complete === "function"){
         options.complete(images);
@@ -141,9 +142,7 @@ _html2canvas.Preload = function( options ) {
 
     // Firefox fails with permission denied on pages with iframes
     try {
-      _html2canvas.Util.Children(el).forEach(function(img) {
+      Util.Children(el).forEach(getImages);
-        getImages(img);
-      });
     }
     catch( e ) {}
 
@@ -151,15 +150,15 @@ _html2canvas.Preload = function( options ) {
       elNodeType = el.nodeType;
     } catch (ex) {
       elNodeType = false;
-      h2clog("html2canvas: failed to access some element's nodeType - Exception: " + ex.message);
+      Util.log("html2canvas: failed to access some element's nodeType - Exception: " + ex.message);
     }
 
     if (elNodeType === 1 || elNodeType === undefined) {
       loadPseudoElementImages(el);
       try {
-        loadBackgroundImages(_html2canvas.Util.getCSS(el, 'backgroundImage'), el);
+        loadBackgroundImages(Util.getCSS(el, 'backgroundImage'), el);
       } catch(e) {
-        h2clog("html2canvas: failed to get background-image - Exception: " + e.message);
+        Util.log("html2canvas: failed to get background-image - Exception: " + e.message);
       }
       loadBackgroundImages(el);
     }
@@ -256,9 +255,9 @@ _html2canvas.Preload = function( options ) {
       var img, src;
       if (!images.cleanupDone) {
         if (cause && typeof cause === "string") {
-          h2clog("html2canvas: Cleanup because: " + cause);
+          Util.log("html2canvas: Cleanup because: " + cause);
         } else {
-          h2clog("html2canvas: Cleanup after timeout: " + options.timeout + " ms.");
+          Util.log("html2canvas: Cleanup after timeout: " + options.timeout + " ms.");
         }
 
         for (src in images) {
@@ -276,7 +275,7 @@ _html2canvas.Preload = function( options ) {
               }
               images.numLoaded++;
               images.numFailed++;
-              h2clog("html2canvas: Cleaned up failed img: '" + src + "' Steps: " + images.numLoaded + " / " + images.numTotal);
+              Util.log("html2canvas: Cleaned up failed img: '" + src + "' Steps: " + images.numLoaded + " / " + images.numTotal);
             }
           }
         }
@@ -308,23 +307,22 @@ _html2canvas.Preload = function( options ) {
     timeoutTimer = window.setTimeout(methods.cleanupDOM, options.timeout);
   }
 
-  h2clog('html2canvas: Preload starts: finding background-images');
+  Util.log('html2canvas: Preload starts: finding background-images');
   images.firstRun = true;
 
   getImages(element);
 
-  h2clog('html2canvas: Preload: Finding images');
+  Util.log('html2canvas: Preload: Finding images');
   // load <img> images
   for (i = 0; i < imgLen; i+=1){
     methods.loadImage( domImages[i].getAttribute( "src" ) );
   }
 
   images.firstRun = false;
-  h2clog('html2canvas: Preload: Done.');
+  Util.log('html2canvas: Preload: Done.');
   if (images.numTotal === images.numLoaded) {
     start();
   }
 
   return methods;
-
 };

src/Support.js

@@ -24,7 +24,7 @@ _html2canvas.Util.Support = function (options, doc) {
     } catch(e) {
       return false;
     }
-    h2clog('html2canvas: Parse: SVG powered rendering available');
+    _html2canvas.Util.log('html2canvas: Parse: SVG powered rendering available');
     return true;
   }
 

src/Util.js

@@ -71,11 +71,11 @@ window.html2canvas = function(elements, opts) {
     preload: function( opts ) {
       return _html2canvas.Preload( _html2canvas.Util.Extend(opts, options) );
     },
-    log: h2clog
+    log: _html2canvas.Util.log
   };
 };
 
-window.html2canvas.log = h2clog; // for renderers
+window.html2canvas.log = _html2canvas.Util.log; // for renderers
 window.html2canvas.Renderer = {
   Canvas: undefined // We are assuming this will be used
 };

src/renderers/Canvas.js

@@ -46,7 +46,7 @@ _html2canvas.Renderer.Canvas = function(options) {
               ctx.fillStyle = ctx.createPattern(item['arguments'][0], "repeat");
             }
             catch(e) {
-              h2clog("html2canvas: Renderer: Error creating pattern", e.message);
+              _html2canvas.Util.log("html2canvas: Renderer: Error creating pattern", e.message);
             }
           }
         } else if (item.name === "drawShape") {
@@ -101,7 +101,7 @@ _html2canvas.Renderer.Canvas = function(options) {
       ctx.restore();
     });
 
-    h2clog("html2canvas: Renderer: Canvas renderer done - returning canvas obj");
+    _html2canvas.Util.log("html2canvas: Renderer: Canvas renderer done - returning canvas obj");
 
     if (options.elements.length === 1) {
       if (typeof options.elements[0] === "object" && options.elements[0].nodeName !== "BODY") {

src/renderers/SVG.js

@@ -194,7 +194,7 @@ _html2canvas.Renderer.SVG = function( options ) {
 
 
 
-            h2clog("html2canvas: Renderer: SVG Renderer done - returning SVG DOM obj");
+          _html2canvas.Util.log("html2canvas: Renderer: SVG Renderer done - returning SVG DOM obj");
 
             return svg;
         }