FIX: bezier signature upload image

[roojs1] / Roo / bootstrap / BezierSignature.js

diff --git a/Roo/bootstrap/BezierSignature.js b/Roo/bootstrap/BezierSignature.js
index 2dcd4fe..379c181 100644 (file)
--- a/Roo/bootstrap/BezierSignature.js
+++ b/Roo/bootstrap/BezierSignature.js
@@ -121,6 +121,11 @@ Roo.extend(Roo.bootstrap.BezierSignature, Roo.bootstrap.Component,  {
                             width: this.canvas_width
                         }
                     ]
+                },
+                {
+                    tag: 'input',
+                    type: 'file',
+                    style: 'display: none'
                 }
             ]
         };
@@ -143,7 +148,13 @@ Roo.extend(Roo.bootstrap.BezierSignature, Roo.bootstrap.Component,  {
         canvas.on('mousemove', this._handleMouseMove, this);
         Roo.select('html').first().on('mouseup', this._handleMouseUp, this);
         
-        if (window.ontouchstart) {
+        if (window.PointerEvent) {
+            canvas.on('pointerdown', this._handleMouseDown, this);
+            canvas.on('pointermove', this._handleMouseMove, this);
+            Roo.select('html').first().on('pointerup', this._handleMouseUp, this);
+        }
+        
+        if ('ontouchstart' in window) {
             canvas.on('touchstart', this._handleTouchStart, this);
             canvas.on('touchmove', this._handleTouchMove, this);
             canvas.on('touchend', this._handleTouchEnd, this);
@@ -151,6 +162,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();
@@ -158,13 +172,22 @@ Roo.extend(Roo.bootstrap.BezierSignature, Roo.bootstrap.Component,  {
     
     resize: function(){
         
+        var canvas = this.canvasEl().dom;
+        var ctx = this.canvasElCtx();
+        var img_data = ctx.getImageData(0, 0, canvas.width, canvas.height);
+        
+        // setting canvas width will clean img data
+        canvas.width = 0;
+        
         var style = window.getComputedStyle ? 
             getComputedStyle(this.el.dom, null) : this.el.dom.currentStyle;
-        
+            
         var padding_left = parseInt(style.paddingLeft) || 0;
         var padding_right = parseInt(style.paddingRight) || 0;
         
-        this.canvasEl().dom.width = this.el.dom.clientWidth - padding_left - padding_right;
+        canvas.width = this.el.dom.clientWidth - padding_left - padding_right;
+        
+        ctx.putImageData(img_data, 0, 0);
     },
     
     _handleMouseDown: function(e)
@@ -191,6 +214,7 @@ Roo.extend(Roo.bootstrap.BezierSignature, Roo.bootstrap.Component,  {
     },
     
     _handleTouchStart: function (e) {
+        
         e.preventDefault();
         if (e.browserEvent.targetTouches.length === 1) {
             // var touch = e.browserEvent.changedTouches[0];
@@ -204,7 +228,7 @@ Roo.extend(Roo.bootstrap.BezierSignature, Roo.bootstrap.Component,  {
         e.preventDefault();
         // var touch = event.targetTouches[0];
         // _this._strokeMoveUpdate(touch);
-        this._strokeMoveUpdate(e);
+        this.strokeMoveUpdate(e);
     },
     
     _handleTouchEnd: function (e) {
@@ -376,6 +400,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();
@@ -393,16 +422,41 @@ Roo.extend(Roo.bootstrap.BezierSignature, Roo.bootstrap.Component,  {
         }
         
         // encryption ?
-        return this.canvasEl().dom.toDataURL('image/'+type, false);
+        return this.canvasEl().dom.toDataURL('image/'+type, 1);
     },
     
     drawFromImage: function(img_src)
     {
         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