diff --git a/README.md b/README.md index b3e744d..98bede7 100644 --- a/README.md +++ b/README.md @@ -64,6 +64,15 @@ See the demo here: http://andyvr.github.io/picEdit/ _type: string, default: false_ - an image to be loaded in the editor by default ('path/to/image')
use only images located on the same server to prevent CORS issues
+**submitForm** + +_type: bool, default: true_ - boolean to automatically submit the form, set to true. To wait to submit the form (if multiple image inputs are present), set all but the last instance to false. + +``` + $('#image_1').picEdit({ submitForm: false }); + $('#image_2').picEdit({ submitForm: true }); +``` + **maxWidth** _type: int/auto, default: 400_ - max width for the picedit element (the original image will not be re-scaled if it's wider than maxWidth, this parameter controls image preview only) diff --git a/dist/js/picedit.js b/dist/js/picedit.js index fec4da9..21a19e9 100644 --- a/dist/js/picedit.js +++ b/dist/js/picedit.js @@ -27,6 +27,7 @@ maxWidth: 400, // Max width parameter maxHeight: 'auto', // Max height parameter aspectRatio: true, // Preserve aspect ratio + submitForm: true, defaultImage: false // Default image to be used with the plugin }; @@ -686,36 +687,47 @@ else { var _this = this; this.set_loading().delay(200).promise().done(function() { - _this._theformdata = new FormData(_this._theform[0]); + try { + if(window.form_data) { + console.log("Form Data Already Created"); + } else { + window.form_data = new FormData(_this._theform[0]); + console.log("Creating Form Data"); + } + } + catch(e) { + } 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); + window.form_data.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); + if(_this.options.submitForm === true) { + 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(window.form_data); + } }); } return false; @@ -803,4 +815,4 @@ } }; -}(jQuery, window, document)); \ No newline at end of file +}(jQuery, window, document)); diff --git a/dist/js/picedit.min.js b/dist/js/picedit.min.js index 4806cd4..34cbd91 100644 --- a/dist/js/picedit.min.js +++ b/dist/js/picedit.min.js @@ -4,4 +4,4 @@ * Author: Andy V. * License: MIT */ -!function(i,t,e,a){"use strict";function s(t,e){this.inputelement=t,this.element=t,this.options=i.extend({},o,e),this._defaults=o,this._name=n,this._image=!1,this._filename="",this._variables={},this._template()}var n="picEdit",o={imageUpdated:function(){},formSubmitted:function(){},redirectUrl:!1,maxWidth:400,maxHeight:"auto",aspectRatio:!0,defaultImage:!1};s.prototype={init:function(){function a(i){if(i||i.length){var t=i[0];s._filename||(s._filename=t.name);var e=new FileReader;e.onload=function(i){s._create_image_with_datasrc(i.target.result,!1,t)},e.readAsDataURL(t)}}var s=this,n=i(this.inputelement).prop("type");if("file"==n?this._fileinput=i(this.inputelement):(i(this.inputelement).after(''),this._fileinput=i(this.inputelement).next("input")),!this.check_browser_capabilities())return"file"!=n&&(i(this.inputelement).prop("type","file"),i(this._fileinput).remove()),i(this.inputelement).show(),void i(this.element).remove();if(this._canvas=i(this.element).find(".picedit_canvas > canvas")[0],this._ctx=this._canvas.getContext("2d"),this._videobox=i(this.element).find(".picedit_video"),this._painter=i(this.element).find(".picedit_painter"),this._painter_canvas=this._painter.children("canvas")[0],this._painter_ctx=this._painter_canvas.getContext("2d"),this._painter_painting=!1,this._messagebox=i(this.element).find(".picedit_message"),this._messagetimeout=!1,this._mainbuttons=i(this.element).find(".picedit_action_btns"),this._viewport={width:0,height:0},this._cropping={is_dragging:!1,is_resizing:!1,left:0,top:0,width:0,height:0,cropbox:i(this.element).find(".picedit_drag_resize"),cropframe:i(this.element).find(".picedit_drag_resize_box")},i(this.element).find(".picedit_canvas_box").on("drop",function(t){t.preventDefault(),i(this).removeClass("dragging");var e=(t.dataTransfer||t.originalEvent.dataTransfer).files;a(e)}).on("dragover",function(t){t.preventDefault(),i(this).addClass("dragging")}).on("dragleave",function(t){t.preventDefault(),i(this).removeClass("dragging")}),i(this._fileinput).on("change",function(){a(this.files)}),!t.Clipboard){var o=i(e.createElement("div"));o.prop("contenteditable","true").css({position:"absolute",left:-999,width:0,height:0,overflow:"hidden",outline:0,opacity:0}),i(e.body).prepend(o)}i(e).on("paste",function(i){var t,e=(i.clipboardData||i.originalEvent.clipboardData).items;if(e){for(var a=0;a1280&&i.height>800?this.set_loading().delay(200).promise().done(function(){a._create_image_with_datasrc(i.toDataURL("image/png"),function(){a.pen_tool_params_set(),a.hide_messagebox()})}):this._create_image_with_datasrc(i.toDataURL("image/png"),function(){a.pen_tool_params_set()})},_hideAllNav:function(t){t&&1==t&&this.set_messagebox("Open an image or use your camera to make a photo!"),i(this.element).find(".picedit_nav_box").removeClass("active").find(".picedit_element").removeClass("active")},_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),i(this.element).find(".picedit_canvas").css("display","block")},_calculateCropWindow:function(){var i=this._viewport,t=this._cropping.cropframe[0],e={width:this._image.width,height:this._image.height},a={width:t.clientWidth,height:t.clientHeight,top:t.offsetTop>0?t.offsetTop:.1,left:t.offsetLeft>0?t.offsetLeft:.1};a.width+a.left>i.width&&(a.width=i.width-a.left),a.height+a.top>i.height&&(a.height=i.height-a.top);var s=a.width/i.width,n=a.height/i.height,o={width:parseInt(e.width*s,10),height:parseInt(e.height*n,10)},c=a.top/i.height,r=a.left/i.width;return o.top=parseInt(e.height*c,10),o.left=parseInt(e.width*r,10),o},_doRotation:function(i){var t,a,s=i*Math.PI/180,n=Math.cos(s),o=Math.sin(s);0>o&&(o=-o),0>n&&(n=-n),t=this._image.height*o+this._image.width*n,a=this._image.height*n+this._image.width*o;var c=e.createElement("canvas"),r=c.getContext("2d");c.width=parseInt(t,10),c.height=parseInt(a,10);var d=c.width/2,_=c.height/2;r.clearRect(0,0,c.width,c.height),r.translate(d,_),r.rotate(s),r.drawImage(this._image,-this._image.width/2,-this._image.height/2),this._image.src=c.toDataURL("image/png"),this._paintCanvas(),this.options.imageUpdated(this._image)},_resizeViewport:function(){var t=this._image,e={width:t.width,height:t.height};if("auto"!=this.options.maxWidth&&t.width>this.options.maxWidth&&(e.width=this.options.maxWidth),"auto"!=this.options.maxHeight&&t.height>this.options.maxHeight&&(e.height=this.options.maxHeight),this.options.aspectRatio){var a=t.width,s=t.height,n=a/s;a>e.width&&(e.width=parseInt(e.width,10),e.height=parseInt(e.width/n,10)),s>e.height&&(n=a/s,e.height=parseInt(e.height,10),e.width=parseInt(e.height*n,10))}i(this.element).css({width:e.width,height:e.height}),this._viewport=e,this._setVariable("resize_width",t.width),this._setVariable("resize_height",t.height)},_bindControlButtons:function(){var t=this;i(this.element).find(".picedit_control").bind("click",function(){var e=i(this).data("action");e?t[e](this):i(this).hasClass("picedit_action")&&(i(this).parent(".picedit_element").toggleClass("active").siblings(".picedit_element").removeClass("active"),i(this).parent(".picedit_element").hasClass("active")?i(this).closest(".picedit_nav_box").addClass("active"):i(this).closest(".picedit_nav_box").removeClass("active"))})},_bindInputVariables:function(){var t=this;i(this.element).find(".picedit_input").bind("change keypress paste input",function(){var e=i(this).data("variable");if(e){var a=i(this).val();t._variables[e]=a}if(("resize_width"==e||"resize_height"==e)&&t._variables.resize_proportions){var s=t._image.width/t._image.height;"resize_width"==e?t._setVariable("resize_height",parseInt(a/s,10)):t._setVariable("resize_width",parseInt(a*s,10))}})},_setVariable:function(t,e){this._variables[t]=e,i(this.element).find('[data-variable="'+t+'"]').val(e)},_formsubmit:function(){if(t.FormData){var e=this;this.set_loading().delay(200).promise().done(function(){if(e._theformdata=new FormData(e._theform[0]),e._image){var a=i(e.inputelement).prop("name")||"file",s=e._dataURItoBlob(e._image.src);e._filename=e._filename?e._filename.match(/^[^\.]*/)+"."+s.type.match(/[^\/]*$/):s.type.replace("/","."),e._theformdata.append(a,s,e._filename)}var n=new XMLHttpRequest;n.onprogress=function(i){if(i.lengthComputable)var t=i.total;else var t=Math.ceil(1.3*s.size);var a=Math.ceil(i.loaded/t*100);a>100&&(a=100),e.set_messagebox("Please Wait... Uploading... "+a+"% Uploaded.",!1,!1)},n.open(e._theform.prop("method"),e._theform.prop("action"),!0),n.onload=function(){200!=this.status?e.set_messagebox("Server did not accept data!"):e.options.redirectUrl===!0?t.location.reload():e.options.redirectUrl?t.location=e.options.redirectUrl:e.set_messagebox("Data successfully submitted!"),e.options.formSubmitted(this)},n.send(e._theformdata)})}else this.set_messagebox("Sorry, the FormData API is not supported!");return!1},_dataURItoBlob:function(i){if(!i)return null;for(var t=i.match(/^data\:(.+?)\;/),e=atob(i.split(",")[1]),a=new ArrayBuffer(e.length),s=new Uint8Array(a),n=0;n'),this._fileinput=i(this.inputelement).next("input")),!this.check_browser_capabilities())return"file"!=n&&(i(this.inputelement).prop("type","file"),i(this._fileinput).remove()),i(this.inputelement).show(),void i(this.element).remove();if(this._canvas=i(this.element).find(".picedit_canvas > canvas")[0],this._ctx=this._canvas.getContext("2d"),this._videobox=i(this.element).find(".picedit_video"),this._painter=i(this.element).find(".picedit_painter"),this._painter_canvas=this._painter.children("canvas")[0],this._painter_ctx=this._painter_canvas.getContext("2d"),this._painter_painting=!1,this._messagebox=i(this.element).find(".picedit_message"),this._messagetimeout=!1,this._mainbuttons=i(this.element).find(".picedit_action_btns"),this._viewport={width:0,height:0},this._cropping={is_dragging:!1,is_resizing:!1,left:0,top:0,width:0,height:0,cropbox:i(this.element).find(".picedit_drag_resize"),cropframe:i(this.element).find(".picedit_drag_resize_box")},i(this.element).find(".picedit_canvas_box").on("drop",function(t){t.preventDefault(),i(this).removeClass("dragging");var e=(t.dataTransfer||t.originalEvent.dataTransfer).files;a(e)}).on("dragover",function(t){t.preventDefault(),i(this).addClass("dragging")}).on("dragleave",function(t){t.preventDefault(),i(this).removeClass("dragging")}),i(this._fileinput).on("change",function(){a(this.files)}),!t.Clipboard){var o=i(e.createElement("div"));o.prop("contenteditable","true").css({position:"absolute",left:-999,width:0,height:0,overflow:"hidden",outline:0,opacity:0}),i(e.body).prepend(o)}i(e).on("paste",function(i){var t,e=(i.clipboardData||i.originalEvent.clipboardData).items;if(e){for(var a=0;a1280&&i.height>800?this.set_loading().delay(200).promise().done(function(){a._create_image_with_datasrc(i.toDataURL("image/png"),function(){a.pen_tool_params_set(),a.hide_messagebox()})}):this._create_image_with_datasrc(i.toDataURL("image/png"),function(){a.pen_tool_params_set()})},_hideAllNav:function(t){t&&1==t&&this.set_messagebox("Open an image or use your camera to make a photo!"),i(this.element).find(".picedit_nav_box").removeClass("active").find(".picedit_element").removeClass("active")},_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),i(this.element).find(".picedit_canvas").css("display","block")},_calculateCropWindow:function(){var i=this._viewport,t=this._cropping.cropframe[0],e={width:this._image.width,height:this._image.height},a={width:t.clientWidth,height:t.clientHeight,top:t.offsetTop>0?t.offsetTop:.1,left:t.offsetLeft>0?t.offsetLeft:.1};a.width+a.left>i.width&&(a.width=i.width-a.left),a.height+a.top>i.height&&(a.height=i.height-a.top);var s=a.width/i.width,n=a.height/i.height,o={width:parseInt(e.width*s,10),height:parseInt(e.height*n,10)},c=a.top/i.height,r=a.left/i.width;return o.top=parseInt(e.height*c,10),o.left=parseInt(e.width*r,10),o},_doRotation:function(i){var t,a,s=i*Math.PI/180,n=Math.cos(s),o=Math.sin(s);0>o&&(o=-o),0>n&&(n=-n),t=this._image.height*o+this._image.width*n,a=this._image.height*n+this._image.width*o;var c=e.createElement("canvas"),r=c.getContext("2d");c.width=parseInt(t,10),c.height=parseInt(a,10);var d=c.width/2,_=c.height/2;r.clearRect(0,0,c.width,c.height),r.translate(d,_),r.rotate(s),r.drawImage(this._image,-this._image.width/2,-this._image.height/2),this._image.src=c.toDataURL("image/png"),this._paintCanvas(),this.options.imageUpdated(this._image)},_resizeViewport:function(){var t=this._image,e={width:t.width,height:t.height};if("auto"!=this.options.maxWidth&&t.width>this.options.maxWidth&&(e.width=this.options.maxWidth),"auto"!=this.options.maxHeight&&t.height>this.options.maxHeight&&(e.height=this.options.maxHeight),this.options.aspectRatio){var a=t.width,s=t.height,n=a/s;a>e.width&&(e.width=parseInt(e.width,10),e.height=parseInt(e.width/n,10)),s>e.height&&(n=a/s,e.height=parseInt(e.height,10),e.width=parseInt(e.height*n,10))}i(this.element).css({width:e.width,height:e.height}),this._viewport=e,this._setVariable("resize_width",t.width),this._setVariable("resize_height",t.height)},_bindControlButtons:function(){var t=this;i(this.element).find(".picedit_control").bind("click",function(){var e=i(this).data("action");e?t[e](this):i(this).hasClass("picedit_action")&&(i(this).parent(".picedit_element").toggleClass("active").siblings(".picedit_element").removeClass("active"),i(this).parent(".picedit_element").hasClass("active")?i(this).closest(".picedit_nav_box").addClass("active"):i(this).closest(".picedit_nav_box").removeClass("active"))})},_bindInputVariables:function(){var t=this;i(this.element).find(".picedit_input").bind("change keypress paste input",function(){var e=i(this).data("variable");if(e){var a=i(this).val();t._variables[e]=a}if(("resize_width"==e||"resize_height"==e)&&t._variables.resize_proportions){var s=t._image.width/t._image.height;"resize_width"==e?t._setVariable("resize_height",parseInt(a/s,10)):t._setVariable("resize_width",parseInt(a*s,10))}})},_setVariable:function(t,e){this._variables[t]=e,i(this.element).find('[data-variable="'+t+'"]').val(e)},_formsubmit:function(){if(t.FormData){var e=this;this.set_loading().delay(200).promise().done(function(){try{t.form_data?console.log("Form Data Already Created"):(t.form_data=new FormData(e._theform[0]),console.log("Creating Form Data"))}catch(a){}if(e._image){var s=i(e.inputelement).prop("name")||"file",n=e._dataURItoBlob(e._image.src);e._filename=e._filename?e._filename.match(/^[^\.]*/)+"."+n.type.match(/[^\/]*$/):n.type.replace("/","."),console.log(s,n,e._filename),t.form_data.append(s,n,e._filename)}if(e.options.submitForm===!0){var o=new XMLHttpRequest;o.onprogress=function(i){if(i.lengthComputable)var t=i.total;else var t=Math.ceil(1.3*n.size);var a=Math.ceil(i.loaded/t*100);a>100&&(a=100),e.set_messagebox("Please Wait... Uploading... "+a+"% Uploaded.",!1,!1)},o.open(e._theform.prop("method"),e._theform.prop("action"),!0),o.onload=function(){200!=this.status?e.set_messagebox("Server did not accept data!"):e.options.redirectUrl===!0?t.location.reload():e.options.redirectUrl?t.location=e.options.redirectUrl:e.set_messagebox("Data successfully submitted!"),e.options.formSubmitted(this)},o.send(t.form_data)}})}else this.set_messagebox("Sorry, the FormData API is not supported!");return!1},_dataURItoBlob:function(i){if(!i)return null;for(var t=i.match(/^data\:(.+?)\;/),e=atob(i.split(",")[1]),a=new ArrayBuffer(e.length),s=new Uint8Array(a),n=0;n 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); + if(_this.options.submitForm === true) { + 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(window.form_data); + } }); } return false; @@ -803,4 +815,4 @@ } }; -}(jQuery, window, document)); \ No newline at end of file +}(jQuery, window, document));