add image widget

BPing · Nov 9, 2016 · 68ccac5 · 68ccac5
1 parent 19a3129
commit 68ccac5
Show file tree

Hide file tree

Showing 10 changed files with 279 additions and 14 deletions.
diff --git a/README.md b/README.md
@@ -1,5 +1,8 @@
 # crysyan
 a web drawing board with canvas
 
-# dependence
+# Dependence
 * jQuery
+
+# Compatibility
+* turn the canvas into a picture and save  `IE9+, Chrome4+,Firefox3.6(1.9.2)`
diff --git a/img/image.png b/img/image.png
diff --git a/js/canvas.js b/js/canvas.js
@@ -112,6 +112,117 @@
             //     y: y - bbox.top * (canvas.height / bbox.height)
             // };
         },
+        /**
+         *  see context drawImage()
+         * Example:
+         * 1、Locate the image on the canvas:
+         *    drawImageFile (imagefile: ?, dx: number, dy: number)
+         *
+         * 2、Locate the image on the canvas, and specify the width and height of the image:
+         *    drawImageFile(imagefile,x,y,width,height);
+         *
+         * 3、Cut the image and locate the part on the canvas:
+         *   drawImageFile(imagefile,sx,sy,swidth,sheight,x,y,width,height);
+         */
+        drawImageFile: function(file) {
+            var canvas = this;
+            var reader = new FileReader();
+            reader.onload = function(event) {
+                canvas.drawDataUrl(event.target.result);
+            };
+            reader.readAsDataURL(file);
+        },
+        /**
+         *  draw image with dataUrl
+         *
+         * @param dataUrl
+         */
+        drawDataUrl: function(dataUrl) {
+            var ctx = this.playContext;
+            var image = new Image();
+            image.onload = function() {
+                arguments[0] = image;
+                ctx.drawImage.apply(ctx, arguments);
+            };
+            image.src = dataUrl;
+        },
+        /**
+         *  see context drawImage()
+         * Example:
+         * 1、Locate the image on the canvas:
+         *    drawImage(image, dx, dy)
+         *
+         * 2、Locate the image on the canvas, and specify the width and height of the image:
+         *    drawImage(image,x,y,width,height);
+         *
+         * 3、Cut the image and locate the part on the canvas:
+         *   drawImage(image,sx,sy,swidth,sheight,x,y,width,height);
+         */
+        drawImage: function() {
+            var ctx = this.playContext;
+            ctx.drawImage.apply(ctx, arguments);
+        },
+        /**
+         *@param {string} [type]
+         *                            Indicating the image format. The default type is image/png.
+         *@param {*} [encoderOptions]
+         *                            A Number between 0 and 1 indicating image quality
+         *                            if the requested type is image/jpeg or image/webp.If this argument is anything else,
+         *                            the default value for image quality is used. The default value is 0.92.
+         *                            Other arguments are ignored.
+         *@return {string}
+         */
+        toDataURL: function(type, encoderOptions) {
+            return this.playCanvas.toDataURL(type, encoderOptions);
+        },
+
+        /**
+         * Covert the canvas to a Image object
+         *
+         * See toDataURL()
+         *
+         * @param callback  called in image.onload
+         * @returns {Image}  image dom element
+         */
+        toImageEle: function(type, encoderOptions, callback) {
+            var image = new Image();
+            image.onload = function() {
+                callback();
+            };
+            image.src = this.toDataURL(type, encoderOptions);
+            return image;
+        },
+        /**
+         *  Covert the canvas to a Blob object
+         *  See toDataURL()
+         * @return {Blob}
+         */
+        toBlob: function(type, encoderOptions) {
+            //DataURL: 'data:text/plain;base64,YWFhYWFhYQ=='
+            var arr = this.toDataURL(type, encoderOptions).split(','),
+                mime = arr[0].match(/:(.*?);/)[1],
+                bstr = atob(arr[1]),
+                n = bstr.length,
+                u8arr = new Uint8Array(n);
+            while (n--) {
+                u8arr[n] = bstr.charCodeAt(n);
+            }
+            return new Blob([u8arr], {
+                type: mime
+            });
+        },
+        /**
+         * Save the canvas to a local png
+         * download
+         */
+        saveAsLocalImagePng: function() {
+            // here is the most important part because if you don't replace you will get a DOM 18 exception.
+            // var image = this.toDataURL("image/png").replace("image/png", "image/octet-stream;Content-Disposition: attachment;filename=foobar.png");
+            var image = this.toDataURL("image/png").replace("image/png", "image/octet-stream");
+            // it will save locally
+            window.location.href = image;
+        },
+
         //  add  event  to canvas
         addEvent: function(eventType, callback) {
             $util.addEvent(this.playCanvas, eventType, callback);

diff --git a/js/config.js b/js/config.js
@@ -29,6 +29,13 @@
                 icon: "eraser.png",
                 name: "eraser"
             },
+            ImageWidget: {
+                exportVar: "CrysyanImageWidget",
+                jsFile: "image.js",
+                // Icon and Name of widget in toolbar
+                icon: "image.png",
+                name: "image"
+            },
             UndoWidget: {
                 exportVar: "CrysyanUndoWidget",
                 jsFile: "undo.js",
@@ -55,6 +62,11 @@
 
     //
     window.CrysyanDefaultConfig = {
+        submit: {
+            Id: "crysyan-submit",
+            // function called after submit
+            callback: function(crysyanCanvas,event){}
+        },
         canvas: {
             canvasId: "crysyan-canvas",
             // px
@@ -63,7 +75,7 @@
         },
         toolbar: {
             Id: "crysyan-toolbar",
-            widgets: ["CursorWidget", "PencilWidget","EraserWidget", "UndoWidget", "IndoGoWidget", "ClearWidget"],
+            widgets: ["CursorWidget", "PencilWidget", "EraserWidget", "ImageWidget", "UndoWidget", "IndoGoWidget", "ClearWidget"],
         }
     };
 })();
diff --git a/js/crysyan.js b/js/crysyan.js
@@ -5,16 +5,17 @@
     'use strict';
 
     var jsLoadCache = [];
+   //
+    var viewCacheMap = {};
 
     /**
      * Simple dynamically load JS file in serial
      *
      * @param {Array|string} filePaths  the path of js file
-     * @param {function} callback  will be called  after all file be completely loaded
+     * @param {function} callback  will be called  after all files been completely loaded
      */
     function requireSeries(filePaths, callback) {
         var headElement = document.getElementsByTagName("head").item(0) || document.documentElement;
-
         if (typeof filePaths === "string") {
             filePaths = [filePaths];
         }
@@ -26,6 +27,10 @@
                 if (typeof callback === "function") callback();
                 return;
             }
+            // if the file has been loaded
+            // if (jsLoadCache.hasOwnProperty(filePaths[i])) {
+            //     recursiveLoad(i + 1);
+            // }
             var script = document.createElement("script");
             script.src = filePaths[i];
             script.type = "text/javascript";
@@ -35,6 +40,7 @@
                     // remove the 'script' tag  after loading the js file is complete
                     this.onload = this.onreadystatechange = null;
                     this.parentNode.removeChild(this);
+                    // jsLoadCache[filePaths[i]] = 1;
                     if (i < filePaths.length) {
                         recursiveLoad(i + 1);
                     }
@@ -69,9 +75,8 @@
     var init = function() {
         widgetinit(function() {
             console.log("successfully load");
-            var view = new CrysyanView({});
-            view.handleWidget();
-            view.handleCanvas();
+            var view = new CrysyanView({}).init();
+            viewCacheMap["default"] = view;
         });
     };
     if ($load) {
@@ -82,10 +87,16 @@
             baseLoadPath + "config.js",
             baseLoadPath + "widget.js",
             baseLoadPath + "canvas.js",
-            baseLoadPath + "view.js"
+            baseLoadPath + "view.js",
         ], init);
     } else {
         // TODO:do something
     }
-
+    var Crysyan = {
+        getView: function(name) {
+            if (typeof name === "undefined" || name === "") name = "default";
+            return viewCacheMap[name] ;
+        }
+    };
+    window.Crysyan = Crysyan;
 })(true);
diff --git a/js/util.js b/js/util.js
@@ -36,6 +36,12 @@
             }
             return this;
         },
+        isIE: function() {
+            if (navigator.appName === "Microsoft Internet Explorer") {
+                return true;
+            }
+            return false;
+        }
 
     };
     // clone

diff --git a/js/view.js b/js/view.js
@@ -3,7 +3,7 @@
  *  @module
  *  @depend util.js;canvas.js;widget.js;widget/*.js
  */
-(function($defaultConfig, $widgetConfig) {
+(function($defaultConfig, $widgetConfig, $util) {
     'use strict';
     /**
      *      view
@@ -16,6 +16,7 @@
         this.ops = $.extend($defaultConfig, ops);
         this.crysyanCanvas = new CrysyanCanvas(this.ops.canvas);
         this.toolbarElement = document.getElementById(this.ops.toolbar.Id);
+        this.submitElement = document.getElementById(this.ops.submit.Id);
         console.dir(this);
         if (this.toolbarElement === null)
             throw "can't get the Element by id:" + this.ops.toolbar.Id;
@@ -32,6 +33,17 @@
     var handledWidgetsMap = {};
 
     CrysyanView.prototype = {
+        init: function() {
+            var view = this;
+            view.handleWidget();
+            view.handleCanvas();
+            if (view.submitElement !== null) {
+                $util.addEvent(view.submitElement, "click", function(e) {
+                    view.ops.submit.callback(view.crysyanCanvas, e);
+                });
+            }
+            return this;
+        },
         //
         handleWidget: function() {
             var view = this;
@@ -92,7 +104,7 @@
         handleCanvas: function() {
             var view = this;
             view.crysyanCanvas.mousedown(function(e, loc) {
-                console.log("mousedown");
+                // console.log("mousedown");
                 if (view.widgetEventMap.hasOwnProperty(view.widgetSelected)) {
                     var widgetInstance = view.widgetEventMap[view.widgetSelected];
                     widgetInstance.isDown = true;
@@ -107,16 +119,22 @@
                 }
             });
             view.crysyanCanvas.mouseup(function(e, loc) {
-                console.log("mouseup");
+                // console.log("mouseup");
                 if (view.widgetEventMap.hasOwnProperty(view.widgetSelected)) {
                     var widgetInstance = view.widgetEventMap[view.widgetSelected];
                     widgetInstance.isDown = false;
                     widgetInstance.mouseUp(e, loc);
                 }
             });
+        },
+        // reset callback of submit action 
+        setSubmitCallback: function(callback) {
+            if (typeof callback === "function")
+                this.ops.submit.callback = callback;
         }
+
     };
     CrysyanView.prototype.constructor = CrysyanView;
     window.CrysyanView = CrysyanView;
 
-})(CrysyanDefaultConfig, CrysyanWidgetConfig);
+})(CrysyanDefaultConfig, CrysyanWidgetConfig, CrysyanUtil);
diff --git a/js/widget/clear.js b/js/widget/clear.js
@@ -2,7 +2,7 @@
     'use strict';
     var CrysyanClearWidget = $widget.clone();
     CrysyanClearWidget.iconClick = function(ele, e) {
-        CrysyanClearWidget.crysyanCanvas.clearCanvas();
+        this.crysyanCanvas.clearCanvas();
     };
     CrysyanClearWidget.CrysyanWidgetType = "CrysyanClearWidget";
     // export to window