diff --git a/croppic.js b/croppic.js
index 11edc13..9d30c27 100644
--- a/croppic.js
+++ b/croppic.js
@@ -4,22 +4,38 @@
* author: Ognjen "Zmaj Džedaj" Božičković and Mat Steinlin
*/
-(function (window, document) {
+jQuery.fn.extend({
+ Croppic: function (options) {
+ var croppic = new Croppic(this, options);
+ }
+});
+(function (window, document) {
Croppic = function (id, options) {
-
- var that = this;
- that.id = id;
- that.obj = $('#' + id);
- that.outputDiv = that.obj;
+ var that = this;
+ if (id instanceof jQuery) {
+ that.id = id.attr("id");
+ that.obj = id;
+ that.outputDiv = id;
+ } else {
+ that.id = id;
+ that.obj = $('#' + id);
+ that.outputDiv = that.obj;
+ }
+
+ if (typeof (that.id) === "undefined" || that.id === null || that.id.length)
+ that.id = Math.random().toString(36).substr(2, 9);
// DEFAULT OPTIONS
that.options = {
- uploadUrl:'',
+ uploadUrl:"",
uploadData:{},
- cropUrl:'',
+ cropUrl:"",
cropData:{},
- outputUrlId:'',
+ outputUrlId: "",
+ cropW: 0,
+ cropH: 0,
+ zoom: 40,
//styles
imgEyecandy:true,
imgEyecandyOpacity:0.2,
@@ -28,13 +44,13 @@
doubleZoomControls:true,
rotateControls: true,
modal:false,
- customUploadButtonId:'',
- loaderHtml:'',
+ customUploadButtonId:"",
+ loaderHtml:"",
scaleToFill: true,
processInline: false,
- loadPicture:'',
+ loadPicture:"",
onReset: null,
- enableMousescroll: false,
+ enableMousescroll: false,
//callbacks
onBeforeImgUpload: null,
@@ -46,20 +62,21 @@
onAfterImgCrop: null,
onBeforeRemoveCroppedImg: null,
onAfterRemoveCroppedImg: null,
- onError: null,
-
+ onError: null
};
// OVERWRITE DEFAULT OPTIONS
- for (i in options) that.options[i] = options[i];
+ for (var i in options)
+ if (options.hasOwnProperty(i))
+ that.options[i] = options[i];
- // INIT THE WHOLE DAMN THING!!!
+ // INIT THE WHOLE DAMN THING!!!
that.init();
};
Croppic.prototype = {
- id:'',
+ id:"",
imgInitW:0,
imgInitH:0,
imgW:0,
@@ -93,17 +110,19 @@
init: function () {
var that = this;
-
- that.objW = that.obj.width();
- that.objH = that.obj.height();
-
- // reset rotation
+ if (that.options.cropW > 0 || that.options.cropH > 0) {
+ that.objW = that.options.cropW;
+ that.objH = that.options.cropH;
+ } else {
+ that.objW = that.obj.width();
+ that.objH = that.obj.height();
+ }
+
+ // reset rotation
that.actualRotation = 0;
if( $.isEmptyObject(that.defaultImg)){ that.defaultImg = that.obj.find('img'); }
-
that.createImgUploadControls();
-
if( $.isEmptyObject(that.options.loadPicture)){
that.bindImgUploadControl();
}else{
@@ -134,123 +153,139 @@
}
},
- bindImgUploadControl: function(){
-
- var that = this;
-
- // CREATE UPLOAD IMG FORM
- var formHtml = '
';
- that.outputDiv.append(formHtml);
- that.form = that.outputDiv.find('.'+that.id+'_imgUploadForm');
-
-
- // CREATE FALLBACK IE9 IFRAME
- var fileUploadId = that.CreateFallbackIframe();
-
- that.imgUploadControl.off('click');
- that.imgUploadControl.on('click',function(){
- if (fileUploadId === "") {
- that.form.find('input[type="file"]').trigger('click');
- } else {
- //Trigger iframe file input click, otherwise access restriction error
- that.iframeform.find('input[type="file"]').trigger('click');
- }
- });
-
- if( !$.isEmptyObject(that.croppedImg)){
-
- that.cropControlRemoveCroppedImage.on('click',function(){
- if (typeof (that.options.onBeforeRemoveCroppedImg) === typeof(Function)) {
- that.options.onBeforeRemoveCroppedImg.call(that);
- }
-
- that.croppedImg.remove();
- that.croppedImg = {};
- $(this).hide();
-
- if (typeof (that.options.onAfterRemoveCroppedImg) === typeof(Function)) {
- that.options.onAfterRemoveCroppedImg.call(that);
- }
-
- if( !$.isEmptyObject(that.defaultImg)){
- that.obj.append(that.defaultImg);
- }
-
- if(that.options.outputUrlId !== ''){ $('#'+that.options.outputUrlId).val(''); }
-
- });
-
- }
-
- that.form.find('input[type="file"]').change(function(){
-
- if (that.options.onBeforeImgUpload) that.options.onBeforeImgUpload.call(that);
-
- that.showLoader();
- that.imgUploadControl.hide();
-
- if(that.options.processInline){
- // Checking Browser Support for FileReader API
- if (typeof FileReader == "undefined"){
- if (that.options.onError) that.options.onError.call(that,"processInline is not supported by your Browser");
- that.reset();
- }else{
- var reader = new FileReader();
- reader.onload = function (e) {
- var image = new Image();
- image.src = e.target.result;
- image.onload = function(){
- that.imgInitW = that.imgW = image.width;
- that.imgInitH = that.imgH = image.height;
-
- if(that.options.modal){ that.createModal(); }
- if( !$.isEmptyObject(that.croppedImg)){ that.croppedImg.remove(); }
-
- that.imgUrl=image.src;
-
- that.obj.append('
');
-
- that.initCropper();
- that.hideLoader();
-
- if (that.options.onAfterImgUpload) that.options.onAfterImgUpload.call(that);
-
- }
- };
- reader.readAsDataURL(that.form.find('input[type="file"]')[0].files[0]);
- }
- } else {
-
- try {
- // other modern browsers
- formData = new FormData(that.form[0]);
- } catch(e) {
- // IE10 MUST have all form items appended as individual form key / value pairs
- formData = new FormData();
- formData.append('img', that.form.find("input[type=file]")[0].files[0]);
-
- }
-
- for (var key in that.options.uploadData) {
- if( that.options.uploadData.hasOwnProperty(key) ) {
- formData.append( key , that.options.uploadData[key] );
- }
- }
-
- $.ajax({
- url: that.options.uploadUrl,
- data: formData,
- context: document.body,
- cache: false,
- contentType: false,
- processData: false,
- type: 'POST'
- }).always(function (data) {
- that.afterUpload(data);
- });
- }
- });
+ bindImgUploadControl: function() {
+
+ var that = this;
+
+ // CREATE UPLOAD IMG FORM
+ var formHtml = '';
+ that.outputDiv.append(formHtml);
+ that.form = that.outputDiv.find('.' + that.id + '_imgUploadForm');
+
+ // CREATE FALLBACK IE9 IFRAME
+ var fileUploadId = that.CreateFallbackIframe();
+
+ that.imgUploadControl.off('click');
+ that.imgUploadControl.on('click', function() {
+ if (fileUploadId === "") {
+ that.form.find('input[type="file"]').trigger('click');
+ } else {
+ //Trigger iframe file input click, otherwise access restriction error
+ that.iframeform.find('input[type="file"]').trigger('click');
+ }
+ });
+
+ if (!$.isEmptyObject(that.croppedImg)) {
+ that.cropControlRemoveCroppedImage.on('click', function() {
+ if (typeof (that.options.onBeforeRemoveCroppedImg) === typeof(Function)) {
+ that.options.onBeforeRemoveCroppedImg.call(that);
+ }
+ that.croppedImg.remove();
+ that.croppedImg = {};
+ $(this).hide();
+
+ if (typeof (that.options.onAfterRemoveCroppedImg) === typeof(Function)) {
+ that.options.onAfterRemoveCroppedImg.call(that);
+ }
+
+ if (!$.isEmptyObject(that.defaultImg)) {
+ that.obj.append(that.defaultImg);
+ }
+
+ if (that.options.outputUrlId !== '') {
+ $('#' + that.options.outputUrlId).val('');
+ }
+ });
+ }
+ that.form.find('input[type="file"]').change(function() {
+ var val = $(this).val();
+ var ext = val.substring(val.lastIndexOf('.') + 1).toLowerCase();
+ var allowedExtension = ['jpeg', 'jpg', 'png', 'gif'];
+ if (allowedExtension.indexOf(ext)!==-1) {
+ if (that.options.onBeforeImgUpload)
+ that.options.onBeforeImgUpload.call(that);
+
+ that.showLoader();
+ that.imgUploadControl.hide();
+
+ if (that.options.processInline) {
+ // Checking Browser Support for FileReader API
+ if (typeof FileReader == "undefined") {
+ if (that.options.onError) that.options.onError.call(that, "processInline is not supported by your Browser");
+ that.reset();
+ } else {
+ var reader = new FileReader();
+ reader.onload = function(e) {
+ var image = new Image();
+ image.src = e.target.result;
+ image.onload = function() {
+ that.imgInitW = that.imgW = image.width;
+ that.imgInitH = that.imgH = image.height;
+
+ if (that.objW >= image.width && that.objH >= image.height) {
+ that.afterCrop({
+ status: "success",
+ url: image.src
+ });
+ } else {
+ if (that.options.modal) {
+ that.createModal();
+ }
+ if (!$.isEmptyObject(that.croppedImg)) {
+ that.croppedImg.remove();
+ }
+
+ that.imgUrl = image.src;
+
+ that.obj.append('
');
+
+ that.initCropper();
+ that.hideLoader();
+
+ if (that.options.onAfterImgUpload)
+ that.options.onAfterImgUpload.call(that);
+ }
+ }
+ };
+ reader.readAsDataURL(that.form.find('input[type="file"]')[0].files[0]);
+ }
+ } else {
+ var formData;
+ try {
+ // other modern browsers
+ formData = new FormData(that.form[0]);
+ } catch (e) {
+ // IE10 MUST have all form items appended as individual form key / value pairs
+ formData = new FormData();
+ formData.append('img', that.form.find("input[type=file]")[0].files[0]);
+
+ }
+
+ for (var key in that.options.uploadData) {
+ if (that.options.uploadData.hasOwnProperty(key)) {
+ formData.append(key, that.options.uploadData[key]);
+ }
+ }
+
+ $.ajax({
+ url: that.options.uploadUrl,
+ data: formData,
+ context: document.body,
+ cache: false,
+ contentType: false,
+ processData: false,
+ type: 'POST'
+ }).always(function(data) {
+ that.afterUpload(data);
+ });
+ }
+ } else {
+ $(this).val("");
+ alert("Please select an image");
+ }
+ });
+
},
loadExistingImage: function(){
var that = this;
@@ -292,23 +327,15 @@
afterUpload: function(data){
var that = this;
- response = typeof data =='object' ? data : jQuery.parseJSON(data);
-
-
- if (response.status == 'success') {
-
+ var response = typeof data =='object' ? data : jQuery.parseJSON(data);
+ if (response.status === 'success') {
that.imgInitW = that.imgW = response.width;
that.imgInitH = that.imgH = response.height;
-
if (that.options.modal) { that.createModal(); }
if (!$.isEmptyObject(that.croppedImg)) { that.croppedImg.remove(); }
-
that.imgUrl = response.url;
-
- var img = $('
')
-
+ var img = $('
');
that.obj.append(img);
-
img.load(function(){
that.initCropper();
that.hideLoader();
@@ -319,21 +346,20 @@
}
- if (response.status == 'error') {
+ if (response.status === 'error') {
alert(response.message);
if (that.options.onError) that.options.onError.call(that,response.message);
that.hideLoader();
- setTimeout( function(){ that.reset(); },2000)
+ setTimeout(function() { that.reset(); }, 2000);
}
},
-
createModal: function(){
var that = this;
var marginTop = that.windowH/2-that.objH/2;
- var modalHTML = '';
+ var modalHtml = '';
- $('body').append(modalHTML);
+ $('body').append(modalHtml);
that.modal = $('#croppicModal');
@@ -342,28 +368,23 @@
},
destroyModal: function(){
var that = this;
-
that.obj = that.outputDiv;
that.modal.remove();
that.modal = {};
},
initCropper: function(){
var that = this;
-
/*SET UP SOME VARS*/
that.img = that.obj.find('img');
that.img.wrap('');
-
/*INIT DRAGGING*/
that.createCropControls();
-
if(that.options.imgEyecandy){ that.createEyecandy(); }
that.initDrag();
that.initialScaleImg();
},
createEyecandy: function(){
var that = this;
-
that.imgEyecandy = that.img.clone();
that.imgEyecandy.css({'z-index':'0','opacity':that.options.imgEyecandyOpacity}).appendTo(that.obj);
},
@@ -374,8 +395,8 @@
initialScaleImg:function(){
var that = this;
that.zoom(-that.imgInitW);
- that.zoom(40);
-
+ if(that.options.zoom>0)
+ that.zoom(that.options.zoom);
// Adding mousewheel zoom capabilities
if (that.options.enableMousescroll){
that.img.on('mousewheel', function(event) {
@@ -384,15 +405,12 @@
});
}
// initial center image
-
that.img.css({'left': -(that.imgW -that.objW)/2, 'top': -(that.imgH -that.objH)/2, 'position':'relative'});
if(that.options.imgEyecandy){ that.imgEyecandy.css({'left': -(that.imgW -that.objW)/2, 'top': -(that.imgH -that.objH)/2, 'position':'relative'}); }
},
-
createCropControls: function(){
var that = this;
-
// CREATE CONTROLS
var cropControlZoomMuchIn = '';
var cropControlZoomIn = '';
@@ -402,10 +420,7 @@
var cropControlRotateRight = '';
var cropControlCrop = '';
var cropControlReset = '';
-
- var html;
-
- if(that.options.doubleZoomControls){
+ if(that.options.doubleZoomControls){
cropControlZoomMuchIn = '';
cropControlZoomMuchOut = '';
}
@@ -414,7 +429,7 @@
cropControlRotateRight = '';
}
- html = ''+ cropControlZoomMuchIn + cropControlZoomIn + cropControlZoomOut + cropControlZoomMuchOut + cropControlRotateLeft + cropControlRotateRight + cropControlCrop + cropControlReset + '
';
+ var html = ''+ cropControlZoomMuchIn + cropControlZoomIn + cropControlZoomOut + cropControlZoomMuchOut + cropControlRotateLeft + cropControlRotateRight + cropControlCrop + cropControlReset + '
';
that.obj.append(html);
@@ -450,11 +465,9 @@
},
initDrag:function(){
var that = this;
-
that.img.on("mousedown touchstart", function(e) {
e.preventDefault(); // disable selection
-
var pageX;
var pageY;
var userAgent = window.navigator.userAgent;
@@ -466,48 +479,49 @@
pageY = e.pageY;
}
- var z_idx = that.img.css('z-index'),
- drg_h = that.img.outerHeight(),
- drg_w = that.img.outerWidth(),
- pos_y = that.img.offset().top + drg_h - pageY,
- pos_x = that.img.offset().left + drg_w - pageX;
-
+ var zIdx = that.img.css('z-index'),
+ drgH = that.img.outerHeight(),
+ drgW = that.img.outerWidth(),
+ posY = that.img.offset().top + drgH - pageY,
+ posX = that.img.offset().left + drgW - pageX;
that.img.css('z-index', 1000).on("mousemove touchmove", function(e) {
-
var imgTop;
var imgLeft;
-
if (userAgent.match(/iPad/i) || userAgent.match(/iPhone/i) || userAgent.match(/android/i) || (e.pageY && e.pageX) == undefined) {
- imgTop = e.originalEvent.touches[0].pageY + pos_y - drg_h;
- imgLeft = e.originalEvent.touches[0].pageX + pos_x - drg_w;
+ imgTop = e.originalEvent.touches[0].pageY + posY - drgH;
+ imgLeft = e.originalEvent.touches[0].pageX + posX - drgW;
} else {
- imgTop = e.pageY + pos_y - drg_h;
- imgLeft = e.pageX + pos_x - drg_w;
+ imgTop = e.pageY + posY - drgH;
+ imgLeft = e.pageX + posX - drgW;
}
that.img.offset({
top:imgTop,
left:imgLeft
}).on("mouseup", function() {
- $(this).removeClass('draggable').css('z-index', z_idx);
+ $(this).removeClass('draggable').css('z-index', zIdx);
});
if(that.options.imgEyecandy){ that.imgEyecandy.offset({ top:imgTop, left:imgLeft }); }
-
- if (that.objH < that.imgH) {
+ var maxTop;
+ if (that.objH < that.imgH) {
if (parseInt(that.img.css('top')) > 0) { that.img.css('top', 0); if (that.options.imgEyecandy) { that.imgEyecandy.css('top', 0);}}
- var maxTop = -( that.imgH - that.objH); if (parseInt(that.img.css('top')) < maxTop) { that.img.css('top', maxTop); if (that.options.imgEyecandy) { that.imgEyecandy.css('top', maxTop); }}
+ maxTop = -( that.imgH - that.objH);
+ if (parseInt(that.img.css('top')) < maxTop) { that.img.css('top', maxTop); if (that.options.imgEyecandy) { that.imgEyecandy.css('top', maxTop); }}
}else{
if (parseInt(that.img.css('top')) < 0) { that.img.css('top', 0); if (that.options.imgEyecandy) { that.imgEyecandy.css('top', 0); }}
- var maxTop = that.objH - that.imgH; if (parseInt(that.img.css('top')) > maxTop) { that.img.css('top', maxTop);if (that.options.imgEyecandy) {that.imgEyecandy.css('top', maxTop); }}
+ maxTop = that.objH - that.imgH;
+ if (parseInt(that.img.css('top')) > maxTop) { that.img.css('top', maxTop);if (that.options.imgEyecandy) {that.imgEyecandy.css('top', maxTop); }}
}
-
- if (that.objW < that.imgW) {
+ var maxLeft;
+ if (that.objW < that.imgW) {
if( parseInt( that.img.css('left')) > 0 ){ that.img.css('left',0); if(that.options.imgEyecandy){ that.imgEyecandy.css('left', 0); }}
- var maxLeft = -( that.imgW-that.objW); if( parseInt( that.img.css('left')) < maxLeft){ that.img.css('left', maxLeft); if(that.options.imgEyecandy){ that.imgEyecandy.css('left', maxLeft); } }
+ maxLeft = -( that.imgW-that.objW);
+ if( parseInt( that.img.css('left')) < maxLeft){ that.img.css('left', maxLeft); if(that.options.imgEyecandy){ that.imgEyecandy.css('left', maxLeft); } }
}else{
if( parseInt( that.img.css('left')) < 0 ){ that.img.css('left',0); if(that.options.imgEyecandy){ that.imgEyecandy.css('left', 0); }}
- var maxLeft = ( that.objW - that.imgW); if( parseInt( that.img.css('left')) > maxLeft){ that.img.css('left', maxLeft); if(that.options.imgEyecandy){ that.imgEyecandy.css('left', maxLeft); } }
+ maxLeft = ( that.objW - that.imgW);
+ if( parseInt( that.img.css('left')) > maxLeft){ that.img.css('left', maxLeft); if(that.options.imgEyecandy){ that.imgEyecandy.css('left', maxLeft); } }
}
if (that.options.onImgDrag) that.options.onImgDrag.call(that);
@@ -526,13 +540,13 @@
that.img.css({
'-webkit-transform': 'rotate(' + that.actualRotation + 'deg)',
'-moz-transform': 'rotate(' + that.actualRotation + 'deg)',
- 'transform': 'rotate(' + that.actualRotation + 'deg)',
+ 'transform': 'rotate(' + that.actualRotation + 'deg)'
});
if(that.options.imgEyecandy) {
that.imgEyecandy.css({
'-webkit-transform': 'rotate(' + that.actualRotation + 'deg)',
'-moz-transform': 'rotate(' + that.actualRotation + 'deg)',
- 'transform': 'rotate(' + that.actualRotation + 'deg)',
+ 'transform': 'rotate(' + that.actualRotation + 'deg)'
});
}
if (typeof that.options.onImgRotate == 'function')
@@ -546,7 +560,6 @@
var doPositioning = true;
if( newWidth < that.objW || newHeight < that.objH){
-
if( newWidth - that.objW < newHeight - that.objH ){
newWidth = that.objW;
newHeight = newWidth/ratio;
@@ -554,13 +567,11 @@
newHeight = that.objH;
newWidth = ratio * newHeight;
}
-
doPositioning = false;
}
if(!that.options.scaleToFill && (newWidth > that.imgInitW || newHeight > that.imgInitH)){
-
if( newWidth - that.imgInitW < newHeight - that.imgInitH ){
newWidth = that.imgInitW;
newHeight = newWidth/ratio;
@@ -568,7 +579,6 @@
newHeight = that.imgInitH;
newWidth = ratio * newHeight;
}
-
doPositioning = false;
}
@@ -623,81 +633,108 @@
cropW:that.objW,
rotation:that.actualRotation
};
-
- var formData;
-
- if(typeof FormData == 'undefined'){
- var XHR = new XMLHttpRequest();
- var urlEncodedData = "";
- var urlEncodedDataPairs = [];
-
- for(var key in cropData) {
- urlEncodedDataPairs.push(encodeURIComponent(key) + '=' + encodeURIComponent(cropData[key]));
- }
- for(var key in that.options.cropData) {
- urlEncodedDataPairs.push(encodeURIComponent(key) + '=' + encodeURIComponent(that.options.cropData[key]));
- }
- urlEncodedData = urlEncodedDataPairs.join('&').replace(/%20/g, '+');
-
- XHR.addEventListener('error', function(event) {
- if (that.options.onError) that.options.onError.call(that,"XHR Request failed");
- });
- XHR.onreadystatechange=function(){
- if (XHR.readyState==4 && XHR.status==200)
- {
- that.afterCrop(XHR.responseText);
- }
- }
- XHR.open('POST', that.options.cropUrl);
-
- XHR.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
- XHR.setRequestHeader('Content-Length', urlEncodedData.length);
- XHR.send(urlEncodedData);
-
- }else{
- formData = new FormData();
- for (var key in cropData) {
- if( cropData.hasOwnProperty(key) ) {
- formData.append( key , cropData[key] );
- }
- }
-
- for (var key in that.options.cropData) {
- if( that.options.cropData.hasOwnProperty(key) ) {
- formData.append( key , that.options.cropData[key] );
- }
- }
-
- $.ajax({
- url: that.options.cropUrl,
- data: formData,
- context: document.body,
- cache: false,
- contentType: false,
- processData: false,
- type: 'POST'
- }).always(function (data) {
-
- that.afterCrop(data);
-
- });
- }
-
- //
+ var myCanvas = document.createElement('canvas');
+ if (that.options.processInline && myCanvas.getContext && myCanvas.getContext('2d')) {
+ myCanvas.width = cropData.imgW;
+ myCanvas.height = cropData.imgH;
+ var ctx = myCanvas.getContext('2d');
+ var img = new Image;
+ img.onload = function() {
+ ctx.drawImage(img, 0, 0, cropData.imgW, cropData.imgH);
+ img = new Image;
+ img.onload = function() {
+ myCanvas.width = cropData.cropW;
+ myCanvas.height = cropData.cropH;
+ ctx.drawImage(img, cropData.imgX1, cropData.imgY1, cropData.cropW, cropData.cropH, 0, 0, cropData.cropW, cropData.cropH);
+ that.afterCrop({
+ status: "success",
+ url: myCanvas.toDataURL("image/png")
+ });
+ }
+
+ img.src = myCanvas.toDataURL("image/png");
+ };
+ img.src = that.imgUrl;
+ } else {
+ var formData;
+ var key;
+ if (typeof FormData == 'undefined') {
+ var xhr = new XMLHttpRequest();
+ var urlEncodedData = "";
+ var urlEncodedDataPairs = [];
+
+ for (key in cropData) {
+ if (cropData.hasOwnProperty(key)) {
+ urlEncodedDataPairs.push(encodeURIComponent(key) + '=' + encodeURIComponent(cropData[key]));
+ }
+ }
+
+ for (key in that.options.cropData) {
+ if (that.options.cropData.hasOwnProperty(key)) {
+ urlEncodedDataPairs.push(encodeURIComponent(key) + '=' + encodeURIComponent(that.options.cropData[key]));
+ }
+ }
+ urlEncodedData = urlEncodedDataPairs.join('&').replace(/%20/g, '+');
+
+ xhr.addEventListener('error', function () {
+ if (that.options.onError) that.options.onError.call(that, "XHR Request failed");
+ });
+ xhr.onreadystatechange = function () {
+ if (xhr.readyState === 4 && xhr.status === 200) {
+ that.afterCrop(xhr.responseText);
+ }
+ }
+ xhr.open('POST', that.options.cropUrl);
+
+ xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
+ xhr.setRequestHeader('Content-Length', urlEncodedData.length);
+
+ xhr.send(urlEncodedData);
+
+ } else {
+ formData = new FormData();
+ for (key in cropData) {
+ if (cropData.hasOwnProperty(key)) {
+ formData.append(key, cropData[key]);
+ }
+ }
+
+ for (key in that.options.cropData) {
+ if (that.options.cropData.hasOwnProperty(key)) {
+ formData.append(key, that.options.cropData[key]);
+ }
+ }
+
+ $.ajax({
+ url: that.options.cropUrl,
+ data: formData,
+ context: document.body,
+ cache: false,
+ contentType: false,
+ processData: false,
+ type: 'POST'
+ }).always(function (data) {
+
+ that.afterCrop(data);
+
+ });
+ }
+ }
},
afterCrop: function (data) {
var that = this;
- try {
+ var response;
+ try {
response = jQuery.parseJSON(data);
}
catch(err) {
response = typeof data =='object' ? data : jQuery.parseJSON(data);
}
- if (response.status == 'success') {
-
- if (that.options.imgEyecandy)
+ if (response.status === 'success') {
+
+ if (that.options.imgEyecandy && that.imgEyecandy.length>0)
that.imgEyecandy.hide();
that.destroy();
@@ -711,20 +748,18 @@
that.hideLoader();
}
- if (response.status == 'error') {
+ if (response.status === 'error') {
if (that.options.onError) that.options.onError.call(that,response.message);
that.hideLoader();
- setTimeout( function(){ that.reset(); },2000)
+ setTimeout(function() { that.reset(); }, 2000);
}
if (that.options.onAfterImgCrop) that.options.onAfterImgCrop.call(that, response);
},
showLoader:function(){
var that = this;
-
that.obj.append(that.options.loaderHtml);
that.loader = that.obj.find('.loader');
-
},
hideLoader:function(){
var that = this;
@@ -764,12 +799,11 @@
typeof (new XMLHttpRequest()).upload != "undefined");
},
CreateFallbackIframe: function () {
- var that = this;
-
- if (!that.isAjaxUploadSupported()) {
-
+ var that = this;
+ if (!that.isAjaxUploadSupported()) {
+ var iframe;
if (jQuery.isEmptyObject(that.iframeobj)) {
- var iframe = document.createElement("iframe");
+ iframe = document.createElement("iframe");
iframe.setAttribute("id", that.id + "_upload_iframe");
iframe.setAttribute("name", that.id + "_upload_iframe");
iframe.setAttribute("width", "0");
@@ -845,21 +879,19 @@
}
},
getIframeContentJSON: function (iframe) {
+ var response;
try {
- var doc = iframe.contentDocument ? iframe.contentDocument : iframe.contentWindow.document,
- response;
+ var doc = iframe.contentDocument ? iframe.contentDocument : iframe.contentWindow.document;
- var innerHTML = doc.body.innerHTML;
- if (innerHTML.slice(0, 5).toLowerCase() == "" && innerHTML.slice(-6).toLowerCase() == "
") {
- innerHTML = doc.body.firstChild.firstChild.nodeValue;
+ var innerHtml = doc.body.innerHTML;
+ if (innerHtml.slice(0, 5).toLowerCase() === "" && innerHtml.slice(-6).toLowerCase() === "
") {
+ innerHtml = doc.body.firstChild.firstChild.nodeValue;
}
- response = jQuery.parseJSON(innerHTML);
+ response = jQuery.parseJSON(innerHtml);
} catch (err) {
response = { success: false };
}
-
return response;
}
-
};
})(window, document);