X-Git-Url: http://git.roojs.org/?a=blobdiff_plain;f=roojs-bootstrap-debug.js;h=c991ffff1c9633450ef11360a03cc725eae2765e;hb=2542b67d1a0768025056f2f330bfe50b64d1ad38;hp=5422f3a4075c96e9cd6a9241b32ec1ef52ce50d0;hpb=160ec323b38243aebc6e9f230e935e825f73e583;p=roojs1

diff --git a/roojs-bootstrap-debug.js b/roojs-bootstrap-debug.js
index 5422f3a407..c991ffff1c 100644
--- a/roojs-bootstrap-debug.js
+++ b/roojs-bootstrap-debug.js
@@ -41623,6 +41623,11 @@ Roo.extend(Roo.bootstrap.BezierSignature, Roo.bootstrap.Component,  {
                             width: this.canvas_width
                         }
                     ]
+                },
+                {
+                    tag: 'input',
+                    type: 'file',
+                    style: 'display: none'
                 }
             ]
         };
@@ -41659,6 +41664,9 @@ Roo.extend(Roo.bootstrap.BezierSignature, Roo.bootstrap.Component,  {
         
         Roo.EventManager.onWindowResize(this.resize, this, true);
         
+        // file input event
+        this.fileEl().on('change', this.uploadImage, this);
+        
         this.clear();
         
         this.resize();
@@ -41668,8 +41676,11 @@ Roo.extend(Roo.bootstrap.BezierSignature, Roo.bootstrap.Component,  {
         
         var canvas = this.canvasEl().dom;
         var ctx = this.canvasElCtx();
-        var img_data = ctx.getImageData(0, 0, canvas.width, canvas.height);
+        var img_data = false;
         
+        if(canvas.width > 0) {
+            var img_data = ctx.getImageData(0, 0, canvas.width, canvas.height);
+        }
         // setting canvas width will clean img data
         canvas.width = 0;
         
@@ -41681,7 +41692,9 @@ Roo.extend(Roo.bootstrap.BezierSignature, Roo.bootstrap.Component,  {
         
         canvas.width = this.el.dom.clientWidth - padding_left - padding_right;
         
-        ctx.putImageData(img_data, 0, 0);
+        if(img_data) {
+            ctx.putImageData(img_data, 0, 0);
+        }
     },
     
     _handleMouseDown: function(e)
@@ -41894,6 +41907,11 @@ Roo.extend(Roo.bootstrap.BezierSignature, Roo.bootstrap.Component,  {
         this.is_empty = true;
     },
     
+    fileEl: function()
+    {
+        return  this.el.select('input',true).first();
+    },
+    
     canvasEl: function()
     {
         return this.el.select('canvas',true).first();
@@ -41918,9 +41936,34 @@ Roo.extend(Roo.bootstrap.BezierSignature, Roo.bootstrap.Component,  {
     {
         var img = new Image();
         
+        img.onload = function(){
+            this.canvasElCtx().drawImage(img, 0, 0);
+        }.bind(this);
+        
         img.src = img_src;
         
-        this.canvasElCtx().drawImage(img, 0, 0);
+        this.is_empty = false;
+    },
+    
+    selectImage: function()
+    {
+        this.fileEl().dom.click();
+    },
+    
+    uploadImage: function(e)
+    {
+        var reader = new FileReader();
+        
+        reader.onload = function(e){
+            var img = new Image();
+            img.onload = function(){
+                this.reset();
+                this.canvasElCtx().drawImage(img, 0, 0);
+            }.bind(this);
+            img.src = e.target.result;
+        }.bind(this);
+        
+        reader.readAsDataURL(e.target.files[0]);
     },
     
     // Bezier Point Constructor