Page 1 of 1

### สอบถามการประยุกต์ใช้คำสั่ง rect()

Posted: 18/09/2017 6:00 pm
2017-09-18_143359.png (1.94 KiB) Viewed 1444 times

จากตัวอย่างการใช้คำสั่ง rect() ในการสร้างกรอบสี่เหลี่ยม : https://jsfiddle.net/epistemex/fhr2wrw7/ ต้องการนำมาประยุกต์ใช้กับตัว Picedit.js ต้องทำอย่างไรบ้างค่ะ

Code: Select all

`var canvas, context, startX, endX, startY, endY;var mouseIsDown = 0;function init() {    canvas = document.getElementById("canvas");    context = canvas.getContext("2d");    canvas.addEventListener("mousedown", mouseDown, false);    canvas.addEventListener("mousemove", mouseXY, false);    canvas.addEventListener("mouseup", mouseUp, false);}function mouseUp(eve) {    if (mouseIsDown !== 0) {        mouseIsDown = 0;        var pos = getMousePos(canvas, eve);        endX = pos.x;        endY = pos.y;        drawSquare(); //update on mouse-up    }}function mouseDown(eve) {    mouseIsDown = 1;    var pos = getMousePos(canvas, eve);    startX = endX = pos.x;    startY = endY = pos.y;    drawSquare(); //update}function mouseXY(eve) {    if (mouseIsDown !== 0) {        var pos = getMousePos(canvas, eve);        endX = pos.x;        endY = pos.y;        drawSquare();    }}function drawSquare() {    // creating a square    var w = endX - startX;    var h = endY - startY;    var offsetX = (w < 0) ? w : 0;    var offsetY = (h < 0) ? h : 0;    var width = Math.abs(w);    var height = Math.abs(h);    context.clearRect(0, 0, canvas.width, canvas.height);                   context.beginPath();    context.rect(startX + offsetX, startY + offsetY, width, height);    context.stroke();}function getMousePos(canvas, evt) {    var rect = canvas.getBoundingClientRect();    return {        x: evt.clientX - rect.left,        y: evt.clientY - rect.top    };}init();`

Picedit.js

Code: Select all

`/* *  Project: PicEdit *  Description: Creates an image upload box with tools to edit the image on the front-end before uploading it to the server *  Author: Andy V. *  License: MIT */// the semi-colon before function invocation is a safety net against concatenated// scripts and/or other plugins which may not be closed properly.;(function ( \$, window, document, undefined ) {    "use strict";    // undefined is used here as the undefined global variable in ECMAScript 3 is    // mutable (ie. it can be changed by someone else). undefined isn't really being    // passed in so we can ensure the value of it is truly undefined. In ES5, undefined    // can no longer be modified.    // window is passed through as local variable rather than global    // as this (slightly) quickens the resolution process and can be more efficiently    // minified (especially when both are regularly referenced in your plugin).    // Create the default params object    var pluginName = 'picEdit',        defaults = {         imageUpdated: function(img){},   // Image updated callback function         formSubmitted: function(res){},   // After form was submitted callback function         fileNameChanged: function(filename){},   // After content is loaded into the canvas from either URL or file         fileLoaded: function(file){},   // After a file is loaded into the canvas                  redirectUrl: false,            // Page url for redirect on form submit         maxWidth: 'auto',               // Max width parameter         maxHeight: 'auto',            // Max height parameter         aspectRatio: true,            // Preserve aspect ratio         defaultImage: false,                   // Default image to be used with the plugin         defaultMessageTimeout: 3000         // Default timeout to autohide messages (in milliseconds)        };    // The actual plugin constructor    function Plugin( element, options ) {        this.inputelement = element;        this.element = element;        // jQuery has an extend method which merges the contents of two or        // more objects, storing the result in the first object. The first object        // is generally empty as we don't want to alter the default options for        // future instances of the plugin        this.options = \$.extend( {}, defaults, options) ;        this._defaults = defaults;        this._name = pluginName;        // Reference to the loaded image        this._image = false;        // Reference to the filename of the loaded image        this._filename = "";        // Interface variables (data synced from the user interface)        this._variables = {};        /* Prepare the template */        /*unhide_in_prod*/        /*this._template();*/        /*unhide_in_prod*/        /*hide_in_prod*/        this.init();        /*hide_in_prod*/    }   Plugin.prototype = {      init: function () {            // Place initialization logic here            // You already have access to the DOM element and            // the options via the instance, e.g. this.element            // and this.settings                        // Save instance of this for inline functions            var _this = this;                // Get type of element to be used (type="file" and type="picedit" are supported)                var type = \$(this.inputelement).prop("type");                if(type == "file")                    this._fileinput = \$(this.inputelement);                else {                    // Create a reference to the file input box                    \$(this.inputelement).after('<input type="file" style="display:none" accept="image/*">');                this._fileinput = \$(this.inputelement).next("input");                }                // Show regular file upload on old browsers                if(!this.check_browser_capabilities()) {                    if(type != "file") {                        \$(this.inputelement).prop("type", "file");                        \$(this._fileinput).remove();                    }                    \$(this.inputelement).show();                    \$(this.element).remove();                    return;                }            // Get reference to the main canvas element            this._canvas = \$(this.element).find(".picedit_canvas > canvas")[0];            // Create and set the 2d context for the canvas            this._ctx = this._canvas.getContext("2d");            // Reference to the painter element            this._painter = \$(this.element).find(".picedit_painter");            this._painter_canvas = this._painter.children("canvas")[0];            this._painter_ctx = this._painter_canvas.getContext("2d");            this._painter_painting = false;                                            this._text = \$(this.element).find(".picedit_textbox");            this._text_canvas = this._text.children("canvas")[0];            this._text_ctx = this._text_canvas.getContext("2d");                                            // Save the reference to the messaging box             this._messagebox = \$(this.element).find(".picedit_message");             this._messagetimeout = false;            // Reference to the main/top nav buttons holder            this._mainbuttons = \$(this.element).find(".picedit_action_btns");            // Size of the viewport to display image (a resized image will be displayed)             this._viewport = {               "width": 0,               "height": 0             };             // All variables responsible for cropping functionality             this._cropping = {                is_dragging: false,                is_resizing: false,                left: 0,                top: 0,                width: 0,                height: 0,                cropbox: \$(this.element).find(".picedit_drag_resize"),                cropframe: \$(this.element).find(".picedit_drag_resize_box")             };                                              function build_img_from_file(files) {               if(!files && !files.length) return;               var file = files[0];               if(!_this._filename) {                  _this._filename = file.name;               }               var reader = new FileReader();               reader.onload = function(e) {                   _this._create_image_with_datasrc(e.target.result, false, file);                  _this.options.fileLoaded(file);                  if (file.name != _this._filename) {                     _this._filename = file.name;                     _this.options.fileNameChanged(file.name);                  }               };               reader.readAsDataURL(file);             }            // Bind file drag-n-drop behavior            \$(this.element).find(".picedit_canvas_box").on("drop", function(event) {               event.preventDefault();               \$(this).removeClass('dragging');               var files = (event.dataTransfer || event.originalEvent.dataTransfer).files;               build_img_from_file(files);            }).on("dragover", function(event) {               event.preventDefault();               \$(this).addClass('dragging');            }).on("dragleave", function(event) {               event.preventDefault();               \$(this).removeClass('dragging');            });            // Bind onchange event to the fileinput to pre-process the image selected            \$(this._fileinput).on("change", function() {               build_img_from_file(this.files);            });            // If Firefox (doesn't support clipboard object), create DIV to catch pasted image            if (!window.Clipboard) { // Firefox               var pasteCatcher = \$(document.createElement("div"));               pasteCatcher.prop("contenteditable","true").css({                  "position" : "absolute",                   "left" : -999,                  "width" : 0,                  "height" : 0,                  "overflow" : "hidden",                  "outline" : 0,                  "opacity" : 0               });               \$(document.body).prepend(pasteCatcher);            }            // Bind onpaste event to capture images from the the clipboard            \$(document).on("paste", function(event) {               var items = (event.clipboardData  || event.originalEvent.clipboardData).items;               var blob;               if(!items) {                  pasteCatcher.get(0).focus();                        pasteCatcher.on('DOMSubtreeModified', function(){                            var child = pasteCatcher.children().last().get(0);                     pasteCatcher.html("");                     if (child) {                        if (child.tagName === "IMG" && child.src.substr(0, 5) == 'data:') {                           _this._create_image_with_datasrc(child.src);                        }                                else if (child.tagName === "IMG" && child.src.substr(0, 4) == 'http') {                           _this._create_image_with_datasrc(child.src, false, false, true);                        }                     }                        });               }               else {                  for (var i = 0; i < items.length; i++) {                    if (items[i].type.indexOf("image") === 0) {                     blob = items[i].getAsFile();                    }                  }                  if(blob) {                    var reader = new FileReader();                    reader.onload = function(e) { _this._create_image_with_datasrc(e.target.result); };                    reader.readAsDataURL(blob);                  }               }            });            // Define formdata element            this._theformdata = false;            this._theform = \$(this.inputelement).parents("form");                // Bind form submit event            if(this._theform.length) {               this._theform.on("submit", function(){ return _this._formsubmit(); });            }            // Call helper functions            this._bindControlButtons();            this._bindInputVariables();            this._bindSelectionDrag();            // Set Default interface variable values            this._variables.pen_color = "black";            this._variables.pen_size = false;                                            this._variables.text_color = "black";            this._variables.prev_pos = false;                // Load default image if one is set                if(this.options.defaultImage) _this.set_default_image(this.options.defaultImage);      },        // Check Browser Capabilities (determine if the picedit should run, or leave the default file-input field)        check_browser_capabilities: function () {            if(!!window.CanvasRenderingContext2D == false) return false; //check canvas support            if(!window.FileReader) return false; //check file reader support            return true;    //otherwise return true        },        // Set the default Image        set_default_image: function (path) {            this._create_image_with_datasrc(path, false, false, true);            var m = path.match(/.*\/(.+?)[\?#]/);            if (m && m.length > 1) {                this._filename = m[1];            } else {                this._filename = path;            }            this.options.fileNameChanged(this._filename);        },      // Remove all notification copy and hide message box      hide_messagebox: function () {         var msgbox = this._messagebox;         msgbox.removeClass("active no_close_button");         setTimeout(function() {msgbox.children("div").html("")}, 200);      },      // Open a loading spinner message box or working... message box      set_loading: function (message) {         if(message && message == 1) {            return this.set_messagebox("Working...", false, false);         }         else return this.set_messagebox("Please Wait...", false, false);      },      // Open message box alert with defined text autohide after number of milliseconds, display loading spinner      set_messagebox: function (text, autohide, closebutton) {         autohide = typeof autohide !== 'undefined' ? autohide : this.options.defaultMessageTimeout;         closebutton = typeof closebutton !== 'undefined' ? closebutton : true;         this._messagebox.addClass("active");         if(closebutton) {            this._messagebox.removeClass("no_close_button");         } else {            this._messagebox.addClass("no_close_button");         }         if(autohide) {            clearTimeout(this._messagetimeout);            var _this = this;            this._messagetimeout = setTimeout(function(){ _this.hide_messagebox(); }, autohide);         }         return this._messagebox.children("div").html(text);      },      // Toggle button and update variables      toggle_button: function (elem) {         if(\$(elem).hasClass("active")) {            var value = false;            \$(elem).removeClass("active");         }         else {            var value = true;            \$(elem).siblings().removeClass("active");            \$(elem).addClass("active");         }         var variable = \$(elem).data("variable");         if(variable) {            var optional_value = \$(elem).data("value");            if(!optional_value) optional_value = \$(elem).val();            if(optional_value && value) value = optional_value;            this._setVariable(variable, value);         }         if(this._variables.pen_color && this._variables.pen_size) this.pen_tool_open();         else this.pen_tool_close();      },                text_button: function (elem) {         if(\$(elem).hasClass("active")) {            var value = false;            \$(elem).removeClass("active");         }         else {            var value = true;            \$(elem).siblings().removeClass("active");            \$(elem).addClass("active");         }         var variable = \$(elem).data("variable");         if(variable) {            var optional_value = \$(elem).data("value");            if(!optional_value) optional_value = \$(elem).val();            if(optional_value && value) value = optional_value;            this._setVariable(variable, value);         }         if(this._variables.text_color);         else this.text_close();      },      // Perform image load when user clicks on image button      load_image: function () {         this._fileinput.click();      },                //                text_open: function () {         if(!this._image) return this._hideAllNav(1);                        this.text_set();                        this._text.addClass("active");         this._hideAllNav();                },                text_set: function () {                        var textbox = document.getElementById("textbox").value;                        var text_size = document.getElementById("text_size").value;                        var font = "Tahoma";                                 this._text_canvas.width = 0;         this._text_canvas.width = this._canvas.width;         this._text_canvas.height = this._canvas.height;                        this._text_ctx.font = text_size + "px " + font;                        this._text_ctx.fillStyle = this._variables.text_color;                        this._text_ctx.fillText(textbox, 100, 150);                   },                text_close: function () {         this._text.removeClass("active");      },                                // Open pen tool and start drawing      pen_tool_open: function () {         if(!this._image) return this._hideAllNav(1);         this.pen_tool_params_set();         this._painter.addClass("active");         this._hideAllNav();      },      // Set pen tool parameters      pen_tool_params_set: function () {         this._painter_canvas.width = 0;         this._painter_canvas.width = this._canvas.width;         this._painter_canvas.height = this._canvas.height;         this._painter_ctx.lineJoin = "round";         this._painter_ctx.lineCap = "round";         this._painter_ctx.strokeStyle = this._variables.pen_color;                        this._painter_ctx.lineWidth = this._variables.pen_size;      },      // Close pen tool      pen_tool_close: function () {         this._painter.removeClass("active");      },            // Resize the image      resize_image: function () {         if(!this._image) return this._hideAllNav(1);         var _this = this;         this.set_loading(1).delay(200).promise().done(function() {            //perform resize begin            var canvas = document.createElement('canvas');            var ctx = canvas.getContext("2d");            canvas.width = _this._variables.resize_width;            canvas.height = _this._variables.resize_height;            ctx.drawImage(_this._image, 0, 0, canvas.width, canvas.height);            _this._create_image_with_datasrc(canvas.toDataURL("image/png"), function() {               _this.hide_messagebox();            });         });         this._hideAllNav();      },            // Crop the image      crop_image: function() {         var crop = this._calculateCropWindow();         var _this = this;         this.set_loading(1).delay(200).promise().done(function() {            var canvas = document.createElement('canvas');            var ctx = canvas.getContext("2d");            canvas.width = crop.width;            canvas.height = crop.height;            ctx.drawImage(_this._image, crop.left, crop.top, crop.width, crop.height, 0, 0, crop.width, crop.height);            _this._create_image_with_datasrc(canvas.toDataURL("image/png"), function() {               _this.hide_messagebox();            });         });         this.crop_close();      },      crop_open: function () {         if(!this._image) return this._hideAllNav(1);         this._cropping.cropbox.addClass("active");         this._hideAllNav();      },      crop_close: function () {         this._cropping.cropbox.removeClass("active");      },      // Create and update image from datasrc      _create_image_with_datasrc: function(datasrc, callback, file, dataurl) {         var _this = this;         var img = document.createElement("img");            if(dataurl) img.setAttribute('crossOrigin', 'anonymous');         if(file) img.file = file;         img.src = datasrc;         img.onload = function() {            if(dataurl) {                    var canvas = document.createElement('canvas');                    var ctx = canvas.getContext('2d');                    canvas.width = img.width;                    canvas.height = img.height;                    ctx.drawImage(img, 0, 0);                    img.src = canvas.toDataURL('image/png');                }                _this._image = img;            _this._resizeViewport();            _this._paintCanvas();            _this.options.imageUpdated(_this._image);            _this._mainbuttons.removeClass("active");            if(callback && typeof(callback) == "function") callback();            img.onload=null;         };      },      // Functions to controll cropping functionality (drag & resize cropping box)      _bindSelectionDrag: function() {         var _this = this;         var eventbox = this._cropping.cropframe;         var painter = this._painter;         var resizer = this._cropping.cropbox.find(".picedit_drag_resize_box_corner_wrap");         \$(window).on("mousedown touchstart", function(e) {            var evtpos = (e.clientX) ? e : e.originalEvent.touches[0];            _this._cropping.x = evtpos.clientX;               _this._cropping.y = evtpos.clientY;            _this._cropping.w = eventbox[0].clientWidth;               _this._cropping.h = eventbox[0].clientHeight;                                            eventbox.on("mousemove touchmove", function(event) {               event.stopPropagation();                 event.preventDefault();               _this._cropping.is_dragging = true;               if(!_this._cropping.is_resizing) _this._selection_drag_movement(event);            });            resizer.on("mousemove touchmove", function(event) {               event.stopPropagation();                 event.preventDefault();               _this._cropping.is_resizing = true;               _this._selection_resize_movement(event);            });                                            painter.on("mousemove touchmove", function(event) {               event.stopPropagation();                 event.preventDefault();               _this._painter_painting = true;               _this._painter_movement(event);            });         }).on("mouseup touchend", function() {            if (_this._painter_painting) {               _this._painter_merge_drawing();            }            _this._cropping.is_dragging = false;            _this._cropping.is_resizing = false;            _this._painter_painting = false;            _this._variables.prev_pos = false;            eventbox.off("mousemove touchmove");            resizer.off("mousemove touchmove");            painter.off("mousemove touchmove");         });      },      _selection_resize_movement: function(e) {         var cropframe = this._cropping.cropframe[0]         var evtpos = (e.clientX) ? e : e.originalEvent.touches[0];         cropframe.style.width = (this._cropping.w + evtpos.clientX - this._cropping.x) + 'px';            cropframe.style.height = (this._cropping.h + evtpos.clientY - this._cropping.y) + 'px';      },      _selection_drag_movement: function(e) {         var cropframe = this._cropping.cropframe[0];         var evtpos = (e.pageX) ? e : e.originalEvent.touches[0];         this._cropping.cropframe.offset({            top: evtpos.pageY - parseInt(cropframe.clientHeight / 2, 10),            left: evtpos.pageX - parseInt(cropframe.clientWidth / 2, 10)                        });      },      _painter_movement: function(e) {         var pos = {};         var target = e.target || e.srcElement,         rect = target.getBoundingClientRect(),         evtpos = (e.clientX) ? e : e.originalEvent.touches[0];         pos.x = evtpos.clientX - rect.left;         pos.y = evtpos.clientY - rect.top;         if(!this._variables.prev_pos) {            return this._variables.prev_pos = pos;         }         this._painter_ctx.beginPath();          this._painter_ctx.moveTo(this._variables.prev_pos.x, this._variables.prev_pos.y);          this._painter_ctx.lineTo(pos.x, pos.y);          this._painter_ctx.stroke();         this._variables.prev_pos = pos;      },      _painter_merge_drawing: function() {         var canvas = document.createElement('canvas');         var ctx = canvas.getContext("2d");         var _this = this;         canvas.width = this._image.width;         canvas.height = this._image.height;         ctx.drawImage(this._image, 0, 0, canvas.width, canvas.height);         ctx.drawImage(this._painter_canvas, 0, 0, canvas.width, canvas.height);         if(canvas.width > 1280 && canvas.height > 800) {            this.set_loading().delay(200).promise().done(function() {               _this._create_image_with_datasrc(canvas.toDataURL("image/png"), function() {                  _this.pen_tool_params_set();                  _this.hide_messagebox();               });            });         }         else {            this._create_image_with_datasrc(canvas.toDataURL("image/png"), function() {               _this.pen_tool_params_set();            });         }      },      // Hide all opened navigation and active buttons (clear plugin's box elements)      _hideAllNav: function (message) {         if(message && message == 1) {            this.set_messagebox("กรุณาเลือกภาพที่ต้องการ !");         }         \$(this.element).find(".picedit_nav_box").removeClass("active").find(".picedit_element").removeClass("active");      },      // Paint image on canvas      _paintCanvas: function () {         this._canvas.width = this._viewport.width;          this._canvas.height = this._viewport.height;         this._ctx.drawImage(this._image, 0, 0, this._viewport.width, this._viewport.height);         \$(this.element).find(".picedit_canvas").css("display", "block");      },                _textCanvas: function () {         this._text.width = this._viewport.width;          this._text.height = this._viewport.height;         this._ctx.drawImage(this._image, 0, 0, this._viewport.width, this._viewport.height);         \$(this.element).find(".picedit_canvas").css("display", "block");      },      // Helper function to translate crop window size to the actual crop size      _calculateCropWindow: function (){         var view = this._viewport;      //viewport sizes         var cropframe = this._cropping.cropframe[0];         var real = {                  //image real sizes            "width": this._image.width,            "height": this._image.height         };         var crop = {                  //crop area sizes and position            "width": cropframe.clientWidth,            "height": cropframe.clientHeight,            "top": (cropframe.offsetTop > 0) ? cropframe.offsetTop : 0.1,            "left": (cropframe.offsetLeft > 0) ? cropframe.offsetLeft : 0.1         };         if((crop.width + crop.left) > view.width) crop.width = view.width - crop.left;         if((crop.height + crop.top) > view.height) crop.height = view.height - crop.top;         //calculate width and height for the full image size         var width_percent = crop.width / view.width;         var height_percent = crop.height / view.height;         var area = {            "width": parseInt(real.width * width_percent, 10),            "height": parseInt(real.height * height_percent, 10)         };         //calculate actual top and left crop position         var top_percent = crop.top / view.height;         var left_percent = crop.left / view.width;         area.top = parseInt(real.height * top_percent, 10);         area.left = parseInt(real.width * left_percent, 10);         return area;      },      // Resize the viewport (should be done on every image change)      _resizeViewport: function () {         //get image reference         var img = this._image;         //set correct viewport width         var viewport = {            "width": img.width,            "height": img.height         };         if(this.options.maxWidth != 'auto' && img.width > this.options.maxWidth) viewport.width = this.options.maxWidth;         if(this.options.maxHeight != 'auto' && img.height > this.options.maxHeight) viewport.height = this.options.maxHeight;         //calculate appropriate viewport size and resize the canvas         if(this.options.aspectRatio) {            var resizeWidth = img.width;             var resizeHeight = img.height;            var aspect = resizeWidth / resizeHeight;            if (resizeWidth > viewport.width) {              viewport.width = parseInt(viewport.width, 10);              viewport.height = parseInt(viewport.width / aspect, 10);            }            if (resizeHeight > viewport.height) {              aspect = resizeWidth / resizeHeight;              viewport.height = parseInt(viewport.height, 10);              viewport.width = parseInt(viewport.height * aspect, 10);            }         }         //set the viewport size (resize the canvas)         \$(this.element).css({            "width": viewport.width,            "height": viewport.height         });         //set the global viewport         this._viewport = viewport;         //update interface data (original image width and height)         this._setVariable("resize_width", img.width);         this._setVariable("resize_height", img.height);      },      // Bind click and action callbacks to all buttons with class: ".picedit_control"      _bindControlButtons: function() {         var _this = this;         \$(this.element).find(".picedit_control").bind( "click", function() {            // check to see if the element has a data-action attached to it            var action = \$(this).data("action");            if(action) {               _this[action](this);            }            // handle click actions on top nav buttons            else if(\$(this).hasClass("picedit_action")) {               \$(this).parent(".picedit_element").toggleClass("active").siblings(".picedit_element").removeClass("active");               if(\$(this).parent(".picedit_element").hasClass("active"))                   \$(this).closest(".picedit_nav_box").addClass("active");               else                   \$(this).closest(".picedit_nav_box").removeClass("active");            }         });      },      // Bind input elements to the application variables      _bindInputVariables: function() {         var _this = this;         \$(this.element).find(".picedit_input").bind( "change keypress paste input", function() {            // check to see if the element has a data-action attached to it            var variable = \$(this).data("variable");            if(variable) {               var value = \$(this).val();               _this._variables[variable] = value;            }            if((variable == "resize_width" || variable == "resize_height") && _this._variables.resize_proportions) {               var aspect = _this._image.width / _this._image.height;               if(variable == "resize_width") _this._setVariable("resize_height", parseInt(value / aspect, 10));               else _this._setVariable("resize_width", parseInt(value * aspect, 10));            }         });      },      // Set an interface variable and update the corresponding dom element (M-V binding)      _setVariable: function(variable, value) {         this._variables[variable] = value;         \$(this.element).find('[data-variable="' + variable + '"]').val(value);      },      // form submitted      _formsubmit: function() {         if(!window.FormData) this.set_messagebox("Sorry, the FormData API is not supported!");         else {            var _this = this;            this.set_loading().delay(200).promise().done(function() {               _this._theformdata = new FormData(_this._theform[0]);               if(_this._image) {                  var inputname = \$(_this.inputelement).prop("name") || "file";                  var inputblob = _this._dataURItoBlob(_this._image.src);                  if(!_this._filename) _this._filename = inputblob.type.replace("/", ".");                  else _this._filename = _this._filename.match(/^[^\.]*/) + "." + inputblob.type.match(/[^\/]*\$/);                  _this._theformdata.append(inputname, inputblob, _this._filename);               }               //send request               var request = new XMLHttpRequest();                    request.onprogress = function(e) {                        if(e.lengthComputable) var total = e.total;                        else var total = Math.ceil(inputblob.size * 1.3);                        var progress = Math.ceil(((e.loaded)/total)*100);                        if (progress > 100) progress = 100;                        _this.set_messagebox("Please Wait... Uploading... " + progress + "% Uploaded.", false, false);                    };               request.open(_this._theform.prop("method"), _this._theform.prop("action"), true);               request.onload = function(e) {                  if(this.status != 200) {                            _this.set_messagebox("Server did not accept data!");                        }                        else {                            if(_this.options.redirectUrl === true) window.location.reload();                      else if(_this.options.redirectUrl) window.location = _this.options.redirectUrl;                      else _this.set_messagebox("Data successfully submitted!");                        }                  _this.options.formSubmitted(this);               };               request.send(_this._theformdata);            });         }         return false;      },      _dataURItoBlob: function(dataURI) {         if(!dataURI) return null;         else var mime = dataURI.match(/^data\:(.+?)\;/);         var byteString = atob(dataURI.split(',')[1]);         var ab = new ArrayBuffer(byteString.length);         var ia = new Uint8Array(ab);         for (var i = 0; i < byteString.length; i++) {            ia[i] = byteString.charCodeAt(i);         }         return new Blob([ab], {type: mime[1]});      },      // Prepare the template here      _template: function() {         var template = 'compiled_template_markup';         var _this = this;         \$(this.inputelement).hide().after(template).each(function() {            _this.element = \$(_this.inputelement).next(".picedit_box");            _this.init();         });      }   };    // You don't need to change something below:    // A really lightweight plugin wrapper around the constructor,    // preventing against multiple instantiations and allowing any    // public function (ie. a function whose name doesn't start    // with an underscore) to be called via the jQuery plugin,    // e.g. \$(element).defaultPluginName('functionName', arg1, arg2)    \$.fn[pluginName] = function ( options ) {        var args = arguments;        // Is the first parameter an object (options), or was omitted,        // instantiate a new instance of the plugin.        if (options === undefined || typeof options === 'object') {            return this.each(function () {                // Only allow the plugin to be instantiated once,                // so we check that the element has no plugin instantiation yet                if (!\$.data(this, 'plugin_' + pluginName)) {                    // if it has no instance, create a new one,                    // pass options to our plugin constructor,                    // and store the plugin instance                    // in the elements jQuery data object.                    \$.data(this, 'plugin_' + pluginName, new Plugin( this, options ));                }            });        // If the first parameter is a string and it doesn't start        // with an underscore or "contains" the `init`-function,        // treat this as a call to a public method.        } else if (typeof options === 'string' && options[0] !== '_' && options !== 'init') {            // Cache the method call            // to make it possible            // to return a value            var returns;            this.each(function () {                var instance = \$.data(this, 'plugin_' + pluginName);                // Tests that there's already a plugin-instance                // and checks that the requested public method exists                if (instance instanceof Plugin && typeof instance[options] === 'function') {                    // Call the method of our plugin instance,                    // and pass it the supplied arguments.                    returns = instance[options].apply( instance, Array.prototype.slice.call( args, 1 ) );                }                // Allow instances to be destroyed via the 'destroy' method                if (options === 'destroy') {                  \$.data(this, 'plugin_' + pluginName, null);                }            });            // If the earlier cached method            // gives a value back return the value,            // otherwise return this to preserve chainability.            return returns !== undefined ? returns : this;        }    };}(jQuery, window, document));`