diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..485dee6 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +.idea diff --git a/assets/css/croppic.css b/assets/css/croppic.css index f354a52..fa78d82 100644 --- a/assets/css/croppic.css +++ b/assets/css/croppic.css @@ -74,6 +74,8 @@ .cropControls i.cropControlZoomIn{ background-position:-30px 0px; } .cropControls i.cropControlZoomOut{ background-position:-60px 0px; } .cropControls i.cropControlZoomMuchOut{ background-position:-90px 0px; } + .cropControls i.cropControlRotateLeft{ background-position:-210px 0px; } + .cropControls i.cropControlRotateRight{ background-position:-240px 0px; } .cropControls i.cropControlCrop{ background-position:-120px 0px;} .cropControls i.cropControlUpload{ background-position:-150px 0px;} .cropControls i.cropControlReset{ background-position:-180px 0px;} diff --git a/assets/img/cropperIcons.png b/assets/img/cropperIcons.png index 7bbc200..e94bfcc 100644 Binary files a/assets/img/cropperIcons.png and b/assets/img/cropperIcons.png differ diff --git a/croppic.js b/croppic.js index e94b904..7130c63 100644 --- a/croppic.js +++ b/croppic.js @@ -6,436 +6,449 @@ (function (window, document) { - Croppic = function (id, options) { - - var that = this; - that.id = id; - that.obj = $('#' + id); - that.outputDiv = that.obj; - - // DEFAULT OPTIONS - that.options = { - uploadUrl:'', - uploadData:{}, - cropUrl:'', - cropData:{}, - outputUrlId:'', - //styles - imgEyecandy:true, - imgEyecandyOpacity:0.2, - zoomFactor:10, - doubleZoomControls:true, - modal:false, - customUploadButtonId:'', - loaderHtml:'', - //callbacks - onBeforeImgUpload: null, - onAfterImgUpload: null, - onImgDrag: null, - onImgZoom: null, - onBeforeImgCrop: null, - onAfterImgCrop: null - }; - - // OVERWRITE DEFAULT OPTIONS - for (i in options) that.options[i] = options[i]; - - // INIT THE WHOLE DAMN THING!!! - that.init(); - - }; - - Croppic.prototype = { - id:'', - imgInitW:0, - imgInitH:0, - imgW:0, - imgH:0, - objW:0, - objH:0, - windowW:0, - windowH:$(window).height(), - obj:{}, - outputDiv:{}, - outputUrlObj:{}, - img:{}, - defaultImg:{}, - croppedImg:{}, - imgEyecandy:{}, - form:{}, - cropControlsUpload:{}, - cropControlsCrop:{}, - cropControlZoomMuchIn:{}, - cropControlZoomMuchOut:{}, - cropControlZoomIn:{}, - cropControlZoomOut:{}, - cropControlCrop:{}, - cropControlReset:{}, - cropControlRemoveCroppedImage:{}, - modal:{}, - loader:{}, - - init: function () { - var that = this; - - that.objW = that.obj.width(); - that.objH = that.obj.height(); - - if( $.isEmptyObject(that.defaultImg)){ that.defaultImg = that.obj.find('img'); } - - that.createImgUploadControls(); - that.bindImgUploadControl(); - - }, - createImgUploadControls: function(){ - var that = this; - - var cropControlUpload = ''; - if(that.options.customUploadButtonId ===''){ cropControlUpload = ''; } - var cropControlRemoveCroppedImage = ''; - - if( $.isEmptyObject(that.croppedImg)){ cropControlRemoveCroppedImage=''; } - - var html = '
' + cropControlUpload + cropControlRemoveCroppedImage + '
'; - that.outputDiv.append(html); - - that.cropControlsUpload = that.outputDiv.find('.cropControlsUpload'); - - if(that.options.customUploadButtonId ===''){ that.imgUploadControl = that.outputDiv.find('.cropControlUpload'); } - else{ that.imgUploadControl = $('#'+that.options.customUploadButtonId); that.imgUploadControl.show(); } - - if( !$.isEmptyObject(that.croppedImg)){ - that.cropControlRemoveCroppedImage = that.outputDiv.find('.cropControlRemoveCroppedImage'); - } - - }, - bindImgUploadControl: function(){ - - var that = this; - - // CREATE UPLOAD IMG FORM - var formHtml = ''; - that.outputDiv.append(formHtml); - that.form = that.outputDiv.find('.'+that.id+'_imgUploadForm'); - - that.imgUploadControl.off('click'); - that.imgUploadControl.on('click',function(){ - that.form.find('input[type="file"]').trigger('click'); - }); - - if( !$.isEmptyObject(that.croppedImg)){ - - that.cropControlRemoveCroppedImage.on('click',function(){ - that.croppedImg.remove(); - $(this).hide(); - - 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(); - - var formData = new FormData(that.form[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){ - response = 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; - - that.obj.append(''); - that.initCropper(); - - that.hideLoader(); - - if (that.options.onAfterImgUpload) that.options.onAfterImgUpload.call(that); - - } - - if(response.status=='error'){ - that.obj.append('

'+response.message+'

'); - that.hideLoader(); - setTimeout( function(){ that.reset(); },2000) - } - - - }); - - }); - - }, - createModal: function(){ - var that = this; - - var marginTop = that.windowH/2-that.objH/2; - var modalHTML = '
'+'
'+'
'; - - $('body').append(modalHTML); - - that.modal = $('#croppicModal'); - - that.obj = $('#croppicModalObj'); - - }, - destroyModal: function(){ - var that = this; - - that.obj = that.outputDiv; - that.modal.remove(); - }, - 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); - }, - destroyEyecandy: function(){ - var that = this; - that.imgEyecandy.remove(); - }, - initialScaleImg:function(){ - var that = this; - that.zoom(-that.imgInitW); - that.zoom(40); - - // 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 = ''; - var cropControlZoomOut = ''; - var cropControlZoomMuchOut = ''; - var cropControlCrop = ''; - var cropControlReset = ''; - + Croppic = function ($e, options) { + + var that = this; + if (typeof($e) === "string") + $e = $('#'+$e); + + that.$e = $e; + that.obj = $e; + that.outputDiv = that.obj; + + // DEFAULT OPTIONS + that.options = { + uploadUrl:'', + uploadData:{}, + cropUrl:'', + cropData:{}, + outputUrlId:'', + //styles + imgEyecandy:true, + imgEyecandyOpacity:0.2, + zoomFactor:10, + rotateFactor:5, + doubleZoomControls:true, + modal:false, + customUploadButtonId:'', + loaderHtml:'', + //callbacks + onBeforeImgUpload: null, + onAfterImgUpload: null, + onImgDrag: null, + onImgZoom: null, + onImgRotate: null, + onBeforeImgCrop: null, + onAfterImgCrop: null, + onReset: null + }; + + // OVERWRITE DEFAULT OPTIONS + for (i in options) that.options[i] = options[i]; + + // INIT THE WHOLE DAMN THING!!! + that.init(); + + }; + + Croppic.prototype = { + $e: null, + imgInitW:0, + imgInitH:0, + imgW:0, + imgH:0, + objW:0, + objH:0, + actualRotation: 0, + windowW:0, + windowH:$(window).height(), + obj:{}, + outputDiv:{}, + outputUrlObj:{}, + img:{}, + defaultImg:{}, + croppedImg:{}, + imgEyecandy:{}, + form:{}, + cropControlsUpload:{}, + cropControlsCrop:{}, + cropControlZoomMuchIn:{}, + cropControlZoomMuchOut:{}, + cropControlZoomIn:{}, + cropControlZoomOut:{}, + cropControlCrop:{}, + cropControlReset:{}, + cropControlRemoveCroppedImage:{}, + modal:{}, + loader:{}, + + init: function () { + var that = this; + + 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(); + that.bindImgUploadControl(); + + }, + createImgUploadControls: function(){ + var that = this; + + var cropControlUpload = ''; + if(that.options.customUploadButtonId ===''){ cropControlUpload = ''; } + var cropControlRemoveCroppedImage = ''; + + if( $.isEmptyObject(that.croppedImg)){ cropControlRemoveCroppedImage=''; } + + var html = '
' + cropControlUpload + cropControlRemoveCroppedImage + '
'; + that.outputDiv.append(html); + + that.cropControlsUpload = that.outputDiv.find('.cropControlsUpload'); + + if(that.options.customUploadButtonId ===''){ that.imgUploadControl = that.outputDiv.find('.cropControlUpload'); } + else{ that.imgUploadControl = $('#'+that.options.customUploadButtonId); that.imgUploadControl.show(); } + + if( !$.isEmptyObject(that.croppedImg)){ + that.cropControlRemoveCroppedImage = that.outputDiv.find('.cropControlRemoveCroppedImage'); + } + + }, + bindImgUploadControl: function(){ + + var that = this; + + // CREATE UPLOAD IMG FORM + var formHtml = ''; + that.outputDiv.append(formHtml); + that.form = that.outputDiv.find('.imgUploadForm'); + + that.imgUploadControl.off('click'); + that.imgUploadControl.on('click',function(){ + that.form.find('input[type="file"]').trigger('click'); + }); + + if( !$.isEmptyObject(that.croppedImg)){ + + that.cropControlRemoveCroppedImage.on('click',function(){ + that.croppedImg.remove(); + $(this).hide(); + + 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(e){ + + if (that.options.onBeforeImgUpload) that.options.onBeforeImgUpload.call(that); + + that.showLoader(); + that.imgUploadControl.hide(); + + var reader = new FileReader(); + reader.onload = function(e){ + var img = new Image(); + img.onload = function(){ + that.imgInitW = that.imgW = this.width; + that.imgInitH = that.imgH = this.height; + + if(that.options.modal) + that.createModal(); + + if( !$.isEmptyObject(that.croppedImg)){ that.croppedImg.remove(); } + + that.imgUrl = e.target.result; + that.obj.append(''); + that.initCropper(); + that.hideLoader(); + if (that.options.onAfterImgUpload) + that.options.onAfterImgUpload.call(that); + } + img.src = e.target.result; + } + reader.readAsDataURL(e.target.files[0]); + }); + }, + createModal: function(){ + var that = this; + + var marginTop = that.windowH/2-that.objH/2; + var modalHTML = '
'+'
'+'
'; + + $('body').append(modalHTML); + + that.modal = $('#croppicModal'); + + that.obj = $('#croppicModalObj'); + + }, + destroyModal: function(){ + var that = this; + + that.obj = that.outputDiv; + that.modal.remove(); + }, + 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); + }, + destroyEyecandy: function(){ + var that = this; + that.imgEyecandy.remove(); + }, + initialScaleImg:function(){ + var that = this; + that.zoom(-that.imgInitW); + that.zoom(40); + + // 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 = ''; + var cropControlZoomOut = ''; + var cropControlZoomMuchOut = ''; + var cropControlRotateLeft = ''; + var cropControlRotateRight = ''; + var cropControlCrop = ''; + var cropControlReset = ''; + var html; - - if(that.options.doubleZoomControls){ html = '
'+ cropControlZoomMuchIn + cropControlZoomIn + cropControlZoomOut + cropControlZoomMuchOut + cropControlCrop + cropControlReset + '
'; } - else{ html = '
' + cropControlZoomIn + cropControlZoomOut + cropControlCrop + cropControlReset + '
'; } - - that.obj.append(html); - - that.cropControlsCrop = that.obj.find('.cropControlsCrop'); - - // CACHE AND BIND CONTROLS - if(that.options.doubleZoomControls){ - that.cropControlZoomMuchIn = that.cropControlsCrop.find('.cropControlZoomMuchIn'); - that.cropControlZoomMuchIn.on('click',function(){ that.zoom( that.options.zoomFactor*10 ); }); - - that.cropControlZoomMuchOut = that.cropControlsCrop.find('.cropControlZoomMuchOut'); - that.cropControlZoomMuchOut.on('click',function(){ that.zoom(-that.options.zoomFactor*10); }); - } - - that.cropControlZoomIn = that.cropControlsCrop.find('.cropControlZoomIn'); - that.cropControlZoomIn.on('click',function(){ that.zoom(that.options.zoomFactor); }); - - that.cropControlZoomOut = that.cropControlsCrop.find('.cropControlZoomOut'); - that.cropControlZoomOut.on('click',function(){ that.zoom(-that.options.zoomFactor); }); - - that.cropControlCrop = that.cropControlsCrop.find('.cropControlCrop'); - that.cropControlCrop.on('click',function(){ that.crop(); }); - - that.cropControlReset = that.cropControlsCrop.find('.cropControlReset'); - that.cropControlReset.on('click',function(){ that.reset(); }); - - }, - initDrag:function(){ - var that = this; - - that.img.on("mousedown", function(e) { - - e.preventDefault(); // disable selection - - 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 - e.pageY, - pos_x = that.img.offset().left + drg_w - e.pageX; - - that.img.css('z-index', 1000).on("mousemove", function(e) { - - var imgTop = e.pageY + pos_y - drg_h; - var imgLeft = e.pageX + pos_x - drg_w; - - that.img.offset({ - top:imgTop, - left:imgLeft - }).on("mouseup", function() { - $(this).removeClass('draggable').css('z-index', z_idx); - }); - - if(that.options.imgEyecandy){ that.imgEyecandy.offset({ top:imgTop, left:imgLeft }); } - - 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); } } - - 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); } } - - if (that.options.onImgDrag) that.options.onImgDrag.call(that); - - }); - - }).on("mouseup", function() { - that.img.off("mousemove"); - }).on("mouseout", function() { - that.img.off("mousemove"); - }); - - }, - zoom :function(x){ - var that = this; - var ratio = that.imgW / that.imgH; - var newWidth = that.imgW+x; - var newHeight = newWidth/ratio; - var doPositioning = true; - - if( newWidth < that.objW || newHeight < that.objH){ - - if( newWidth - that.objW < newHeight - that.objH ){ - newWidth = that.objW; - newHeight = newWidth/ratio; - }else{ - newHeight = that.objH; - newWidth = ratio * newHeight; - } - - doPositioning = false; - - } - - if( newWidth > that.imgInitW || newHeight > that.imgInitH){ - - if( newWidth - that.imgInitW < newHeight - that.imgInitH ){ - newWidth = that.imgInitW; - newHeight = newWidth/ratio; - }else{ - newHeight = that.imgInitH; - newWidth = ratio * newHeight; - } - - doPositioning = false; - - } - - that.imgW = newWidth; - that.img.width(newWidth); - - that.imgH = newHeight; - that.img.height(newHeight); - - var newTop = parseInt( that.img.css('top') ) - x/2; - var newLeft = parseInt( that.img.css('left') ) - x/2; - - if( newTop>0 ){ newTop=0;} - if( newLeft>0 ){ newLeft=0;} - - var maxTop = -( newHeight-that.objH); if( newTop < maxTop){ newTop = maxTop; } - var maxLeft = -( newWidth-that.objW); if( newLeft < maxLeft){ newLeft = maxLeft; } - - if( doPositioning ){ - that.img.css({'top':newTop, 'left':newLeft}); - } - - if(that.options.imgEyecandy){ - that.imgEyecandy.width(newWidth); - that.imgEyecandy.height(newHeight); - if( doPositioning ){ - that.imgEyecandy.css({'top':newTop, 'left':newLeft}); - } - } - - if (that.options.onImgZoom) that.options.onImgZoom.call(that); - - }, - crop:function(){ - var that = this; - - if (that.options.onBeforeImgCrop) that.options.onBeforeImgCrop.call(that); - - that.cropControlsCrop.hide(); - that.showLoader(); - - var cropData = { - imgUrl:that.imgUrl, - imgInitW:that.imgInitW, - imgInitH:that.imgInitH, - imgW:that.imgW, - imgH:that.imgH, - imgY1:Math.abs( parseInt( that.img.css('top') ) ), - imgX1:Math.abs( parseInt( that.img.css('left') ) ), - cropH:that.objH, - cropW:that.objW - }; - - var 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({ + + if(that.options.doubleZoomControls){ html = '
'+ cropControlZoomMuchIn + cropControlZoomIn + cropControlZoomOut + cropControlZoomMuchOut + cropControlRotateLeft + cropControlRotateRight + cropControlCrop + cropControlReset + '
'; } + else{ html = '
' + cropControlZoomIn + cropControlZoomOut + cropControlRotateLeft + cropControlRotateRight + cropControlCrop + cropControlReset + '
'; } + + that.obj.append(html); + + that.cropControlsCrop = that.obj.find('.cropControlsCrop'); + + // CACHE AND BIND CONTROLS + if(that.options.doubleZoomControls){ + that.cropControlZoomMuchIn = that.cropControlsCrop.find('.cropControlZoomMuchIn'); + that.cropControlZoomMuchIn.on('click',function(){ that.zoom( that.options.zoomFactor*10 ); }); + + that.cropControlZoomMuchOut = that.cropControlsCrop.find('.cropControlZoomMuchOut'); + that.cropControlZoomMuchOut.on('click',function(){ that.zoom(-that.options.zoomFactor*10); }); + } + + that.cropControlZoomIn = that.cropControlsCrop.find('.cropControlZoomIn'); + that.cropControlZoomIn.on('click',function(){ that.zoom(that.options.zoomFactor); }); + + that.cropControlZoomOut = that.cropControlsCrop.find('.cropControlZoomOut'); + that.cropControlZoomOut.on('click',function(){ that.zoom(-that.options.zoomFactor); }); + + that.cropControlZoomIn = that.cropControlsCrop.find('.cropControlRotateLeft'); + that.cropControlZoomIn.on('click', function() { that.rotate(-that.options.rotateFactor); }); + + that.cropControlZoomOut = that.cropControlsCrop.find('.cropControlRotateRight'); + that.cropControlZoomOut.on('click', function() { that.rotate(that.options.rotateFactor); }); + + that.cropControlCrop = that.cropControlsCrop.find('.cropControlCrop'); + that.cropControlCrop.on('click',function(){ that.crop(); }); + + that.cropControlReset = that.cropControlsCrop.find('.cropControlReset'); + that.cropControlReset.on('click',function(){ that.reset(); }); + + }, + initDrag:function(){ + var that = this; + + that.img.on("mousedown", function(e) { + + e.preventDefault(); // disable selection + + 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 - e.pageY, + pos_x = that.img.offset().left + drg_w - e.pageX; + + that.img.css('z-index', 1000).on("mousemove", function(e) { + + var imgTop = e.pageY + pos_y - drg_h; + var imgLeft = e.pageX + pos_x - drg_w; + + that.img.offset({ + top:imgTop, + left:imgLeft + }).on("mouseup", function() { + $(this).removeClass('draggable').css('z-index', z_idx); + }); + + if(that.options.imgEyecandy){ that.imgEyecandy.offset({ top:imgTop, left:imgLeft }); } + + 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); } } + + 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); } } + + if (that.options.onImgDrag) that.options.onImgDrag.call(that); + + }); + + }).on("mouseup", function() { + that.img.off("mousemove"); + }).on("mouseout", function() { + that.img.off("mousemove"); + }); + + }, + rotate: function(x) { + var that = this; + that.actualRotation += x; + that.img.css({ + '-webkit-transform': 'rotate(' + that.actualRotation + 'deg)', + '-moz-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)' + }); + } + if (typeof that.options.onImgRotate == 'function') + that.options.onImgRotate.call(that); + }, + zoom :function(x){ + var that = this; + var ratio = that.imgW / that.imgH; + var newWidth = that.imgW+x; + var newHeight = newWidth/ratio; + var doPositioning = true; + + if( newWidth < that.objW || newHeight < that.objH){ + + if( newWidth - that.objW < newHeight - that.objH ){ + newWidth = that.objW; + newHeight = newWidth/ratio; + }else{ + newHeight = that.objH; + newWidth = ratio * newHeight; + } + + doPositioning = false; + + } + + if( newWidth > that.imgInitW || newHeight > that.imgInitH){ + + if( newWidth - that.imgInitW < newHeight - that.imgInitH ){ + newWidth = that.imgInitW; + newHeight = newWidth/ratio; + }else{ + newHeight = that.imgInitH; + newWidth = ratio * newHeight; + } + + doPositioning = false; + + } + + that.imgW = newWidth; + that.img.width(newWidth); + + that.imgH = newHeight; + that.img.height(newHeight); + + var newTop = parseInt( that.img.css('top') ) - x/2; + var newLeft = parseInt( that.img.css('left') ) - x/2; + + if( newTop>0 ){ newTop=0;} + if( newLeft>0 ){ newLeft=0;} + + var maxTop = -( newHeight-that.objH); if( newTop < maxTop){ newTop = maxTop; } + var maxLeft = -( newWidth-that.objW); if( newLeft < maxLeft){ newLeft = maxLeft; } + + if( doPositioning ){ + that.img.css({'top':newTop, 'left':newLeft}); + } + + if(that.options.imgEyecandy){ + that.imgEyecandy.width(newWidth); + that.imgEyecandy.height(newHeight); + if( doPositioning ){ + that.imgEyecandy.css({'top':newTop, 'left':newLeft}); + } + } + + if (that.options.onImgZoom) that.options.onImgZoom.call(that); + + }, + crop:function(){ + var that = this; + + if (that.options.onBeforeImgCrop) that.options.onBeforeImgCrop.call(that); + + that.cropControlsCrop.hide(); + that.showLoader(); + + var cropData = { + imgUrl:that.imgUrl, + imgInitW:that.imgInitW, + imgInitH:that.imgInitH, + imgW:that.imgW, + imgH:that.imgH, + imgY1:Math.abs( parseInt( that.img.css('top') ) ), + imgX1:Math.abs( parseInt( that.img.css('left') ) ), + cropH:that.objH, + cropW:that.objW, + rotation:that.actualRotation + }; + + var 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, @@ -443,64 +456,66 @@ contentType: false, processData: false, type: 'POST' - }).always(function(data){ - response = jQuery.parseJSON(data); - if(response.status=='success'){ - - that.imgEyecandy.hide(); - - that.destroy(); - - that.obj.append(''); - if(that.options.outputUrlId !== ''){ $('#'+that.options.outputUrlId).val(response.url); } - - that.croppedImg = that.obj.find('.croppedImg'); - - that.init(); - - that.hideLoader(); - - } - if(response.status=='error'){ - that.obj.append('

'); - } - - if (that.options.onAfterImgCrop) that.options.onAfterImgCrop.call(that); - - }); - }, - showLoader:function(){ - var that = this; - - that.obj.append(that.options.loaderHtml); - that.loader = that.obj.find('.loader'); - - }, - hideLoader:function(){ - var that = this; - that.loader.remove(); - }, - reset:function(){ - var that = this; - that.destroy(); - - that.init(); - - if( !$.isEmptyObject(that.croppedImg)){ - that.obj.append(that.croppedImg); - if(that.options.outputUrlId !== ''){ $('#'+that.options.outputUrlId).val(that.croppedImg.attr('url')); } - } - - }, - destroy:function(){ - var that = this; - if(that.options.modal && !$.isEmptyObject(that.modal) ){ that.destroyModal(); } - if(that.options.imgEyecandy && !$.isEmptyObject(that.imgEyecandy) ){ that.destroyEyecandy(); } - if( !$.isEmptyObject( that.cropControlsUpload ) ){ that.cropControlsUpload.remove(); } - if( !$.isEmptyObject( that.cropControlsCrop ) ){ that.cropControlsCrop.remove(); } - if( !$.isEmptyObject( that.loader ) ){ that.loader.remove(); } - if( !$.isEmptyObject( that.form ) ){ that.form.remove(); } - that.obj.html(''); - } - }; + }).always(function(data){ + response = jQuery.parseJSON(data); + if(response.status=='success'){ + // FIX: check if Eyecandy is active + if (that.options.imgEyecandy) + that.imgEyecandy.hide(); + + that.destroy(); + + that.obj.append(''); + if(that.options.outputUrlId !== ''){ $('#'+that.options.outputUrlId).val(response.url); } + + that.croppedImg = that.obj.find('.croppedImg'); + + that.init(); + + that.hideLoader(); + + } + if(response.status=='error'){ + that.obj.append('

'); + } + + if (that.options.onAfterImgCrop) that.options.onAfterImgCrop.call(that); + + }); + }, + showLoader:function(){ + var that = this; + + that.obj.append(that.options.loaderHtml); + that.loader = that.obj.find('.loader'); + + }, + hideLoader:function(){ + var that = this; + that.loader.remove(); + }, + reset:function(){ + var that = this; + that.destroy(); + + that.init(); + + if( !$.isEmptyObject(that.croppedImg)){ + that.obj.append(that.croppedImg); + if(that.options.outputUrlId !== ''){ $('#'+that.options.outputUrlId).val(that.croppedImg.attr('url')); } + } + if (typeof that.options.onReset == 'function') + that.options.onReset.call(that); + }, + destroy:function(){ + var that = this; + if(that.options.modal && !$.isEmptyObject(that.modal) ){ that.destroyModal(); } + if(that.options.imgEyecandy && !$.isEmptyObject(that.imgEyecandy) ){ that.destroyEyecandy(); } + if( !$.isEmptyObject( that.cropControlsUpload ) ){ that.cropControlsUpload.remove(); } + if( !$.isEmptyObject( that.cropControlsCrop ) ){ that.cropControlsCrop.remove(); } + if( !$.isEmptyObject( that.loader ) ){ that.loader.remove(); } + if( !$.isEmptyObject( that.form ) ){ that.form.remove(); } + that.obj.html(''); + } + }; })(window, document); diff --git a/img_crop_to_file.php b/img_crop_to_file.php index 200462c..fe10599 100644 --- a/img_crop_to_file.php +++ b/img_crop_to_file.php @@ -12,48 +12,60 @@ $imgX1 = $_POST['imgX1']; $cropW = $_POST['cropW']; $cropH = $_POST['cropH']; +$angle = $_POST['rotation']; $jpeg_quality = 100; -$output_filename = "temp/croppedImg_".rand(); - $what = getimagesize($imgUrl); switch(strtolower($what['mime'])) { case 'image/png': - $img_r = imagecreatefrompng($imgUrl); $source_image = imagecreatefrompng($imgUrl); - $type = '.png'; break; case 'image/jpeg': - $img_r = imagecreatefromjpeg($imgUrl); $source_image = imagecreatefromjpeg($imgUrl); - $type = '.jpeg'; break; case 'image/gif': - $img_r = imagecreatefromgif($imgUrl); $source_image = imagecreatefromgif($imgUrl); - $type = '.gif'; break; - default: die('image type not supported'); + default: + echo json_encode(array( + 'success' => false, + 'message' => 'image type not supported', + )); + return; } - - $resizedImage = imagecreatetruecolor($imgW, $imgH); - imagecopyresampled($resizedImage, $source_image, 0, 0, 0, 0, $imgW, - $imgH, $imgInitW, $imgInitH); - - - $dest_image = imagecreatetruecolor($cropW, $cropH); - imagecopyresampled($dest_image, $resizedImage, 0, 0, $imgX1, $imgY1, $cropW, - $cropH, $cropW, $cropH); - - - imagejpeg($dest_image, $output_filename.$type, $jpeg_quality); - - $response = array( - "status" => 'success', - "url" => $output_filename.$type - ); - print json_encode($response); - -?> \ No newline at end of file + +// resize the original image to size of editor +$resizedImage = imagecreatetruecolor($imgW, $imgH); +imagecopyresampled($resizedImage, $source_image, 0, 0, 0, 0, $imgW, $imgH, $imgInitW, $imgInitH); + +// rotate the rezized image +$rotated_image = imagerotate($resizedImage, -$angle, 0); +// find new width & height of rotated image +$rotated_width = imagesx($rotated_image); +$rotated_height = imagesy($rotated_image); +// diff between rotated & original sizes +$dx = $rotated_width - $imgW; +$dy = $rotated_height - $imgH; + +// crop rotated image to fit into original rezized rectangle +$cropped_rotated_image = imagecreatetruecolor($imgW, $imgH); +imagecolortransparent($cropped_rotated_image, imagecolorallocate($cropped_rotated_image, 0, 0, 0)); +imagecopyresampled($cropped_rotated_image, $rotated_image, 0, 0, $dx / 2, $dy / 2, $imgW, $imgH, $imgW, $imgH); + +// crop image into selected area +$final_image = imagecreatetruecolor($cropW, $cropH); +imagecolortransparent($final_image, imagecolorallocate($final_image, 0, 0, 0)); +imagecopyresampled($final_image, $cropped_rotated_image, 0, 0, $imgX1, $imgY1, $cropW, $cropH, $cropW, $cropH); + +ob_start(); +imagejpeg($final_image, null, $jpeg_quality); +$imgData = ob_get_clean(); +ob_end_clean(); + +$response = array( + "status" => 'success', + "url" => 'data:'.$what['mime'].';base64,'.base64_encode($imgData), +); +echo json_encode($response); \ No newline at end of file diff --git a/index.html b/index.html index ff7fa0e..c1ff496 100644 --- a/index.html +++ b/index.html @@ -460,7 +460,7 @@

- +