Merge pull request #41 from cobexer/for-niklasvh

a few fixes / improvements

Author: niklasvh

.gitignore

@@ -11,3 +11,5 @@ index.html
 image.jpg
 screenshots.html
 screenshots_local.html
+/.project
+/.settings/

src/Core.js

@@ -8,7 +8,7 @@
 
 var html2canvas = {};
 
-html2canvas.logging = true;
+html2canvas.logging = false;
 
 html2canvas.log = function (a) {    
     if (html2canvas.logging && window.console && window.console.log) {

src/Generate.js

@@ -39,20 +39,17 @@ html2canvas.Generate.Gradient = function(src, bounds) {
         while( j++ < input.length ) {
             chr = input.charAt( j );
             if (chr === ')') {
-                color += chr;                
+                color += chr;
                 steps.push( color );
                 color = '';
-                j+=2;
-            } else if (color || isValidColorStartChar(chr)) {                
+                while (j++ < input.length && input.charAt( j ) !== ',') {
+                }
+            } else {
                 color += chr;
             }
         }
     }
 
-    function isValidColorStartChar(c) {     
-    	return c && /[^0-9%,]/.test(c);
-    }
-    
     if ( tmp = src.match(/-webkit-linear-gradient\((.*)\)/) ) {
 
         position = tmp[1].split( ",", 1 )[0];
@@ -107,7 +104,12 @@ html2canvas.Generate.Gradient = function(src, bounds) {
     increment = 1 / (steps.length - 1);
 
     for (i = 0, len = steps.length; i < len; i+=1) {
-        lingrad.addColorStop(increment * i, steps[i]);
+        try {
+            lingrad.addColorStop(increment * i, steps[i]);
+        }
+        catch(e) {
+            html2canvas.log(['failed to add color stop: ', e, '; tried to add: ', steps[i], '; stop: ', i, '; in: ', src]);
+        }
     }
 
     ctx.fillStyle = lingrad;

src/Preload.js

@@ -25,7 +25,8 @@ html2canvas.Preload = function(element, opts){
     doc = element.ownerDocument,
     domImages = doc.images, // TODO probably should limit it to images present in the element only
     imgLen = domImages.length,
-    link = doc.createElement("a");
+    link = doc.createElement("a"),
+    timeoutTimer;
 
     link.href = window.location.href;
     pageOrigin  = link.protocol + link.host;
@@ -214,7 +215,7 @@ html2canvas.Preload = function(element, opts){
     methods = {
         loadImage: function( src ) {
             var img;
-            if ( images[src] === undefined ) {
+            if ( src && images[src] === undefined ) {
                 if ( src.match(/data:image\/.*;base64,/i) ) {
 
                     //Base64 src                  
@@ -257,7 +258,7 @@ html2canvas.Preload = function(element, opts){
 
         },
         cleanupDOM: function(cause) {
-            var img;
+            var img, src;
             if (!images.cleanupDone) {
                 if (cause && typeof cause === "string") {
                     html2canvas.log("html2canvas: Cleanup because: " + cause);
@@ -320,10 +321,7 @@ html2canvas.Preload = function(element, opts){
     this.log('html2canvas: Preload: Finding images');
     // load <img> images
     for (i = 0; i < imgLen; i+=1){
-        var imgSrc = domImages[i].getAttribute( "src" );
-        if ( imgSrc ) {
-            methods.loadImage( imgSrc );   
-        }        
+        methods.loadImage( domImages[i].getAttribute( "src" ) );
     }
 
     images.firstRun = false;

src/Renderer.js

@@ -168,6 +168,7 @@ html2canvas.Renderer = function(parseQueue, opts){
 
 
         }
+        html2canvas.log("html2canvas: Renderer: Canvas renderer done - returning canvas obj");
 
         // this.canvasRenderStorage(queue,this.ctx);
         return canvas;
@@ -352,7 +353,7 @@ html2canvas.Renderer = function(parseQueue, opts){
 
 
 
-        
+        html2canvas.log("html2canvas: Renderer: SVG Renderer done - returning SVG DOM obj");
 
         return svg;
 
@@ -367,11 +368,13 @@ html2canvas.Renderer = function(parseQueue, opts){
         case "canvas":
             canvas = doc.createElement('canvas');
             if (canvas.getContext){
+                this.log("html2canvas: Renderer: using canvas renderer");
                 return canvasRenderer(parseQueue);
             }               
             break;
         case "svg":
             if (doc.createElementNS){
+                this.log("html2canvas: Renderer: using SVG renderer");
                 return svgRenderer(parseQueue);             
             }
             break;

src/plugins/jquery.plugin.html2canvas.js

@@ -1,125 +1,54 @@
-
 /*
  * jQuery helper plugin for examples and tests
  */
-			
 (function( $ ){
     $.fn.html2canvas = function(options) {
-  
-        var date = new Date();
-        var message,
-        timeoutTimer,
-        timer = date.getTime();
-       
-        var preload = html2canvas.Preload(this[0], {
-            "complete": function(images){
-                
-                var queue = html2canvas.Parse(this[0], images);
-               
-                
-                var canvas = $(html2canvas.Renderer(queue));
-                var finishTime = new Date();
-         
-          
-                canvas.css('position','absolute')
-                .css('left',0).css('top',0);
-                $('body').append(canvas);
-                $(canvas).siblings().toggle();
-                
-           
-                
-                $(window).click(function(){
-                    if (!canvas.is(':visible')){
-                        $(canvas).toggle().siblings().toggle();  
-                        throwMessage("Canvas Render visible");
-                    } else{
-                        $(canvas).siblings().toggle();  
-                        $(canvas).toggle();
-                        throwMessage("Canvas Render hidden");
-                    }
-                    
-          
-                });
-                throwMessage('Screenshot created in '+ ((finishTime.getTime()-timer)/1000) + " seconds<br />",4000);
-                  
-            }
-        });
-       
-  
-       
-
-         
-
-      
-        /*
-        var date = new Date();
-        var message,
-        timeoutTimer,
+        var date = new Date(),
+        $message = null,
+        timeoutTimer = false,
         timer = date.getTime();
-        
-        var object = $.extend({},{
-            logging: false,
-            proxyUrl: "http://html2canvas.appspot.com/", // running html2canvas-python proxy
-            ready: function(renderer) {
-                
-                var finishTime = new Date();
-               // console.log((finishTime.getTime()-timer)/1000);
-                
+	html2canvas.logging = options && options.logging;
+        html2canvas.Preload(this[0], $.extend({
+            complete: function(images){
+                var queue = html2canvas.Parse(this[0], images, options),
+                $canvas = $(html2canvas.Renderer(queue, options)),
+                finishTime = new Date();
 
-                document.body.appendChild(renderer.canvas);
-                
-                
-                
-                var canvas = $(renderer.canvas);
-                canvas.css('position','absolute')
-                .css('left',0).css('top',0);
-                
+                $canvas.css({ position: 'absolute', left: 0, top: 0 }).appendTo(document.body);
+                $canvas.siblings().toggle();
 
-                
-               // $('body').append(canvas);
-                $(canvas).siblings().toggle();
-                
-                throwMessage('Screenshot created in '+ ((finishTime.getTime()-timer)/1000) + " seconds<br />Total of "+renderer.numDraws+" draws performed",4000);
-                
-                
                 $(window).click(function(){
-                    if (!canvas.is(':visible')){
-                        $(canvas).toggle().siblings().toggle();  
+                    if (!$canvas.is(':visible')){
+                        $canvas.toggle().siblings().toggle();
                         throwMessage("Canvas Render visible");
                     } else{
-                        $(canvas).siblings().toggle();  
-                        $(canvas).toggle();
+                        $canvas.siblings().toggle();
+                        $canvas.toggle();
                         throwMessage("Canvas Render hidden");
                     }
-                    
-          
                 });
+                throwMessage('Screenshot created in '+ ((finishTime.getTime()-timer)/1000) + " seconds<br />",4000);
             }
-            
-        },options)
-        
-        new html2canvas(this.get(0), object);
-        
-         */
-        
+        }, options));
+
         function throwMessage(msg,duration){
-            
             window.clearTimeout(timeoutTimer);
             timeoutTimer = window.setTimeout(function(){
-                message.fadeOut(function(){
-                    message.remove();   
-                });                   
+                $message.fadeOut(function(){
+                    $message.remove();
+                });
             },duration || 2000);
-            $(message).remove();
-            message = $('<div />').html(msg).css({
+            if ($message)
+                $message.remove();
+            $message = $('<div />').html(msg).css({
                 margin:0,
                 padding:10,
                 background: "#000",
                 opacity:0.7,
                 position:"fixed",
                 top:10,
                 right:10,
-                fontFamily: 'Tahoma' ,
+                fontFamily: 'Tahoma',
                 color:'#fff',
                 fontSize:12,
                 borderRadius:12,
@@ -129,8 +58,5 @@
                 textDecoration:'none'
             }).hide().fadeIn().appendTo('body');
         }
-
     };
-   
 })( jQuery );
-	

tests/images.html

@@ -58,7 +58,9 @@
         <img src="image.jpg" style="width:0px;height:0px;" />
 
         <canvas id="testcanvas" style="width:100px;height:100px;"></canvas>
-
+	<br />
+	Image without src attribute, should not crash:
+        <img style="width:50px;height:50px;border:1px solid red;display:block;" />
 
     </body>
 </html>