diff --git a/assets/.DS_Store b/assets/.DS_Store deleted file mode 100644 index 797a908..0000000 Binary files a/assets/.DS_Store and /dev/null differ diff --git a/assets/css/.DS_Store b/assets/css/.DS_Store deleted file mode 100644 index a93ca79..0000000 Binary files a/assets/css/.DS_Store and /dev/null differ diff --git a/assets/img/.DS_Store b/assets/img/.DS_Store deleted file mode 100644 index b531543..0000000 Binary files a/assets/img/.DS_Store and /dev/null differ diff --git a/assets/js/.DS_Store b/assets/js/.DS_Store deleted file mode 100644 index dd90765..0000000 Binary files a/assets/js/.DS_Store and /dev/null differ diff --git a/croppic.js b/croppic.js index 6ab5d14..a007845 100644 --- a/croppic.js +++ b/croppic.js @@ -28,15 +28,20 @@ rotateFactor:5, doubleZoomControls:true, rotateControls: true, + + cropControlCropControls: true, + cropControlResetControls: true, + modal:false, customUploadButtonId:'', + customCropControlId:'', loaderHtml:'', scaleToFill: true, processInline: false, loadPicture:'', onReset: null, - enableMousescroll: false, - + enableMousescroll: false, + //callbacks onBeforeImgUpload: null, onAfterImgUpload: null, @@ -48,7 +53,7 @@ onBeforeRemoveCroppedImg: null, onAfterRemoveCroppedImg: null, onError: null, - + }; // OVERWRITE DEFAULT OPTIONS @@ -56,7 +61,7 @@ // INIT THE WHOLE DAMN THING!!! that.init(); - + }; Croppic.prototype = { @@ -79,124 +84,124 @@ imgEyecandy:{}, form:{}, iframeform: {}, - iframeobj: {}, + iframeobj: {}, cropControlsUpload:{}, cropControlsCrop:{}, cropControlZoomMuchIn:{}, cropControlZoomMuchOut:{}, cropControlZoomIn:{}, - cropControlZoomOut:{}, - cropControlCrop:{}, - cropControlReset:{}, - cropControlRemoveCroppedImage:{}, + 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(); - - if( $.isEmptyObject(that.options.loadPicture)){ + + if( $.isEmptyObject(that.options.loadPicture)){ that.bindImgUploadControl(); - }else{ + }else{ that.loadExistingImage(); - } - + } + }, createImgUploadControls: function(){ var that = this; - + var cropControlUpload = ''; if(that.options.customUploadButtonId ===''){ cropControlUpload = ''; } - var cropControlRemoveCroppedImage = ''; - + var cropControlRemoveCroppedImage = ''; //''; + if( $.isEmptyObject(that.croppedImg)){ cropControlRemoveCroppedImage=''; } if( !$.isEmptyObject(that.options.loadPicture)){ cropControlUpload='';} 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 = ''; + var formHtml = ''; that.outputDiv.append(formHtml); that.form = that.outputDiv.find('.'+that.id+'_imgUploadForm'); - - + + // CREATE FALLBACK IE9 IFRAME - var fileUploadId = that.CreateFallbackIframe(); - + var fileUploadId = that.CreateFallbackIframe(); + that.imgUploadControl.off('click'); - that.imgUploadControl.on('click',function(){ + 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'); - } - }); - + 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(){ + + 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)){ + + 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){ + + if(that.options.processInline){ // Checking Browser Support for FileReader API - if (typeof FileReader == "undefined"){ + 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(); + }else{ + var reader = new FileReader(); reader.onload = function (e) { var image = new Image(); image.src = e.target.result; @@ -206,22 +211,22 @@ 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 { - + } else { + try { // other modern browsers formData = new FormData(that.form[0]); @@ -229,15 +234,15 @@ // 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] ); + formData.append( key , that.options.uploadData[key] ); } - } - + } + $.ajax({ url: that.options.uploadUrl, data: formData, @@ -250,114 +255,116 @@ that.afterUpload(data); }); } - }); + }); - }, + }, loadExistingImage: function(){ var that = this; - + if( $.isEmptyObject(that.croppedImg)){ if (that.options.onBeforeImgUpload) that.options.onBeforeImgUpload.call(that); - + that.showLoader(); if(that.options.modal){ that.createModal(); } if( !$.isEmptyObject(that.croppedImg)){ that.croppedImg.remove(); } - + that.imgUrl=that.options.loadPicture ; - - var img =$(''); + + var img =$(''); that.obj.append(img); - img.load(function() { + img.on('load', function() { + $(this).show(); that.imgInitW = that.imgW = this.width; that.imgInitH = that.imgH = this.height; that.initCropper(); that.hideLoader(); if (that.options.onAfterImgUpload) that.options.onAfterImgUpload.call(that); - }); - - }else{ - that.cropControlRemoveCroppedImage.on('click',function(){ + }); + + }else{ + that.cropControlRemoveCroppedImage.on('click',function(){ that.croppedImg.remove(); $(this).hide(); - - if( !$.isEmptyObject(that.defaultImg)){ + + if( !$.isEmptyObject(that.defaultImg)){ that.obj.append(that.defaultImg); - } + } if(that.options.outputUrlId !== ''){ $('#'+that.options.outputUrlId).val(''); } that.croppedImg = ''; that.reset(); - }); + }); } - + }, afterUpload: function(data){ - var that = this; + var that = this; - response = typeof data =='object' ? data : jQuery.parseJSON(data); + 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 (response.status == 'success') { - if (that.options.modal) { that.createModal(); } - if (!$.isEmptyObject(that.croppedImg)) { that.croppedImg.remove(); } + that.imgInitW = that.imgW = response.width; + that.imgInitH = that.imgH = response.height; - that.imgUrl = response.url; + if (that.options.modal) { that.createModal(); } + if (!$.isEmptyObject(that.croppedImg)) { that.croppedImg.remove(); } - var img = $('') + that.imgUrl = response.url; + + var img = $('') that.obj.append(img); - img.load(function(){ + img.on('load', function(){ + $(this).show(); that.initCropper(); that.hideLoader(); if (that.options.onAfterImgUpload) that.options.onAfterImgUpload.call(that); }); - - if (that.options.onAfterImgUpload) that.options.onAfterImgUpload.call(that); - } + if (that.options.onAfterImgUpload) that.options.onAfterImgUpload.call(that); + + } - if (response.status == 'error') { - alert(response.message); - if (that.options.onError) that.options.onError.call(that,response.message); + 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 = '
'+'
'+'
'; $('body').append(modalHTML); - + that.modal = $('#croppicModal'); - + that.obj = $('#croppicModalObj'); - + }, 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(); @@ -376,36 +383,36 @@ var that = this; that.zoom(-that.imgInitW); that.zoom(that.options.initialZoom); - + // Adding mousewheel zoom capabilities if (that.options.enableMousescroll){ that.img.on('mousewheel', function(event) { event.preventDefault(); - that.zoom(that.options.zoomFactor*event.deltaY); + that.zoom(that.options.zoomFactor*event.deltaY); }); } // 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; - + var cropControlRotateRight = ''; + var cropControlCrop = ''; + var cropControlReset = ''; + + var html; + if(that.options.doubleZoomControls){ cropControlZoomMuchIn = ''; cropControlZoomMuchOut = ''; @@ -414,237 +421,288 @@ cropControlRotateLeft = ''; cropControlRotateRight = ''; } - + + if(that.options.cropControlCropControls) { + cropControlCrop = ''; + } + + if(that.options.cropControlResetControls) { + cropControlReset = ''; + } + html = '
'+ cropControlZoomMuchIn + cropControlZoomIn + cropControlZoomOut + cropControlZoomMuchOut + 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.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.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(); }); - + that.cropControlReset.on('click',function(){ that.reset(); }); + + if (that.options.customCropControlId) { + $('#'+that.options.customCropControlId).unbind('click').on('click',function(){ + that.crop(); + }); + } + }, 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; - if (userAgent.match(/iPad/i) || userAgent.match(/iPhone/i) || userAgent.match(/android/i) || (e.pageY && e.pageX) == undefined) { - pageX = e.originalEvent.touches[0].pageX; - pageY = e.originalEvent.touches[0].pageY; - } else { - pageX = e.pageX; - pageY = e.pageY; - } - + var pageY; + var userAgent = window.navigator.userAgent; + if (userAgent.match(/iPad/i) || userAgent.match(/iPhone/i) || userAgent.match(/android/i) || (e.pageY && e.pageX) == undefined) { + pageX = e.originalEvent.touches[0].pageX; + pageY = e.originalEvent.touches[0].pageY; + } else { + pageX = e.pageX; + 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; - + 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; + 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; - } else { - imgTop = e.pageY + pos_y - drg_h; - imgLeft = e.pageX + pos_x - drg_w; - } - + + if ((userAgent.match(/iPad/i) || userAgent.match(/iPhone/i) || userAgent.match(/android/i) || (e.pageY && e.pageX) == undefined)&&(typeof(e.originalEvent.touches[0]) != 'undefined')) { + imgTop = e.originalEvent.touches[0].pageY + pos_y - drg_h; + imgLeft = e.originalEvent.touches[0].pageX + pos_x - drg_w; + } else { + imgTop = e.pageY + pos_y - drg_h; + 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 (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); }} - }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); }} - } - 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); } } - }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); } } + var iH = that.img.height(), iW = that.img.width(); + if ((that.actualRotation!=0)&&(that.actualRotation%90==0)&&((that.actualRotation/90)%2==1)) { + var imgQ = (parseInt(that.img.height()) - parseInt(that.img.width()))/2; + + if (that.objH < iW) { + if (parseInt(that.img.css('top'))-imgQ > 0) { that.img.css('top', 0+imgQ); if (that.options.imgEyecandy) { that.imgEyecandy.css('top', 0+imgQ);}} + var maxTop = -( iW - that.objH); if (parseInt(that.img.css('top'))+imgQ < maxTop) { that.img.css('top', maxTop-imgQ); if (that.options.imgEyecandy) { that.imgEyecandy.css('top', maxTop-imgQ); }} + } else { + if (parseInt(that.img.css('top'))-imgQ < 0) { that.img.css('top', 0+imgQ); if (that.options.imgEyecandy) { that.imgEyecandy.css('top', 0+imgQ); }} + var maxTop = that.objH - iW; if (parseInt(that.img.css('top'))+imgQ > maxTop) { that.img.css('top', maxTop-imgQ);if (that.options.imgEyecandy) {that.imgEyecandy.css('top', maxTop-imgQ); }} + } + + if (that.objW < iH) { + if( parseInt( that.img.css('left'))+imgQ > 0 ){ that.img.css('left',0-imgQ); if(that.options.imgEyecandy){ that.imgEyecandy.css('left', 0-imgQ); }} + var maxLeft = -( iH-that.objW); if( parseInt( that.img.css('left'))-imgQ < maxLeft){ that.img.css('left', maxLeft+imgQ); if(that.options.imgEyecandy){ that.imgEyecandy.css('left', maxLeft+imgQ); } } + } else { + if( parseInt( that.img.css('left'))-imgQ < 0 ){ that.img.css('left',0+imgQ); if(that.options.imgEyecandy){ that.imgEyecandy.css('left', 0+imgQ); }} + var maxLeft = ( that.objW - iH); if( parseInt( that.img.css('left'))+imgQ > maxLeft){ that.img.css('left', maxLeft-imgQ); if(that.options.imgEyecandy){ that.imgEyecandy.css('left', maxLeft-imgQ); } } + } + } else { + if (that.objH < iH) { + if (parseInt(that.img.css('top')) > 0) { that.img.css('top', 0); if (that.options.imgEyecandy) { that.imgEyecandy.css('top', 0);}} + var maxTop = -( iH - 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 - iH; if (parseInt(that.img.css('top')) > maxTop) { that.img.css('top', maxTop);if (that.options.imgEyecandy) {that.imgEyecandy.css('top', maxTop); }} + } + + if (that.objW < iW) { + if( parseInt( that.img.css('left')) > 0 ){ that.img.css('left',0); if(that.options.imgEyecandy){ that.imgEyecandy.css('left', 0); }} + var maxLeft = -( iW-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 - iW); 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)', + }); + } + that.img.trigger("mousemove"); + if (typeof that.options.onImgRotate == 'function') + that.options.onImgRotate.call(that); }, - 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 ){ + + if( newWidth - that.objW < newHeight - that.objH ){ newWidth = that.objW; newHeight = newWidth/ratio; }else{ 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 ){ + + 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.img.width(newWidth); + that.imgH = newHeight; - that.img.height(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}); + 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}); + 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 iH = that.img.height(), iW = that.img.width(), + imgInitW=that.imgInitW, imgInitH=that.imgInitH, + imgW=that.imgW, imgH=that.imgH, imgQ; + + if ((that.actualRotation!=0)&&(that.actualRotation%90==0)&&((that.actualRotation/90)%2==1)) { + imgQ = (parseInt(that.img.height()) - parseInt(that.img.width())) / 2; + imgInitH=that.imgInitW; + imgInitW=that.imgInitH; + imgH=that.imgW; + imgW=that.imgH; + } else { + imgQ = 0; + } + 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 - }; - + imgUrl:that.imgUrl, + imgInitW:imgInitW, + imgInitH:imgInitH, + imgW:imgW, + imgH:imgH, + imgY1:Math.abs( parseInt( that.img.css('top') )-imgQ ), + imgX1:Math.abs( parseInt( that.img.css('left') )+imgQ ), + cropH:that.objH, + 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])); + urlEncodedDataPairs.push(encodeURIComponent(key) + '=' + encodeURIComponent(cropData[key])); } for(var key in that.options.cropData) { - urlEncodedDataPairs.push(encodeURIComponent(key) + '=' + encodeURIComponent(that.options.cropData[key])); + 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) + if (XHR.readyState==4 && XHR.status==200) { that.afterCrop(XHR.responseText); } @@ -655,21 +713,21 @@ XHR.setRequestHeader('Content-Length', urlEncodedData.length); XHR.send(urlEncodedData); - + }else{ formData = new FormData(); - for (var key in cropData) { + for (var key in cropData) { if( cropData.hasOwnProperty(key) ) { - formData.append( key , cropData[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] ); + formData.append( key , that.options.cropData[key] ); } } - + $.ajax({ url: that.options.cropUrl, data: formData, @@ -677,72 +735,72 @@ cache: false, contentType: false, processData: false, - type: 'POST' + type: 'POST' }).always(function (data) { that.afterCrop(data); }); } - + // - }, + }, afterCrop: function (data) { - var that = this; + var that = this; try { - response = jQuery.parseJSON(data); + response = jQuery.parseJSON(data); } catch(err) { - response = typeof data =='object' ? data : jQuery.parseJSON(data); - } - - if (response.status == 'success') { + response = typeof data =='object' ? data : jQuery.parseJSON(data); + } + + if (response.status == 'success') { - if (that.options.imgEyecandy) + if (that.options.imgEyecandy) that.imgEyecandy.hide(); - that.destroy(); - - that.obj.append(''); - if (that.options.outputUrlId !== '') { $('#' + that.options.outputUrlId).val(response.url); } + that.destroy(); + + that.obj.append(''); + if (that.options.outputUrlId !== '') { $('#' + that.options.outputUrlId).val(response.url); } - that.croppedImg = that.obj.find('.croppedImg'); + that.croppedImg = that.obj.find('.croppedImg'); - that.init(); + that.init(); - that.hideLoader(); - } - if (response.status == 'error') { - if (that.options.onError) that.options.onError.call(that,response.message); that.hideLoader(); - setTimeout( function(){ that.reset(); },2000) - } + } + if (response.status == 'error') { + if (that.options.onError) that.options.onError.call(that,response.message); + that.hideLoader(); + setTimeout( function(){ that.reset(); },2000) + } - if (that.options.onAfterImgCrop) that.options.onAfterImgCrop.call(that, response); - }, + 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; - that.loader.remove(); + that.loader.remove(); }, reset:function(){ var that = this; that.destroy(); - + that.init(); - - if( !$.isEmptyObject(that.croppedImg)){ - that.obj.append(that.croppedImg); + + 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); + that.options.onReset.call(that); }, destroy:function(){ var that = this; @@ -755,112 +813,112 @@ that.obj.html(''); }, isAjaxUploadSupported: function () { - var input = document.createElement("input"); - input.type = "file"; - - return ( - "multiple" in input && - typeof File != "undefined" && - typeof FormData != "undefined" && - typeof (new XMLHttpRequest()).upload != "undefined"); - }, - CreateFallbackIframe: function () { - var that = this; - - if (!that.isAjaxUploadSupported()) { - - if (jQuery.isEmptyObject(that.iframeobj)) { - var iframe = document.createElement("iframe"); - iframe.setAttribute("id", that.id + "_upload_iframe"); - iframe.setAttribute("name", that.id + "_upload_iframe"); - iframe.setAttribute("width", "0"); - iframe.setAttribute("height", "0"); - iframe.setAttribute("border", "0"); - iframe.setAttribute("src", "javascript:false;"); - iframe.style.display = "none"; - document.body.appendChild(iframe); - } else { - iframe = that.iframeobj[0]; - } - - var myContent = '' - + 'Uploading File' - + '' - + '
' - + $("#" + that.id + '_imgUploadField')[0].outerHTML - + '
'; - - iframe.contentWindow.document.open('text/htmlreplace'); - iframe.contentWindow.document.write(myContent); - iframe.contentWindow.document.close(); - - that.iframeobj = $("#" + that.id + "_upload_iframe"); - that.iframeform = that.iframeobj.contents().find("html").find("." + that.id + "_upload_iframe_form"); - - that.iframeform.on("change", "input", function () { + var input = document.createElement("input"); + input.type = "file"; + + return ( + "multiple" in input && + typeof File != "undefined" && + typeof FormData != "undefined" && + typeof (new XMLHttpRequest()).upload != "undefined"); + }, + CreateFallbackIframe: function () { + var that = this; + + if (!that.isAjaxUploadSupported()) { + + if (jQuery.isEmptyObject(that.iframeobj)) { + var iframe = document.createElement("iframe"); + iframe.setAttribute("id", that.id + "_upload_iframe"); + iframe.setAttribute("name", that.id + "_upload_iframe"); + iframe.setAttribute("width", "0"); + iframe.setAttribute("height", "0"); + iframe.setAttribute("border", "0"); + iframe.setAttribute("src", "javascript:false;"); + iframe.style.display = "none"; + document.body.appendChild(iframe); + } else { + iframe = that.iframeobj[0]; + } + + var myContent = '' + + 'Uploading File' + + '' + + '
' + + $("#" + that.id + '_imgUploadField')[0].outerHTML + + '
'; + + iframe.contentWindow.document.open('text/htmlreplace'); + iframe.contentWindow.document.write(myContent); + iframe.contentWindow.document.close(); + + that.iframeobj = $("#" + that.id + "_upload_iframe"); + that.iframeform = that.iframeobj.contents().find("html").find("." + that.id + "_upload_iframe_form"); + + that.iframeform.on("change", "input", function () { + that.SubmitFallbackIframe(that); + }); + that.iframeform.find("input")[0].attachEvent("onchange", function () { that.SubmitFallbackIframe(that); - }); - that.iframeform.find("input")[0].attachEvent("onchange", function () { - that.SubmitFallbackIframe(that); - }); - - var eventHandlermyFile = function () { - if (iframe.detachEvent) - iframe.detachEvent("onload", eventHandlermyFile); - else - iframe.removeEventListener("load", eventHandlermyFile, false); - - var response = that.getIframeContentJSON(iframe); - - if (jQuery.isEmptyObject(that.modal)) { - that.afterUpload(response); - } - } - - if (iframe.addEventListener) - iframe.addEventListener("load", eventHandlermyFile, true); - if (iframe.attachEvent) - iframe.attachEvent("onload", eventHandlermyFile); - - return "#" + that.id + '_imgUploadField'; - - } else { - return ""; - } - - }, - SubmitFallbackIframe: function (that) { - that.showLoader(); + }); + + var eventHandlermyFile = function () { + if (iframe.detachEvent) + iframe.detachEvent("onload", eventHandlermyFile); + else + iframe.removeEventListener("load", eventHandlermyFile, false); + + var response = that.getIframeContentJSON(iframe); + + if (jQuery.isEmptyObject(that.modal)) { + that.afterUpload(response); + } + } + + if (iframe.addEventListener) + iframe.addEventListener("load", eventHandlermyFile, true); + if (iframe.attachEvent) + iframe.attachEvent("onload", eventHandlermyFile); + + return "#" + that.id + '_imgUploadField'; + + } else { + return ""; + } + + }, + SubmitFallbackIframe: function (that) { + that.showLoader(); if(that.options.processInline && !that.options.uploadUrl){ if (that.options.onError){ that.options.onError.call(that,"processInline is not supported by your browser "); that.hideLoader(); } }else{ - if (that.options.onBeforeImgUpload) that.options.onBeforeImgUpload.call(that); + if (that.options.onBeforeImgUpload) that.options.onBeforeImgUpload.call(that); that.iframeform[0].submit(); - } - }, - getIframeContentJSON: function (iframe) { - try { - var doc = iframe.contentDocument ? iframe.contentDocument : iframe.contentWindow.document, - response; - - 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); - } catch (err) { - response = { success: false }; - } - - return response; - } - + } + }, + getIframeContentJSON: function (iframe) { + try { + var doc = iframe.contentDocument ? iframe.contentDocument : iframe.contentWindow.document, + response; + + 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); + } catch (err) { + response = { success: false }; + } + + return response; + } + }; })(window, document); diff --git a/croppic.min.js b/croppic.min.js deleted file mode 100644 index bb29794..0000000 --- a/croppic.min.js +++ /dev/null @@ -1,6 +0,0 @@ -/* - * CROPPIC - * dependancy: jQuery - * author: Ognjen "Zmaj Džedaj" Božičković and Mat Steinlin - */ - !function(o,t){Croppic=function(o,t){var e=this;e.id=o,e.obj=$("#"+o),e.outputDiv=e.obj,e.options={uploadUrl:"",uploadData:{},cropUrl:"",cropData:{},outputUrlId:"",imgEyecandy:!0,imgEyecandyOpacity:.2,zoomFactor:10,rotateFactor:5,doubleZoomControls:!0,rotateControls:!0,modal:!1,customUploadButtonId:"",loaderHtml:"",scaleToFill:!0,processInline:!1,loadPicture:"",onReset:null,enableMousescroll:!1,onBeforeImgUpload:null,onAfterImgUpload:null,onImgDrag:null,onImgZoom:null,onImgRotate:null,onBeforeImgCrop:null,onAfterImgCrop:null,onBeforeRemoveCroppedImg:null,onAfterRemoveCroppedImg:null,onError:null};for(i in t)e.options[i]=t[i];e.init()},Croppic.prototype={id:"",imgInitW:0,imgInitH:0,imgW:0,imgH:0,objW:0,objH:0,actualRotation:0,windowW:0,windowH:$(o).height(),obj:{},outputDiv:{},outputUrlObj:{},img:{},defaultImg:{},croppedImg:{},imgEyecandy:{},form:{},iframeform:{},iframeobj:{},cropControlsUpload:{},cropControlsCrop:{},cropControlZoomMuchIn:{},cropControlZoomMuchOut:{},cropControlZoomIn:{},cropControlZoomOut:{},cropControlCrop:{},cropControlReset:{},cropControlRemoveCroppedImage:{},modal:{},loader:{},init:function(){var o=this;o.objW=o.obj.width(),o.objH=o.obj.height(),o.actualRotation=0,$.isEmptyObject(o.defaultImg)&&(o.defaultImg=o.obj.find("img")),o.createImgUploadControls(),$.isEmptyObject(o.options.loadPicture)?o.bindImgUploadControl():o.loadExistingImage()},createImgUploadControls:function(){var o=this,t="";""===o.options.customUploadButtonId&&(t='');var e='';$.isEmptyObject(o.croppedImg)&&(e=""),$.isEmptyObject(o.options.loadPicture)||(t="");var n='
'+t+e+"
";o.outputDiv.append(n),o.cropControlsUpload=o.outputDiv.find(".cropControlsUpload"),""===o.options.customUploadButtonId?o.imgUploadControl=o.outputDiv.find(".cropControlUpload"):(o.imgUploadControl=$("#"+o.options.customUploadButtonId),o.imgUploadControl.show()),$.isEmptyObject(o.croppedImg)||(o.cropControlRemoveCroppedImage=o.outputDiv.find(".cropControlRemoveCroppedImage"))},bindImgUploadControl:function(){var o=this,e='';o.outputDiv.append(e),o.form=o.outputDiv.find("."+o.id+"_imgUploadForm");var n=o.CreateFallbackIframe();o.imgUploadControl.off("click"),o.imgUploadControl.on("click",function(){""===n?o.form.find('input[type="file"]').trigger("click"):o.iframeform.find('input[type="file"]').trigger("click")}),$.isEmptyObject(o.croppedImg)||o.cropControlRemoveCroppedImage.on("click",function(){typeof o.options.onBeforeRemoveCroppedImg==typeof Function&&o.options.onBeforeRemoveCroppedImg.call(o),o.croppedImg.remove(),o.croppedImg={},$(this).hide(),typeof o.options.onAfterRemoveCroppedImg==typeof Function&&o.options.onAfterRemoveCroppedImg.call(o),$.isEmptyObject(o.defaultImg)||o.obj.append(o.defaultImg),""!==o.options.outputUrlId&&$("#"+o.options.outputUrlId).val("")}),o.form.find('input[type="file"]').change(function(){if(o.options.onBeforeImgUpload&&o.options.onBeforeImgUpload.call(o),o.showLoader(),o.imgUploadControl.hide(),o.options.processInline)if("undefined"==typeof FileReader)o.options.onError&&o.options.onError.call(o,"processInline is not supported by your Browser"),o.reset();else{var e=new FileReader;e.onload=function(t){var e=new Image;e.src=t.target.result,e.onload=function(){o.imgInitW=o.imgW=e.width,o.imgInitH=o.imgH=e.height,o.options.modal&&o.createModal(),$.isEmptyObject(o.croppedImg)||o.croppedImg.remove(),o.imgUrl=e.src,o.obj.append(''),o.initCropper(),o.hideLoader(),o.options.onAfterImgUpload&&o.options.onAfterImgUpload.call(o)}},e.readAsDataURL(o.form.find('input[type="file"]')[0].files[0])}else{try{formData=new FormData(o.form[0])}catch(n){formData=new FormData,formData.append("img",o.form.find("input[type=file]")[0].files[0])}for(var i in o.options.uploadData)o.options.uploadData.hasOwnProperty(i)&&formData.append(i,o.options.uploadData[i]);$.ajax({url:o.options.uploadUrl,data:formData,context:t.body,cache:!1,contentType:!1,processData:!1,type:"POST"}).always(function(t){o.afterUpload(t)})}})},loadExistingImage:function(){var o=this;if($.isEmptyObject(o.croppedImg)){o.options.onBeforeImgUpload&&o.options.onBeforeImgUpload.call(o),o.showLoader(),o.options.modal&&o.createModal(),$.isEmptyObject(o.croppedImg)||o.croppedImg.remove(),o.imgUrl=o.options.loadPicture;var t=$('');o.obj.append(t),t.load(function(){o.imgInitW=o.imgW=this.width,o.imgInitH=o.imgH=this.height,o.initCropper(),o.hideLoader(),o.options.onAfterImgUpload&&o.options.onAfterImgUpload.call(o)})}else o.cropControlRemoveCroppedImage.on("click",function(){o.croppedImg.remove(),$(this).hide(),$.isEmptyObject(o.defaultImg)||o.obj.append(o.defaultImg),""!==o.options.outputUrlId&&$("#"+o.options.outputUrlId).val(""),o.croppedImg="",o.reset()})},afterUpload:function(o){var t=this;if(response="object"==typeof o?o:jQuery.parseJSON(o),"success"==response.status){t.imgInitW=t.imgW=response.width,t.imgInitH=t.imgH=response.height,t.options.modal&&t.createModal(),$.isEmptyObject(t.croppedImg)||t.croppedImg.remove(),t.imgUrl=response.url;var e=$('');t.obj.append(e),e.load(function(){t.initCropper(),t.hideLoader(),t.options.onAfterImgUpload&&t.options.onAfterImgUpload.call(t)}),t.options.onAfterImgUpload&&t.options.onAfterImgUpload.call(t)}"error"==response.status&&(alert(response.message),t.options.onError&&t.options.onError.call(t,response.message),t.hideLoader(),setTimeout(function(){t.reset()},2e3))},createModal:function(){var o=this,t=o.windowH/2-o.objH/2,e='
';$("body").append(e),o.modal=$("#croppicModal"),o.obj=$("#croppicModalObj")},destroyModal:function(){var o=this;o.obj=o.outputDiv,o.modal.remove(),o.modal={}},initCropper:function(){var o=this;o.img=o.obj.find("img"),o.img.wrap('
'),o.createCropControls(),o.options.imgEyecandy&&o.createEyecandy(),o.initDrag(),o.initialScaleImg()},createEyecandy:function(){var o=this;o.imgEyecandy=o.img.clone(),o.imgEyecandy.css({"z-index":"0",opacity:o.options.imgEyecandyOpacity}).appendTo(o.obj)},destroyEyecandy:function(){var o=this;o.imgEyecandy.remove()},initialScaleImg:function(){var o=this;o.zoom(-o.imgInitW),o.zoom(40),o.options.enableMousescroll&&o.img.on("mousewheel",function(t){t.preventDefault(),o.zoom(o.options.zoomFactor*t.deltaY)}),o.img.css({left:-(o.imgW-o.objW)/2,top:-(o.imgH-o.objH)/2,position:"relative"}),o.options.imgEyecandy&&o.imgEyecandy.css({left:-(o.imgW-o.objW)/2,top:-(o.imgH-o.objH)/2,position:"relative"})},createCropControls:function(){var o,t=this,e="",n='',i='',r="",a="",p="",s='',c='';t.options.doubleZoomControls&&(e='',r=''),t.options.rotateControls&&(a='',p=''),o='
'+e+n+i+r+a+p+s+c+"
",t.obj.append(o),t.cropControlsCrop=t.obj.find(".cropControlsCrop"),t.options.doubleZoomControls&&(t.cropControlZoomMuchIn=t.cropControlsCrop.find(".cropControlZoomMuchIn"),t.cropControlZoomMuchIn.on("click",function(){t.zoom(10*t.options.zoomFactor)}),t.cropControlZoomMuchOut=t.cropControlsCrop.find(".cropControlZoomMuchOut"),t.cropControlZoomMuchOut.on("click",function(){t.zoom(10*-t.options.zoomFactor)})),t.cropControlZoomIn=t.cropControlsCrop.find(".cropControlZoomIn"),t.cropControlZoomIn.on("click",function(){t.zoom(t.options.zoomFactor)}),t.cropControlZoomOut=t.cropControlsCrop.find(".cropControlZoomOut"),t.cropControlZoomOut.on("click",function(){t.zoom(-t.options.zoomFactor)}),t.cropControlZoomIn=t.cropControlsCrop.find(".cropControlRotateLeft"),t.cropControlZoomIn.on("click",function(){t.rotate(-t.options.rotateFactor)}),t.cropControlZoomOut=t.cropControlsCrop.find(".cropControlRotateRight"),t.cropControlZoomOut.on("click",function(){t.rotate(t.options.rotateFactor)}),t.cropControlCrop=t.cropControlsCrop.find(".cropControlCrop"),t.cropControlCrop.on("click",function(){t.crop()}),t.cropControlReset=t.cropControlsCrop.find(".cropControlReset"),t.cropControlReset.on("click",function(){t.reset()})},initDrag:function(){var t=this;t.img.on("mousedown touchstart",function(e){e.preventDefault();var n,i,r=o.navigator.userAgent;r.match(/iPad/i)||r.match(/iPhone/i)||r.match(/android/i)||void 0==(e.pageY&&e.pageX)?(n=e.originalEvent.touches[0].pageX,i=e.originalEvent.touches[0].pageY):(n=e.pageX,i=e.pageY);var a=t.img.css("z-index"),p=t.img.outerHeight(),s=t.img.outerWidth(),c=t.img.offset().top+p-i,l=t.img.offset().left+s-n;t.img.css("z-index",1e3).on("mousemove touchmove",function(o){var e,n;if(r.match(/iPad/i)||r.match(/iPhone/i)||r.match(/android/i)||void 0==(o.pageY&&o.pageX)?(e=o.originalEvent.touches[0].pageY+c-p,n=o.originalEvent.touches[0].pageX+l-s):(e=o.pageY+c-p,n=o.pageX+l-s),t.img.offset({top:e,left:n}).on("mouseup",function(){$(this).removeClass("draggable").css("z-index",a)}),t.options.imgEyecandy&&t.imgEyecandy.offset({top:e,left:n}),t.objH0&&(t.img.css("top",0),t.options.imgEyecandy&&t.imgEyecandy.css("top",0));var i=-(t.imgH-t.objH);parseInt(t.img.css("top"))i&&(t.img.css("top",i),t.options.imgEyecandy&&t.imgEyecandy.css("top",i))}if(t.objW0&&(t.img.css("left",0),t.options.imgEyecandy&&t.imgEyecandy.css("left",0));var m=-(t.imgW-t.objW);parseInt(t.img.css("left"))m&&(t.img.css("left",m),t.options.imgEyecandy&&t.imgEyecandy.css("left",m))}t.options.onImgDrag&&t.options.onImgDrag.call(t)})}).on("mouseup",function(){t.img.off("mousemove")}).on("mouseout",function(){t.img.off("mousemove")})},rotate:function(o){var t=this;t.actualRotation+=o,t.img.css({"-webkit-transform":"rotate("+t.actualRotation+"deg)","-moz-transform":"rotate("+t.actualRotation+"deg)",transform:"rotate("+t.actualRotation+"deg)"}),t.options.imgEyecandy&&t.imgEyecandy.css({"-webkit-transform":"rotate("+t.actualRotation+"deg)","-moz-transform":"rotate("+t.actualRotation+"deg)",transform:"rotate("+t.actualRotation+"deg)"}),"function"==typeof t.options.onImgRotate&&t.options.onImgRotate.call(t)},zoom:function(o){var t=this,e=t.imgW/t.imgH,n=t.imgW+o,i=n/e,r=!0;(nt.imgInitW||i>t.imgInitH)&&(n-t.imgInitW0&&(a=0),p>0&&(p=0);var s=-(i-t.objH);s>a&&(a=s);var c=-(n-t.objW);c>p&&(p=c),r&&t.img.css({top:a,left:p}),t.options.imgEyecandy&&(t.imgEyecandy.width(n),t.imgEyecandy.height(i),r&&t.imgEyecandy.css({top:a,left:p})),t.options.onImgZoom&&t.options.onImgZoom.call(t)},crop:function(){var o=this;o.options.onBeforeImgCrop&&o.options.onBeforeImgCrop.call(o),o.cropControlsCrop.hide(),o.showLoader();var e,n={imgUrl:o.imgUrl,imgInitW:o.imgInitW,imgInitH:o.imgInitH,imgW:o.imgW,imgH:o.imgH,imgY1:Math.abs(parseInt(o.img.css("top"))),imgX1:Math.abs(parseInt(o.img.css("left"))),cropH:o.objH,cropW:o.objW,rotation:o.actualRotation};if("undefined"==typeof FormData){var i=new XMLHttpRequest,r="",a=[];for(var p in n)a.push(encodeURIComponent(p)+"="+encodeURIComponent(n[p]));for(var p in o.options.cropData)a.push(encodeURIComponent(p)+"="+encodeURIComponent(o.options.cropData[p]));r=a.join("&").replace(/%20/g,"+"),i.addEventListener("error",function(){o.options.onError&&o.options.onError.call(o,"XHR Request failed")}),i.onreadystatechange=function(){4==i.readyState&&200==i.status&&o.afterCrop(i.responseText)},i.open("POST",o.options.cropUrl),i.setRequestHeader("Content-Type","application/x-www-form-urlencoded"),i.setRequestHeader("Content-Length",r.length),i.send(r)}else{e=new FormData;for(var p in n)n.hasOwnProperty(p)&&e.append(p,n[p]);for(var p in o.options.cropData)o.options.cropData.hasOwnProperty(p)&&e.append(p,o.options.cropData[p]);$.ajax({url:o.options.cropUrl,data:e,context:t.body,cache:!1,contentType:!1,processData:!1,type:"POST"}).always(function(t){o.afterCrop(t)})}},afterCrop:function(o){var t=this;try{response=jQuery.parseJSON(o)}catch(e){response="object"==typeof o?o:jQuery.parseJSON(o)}"success"==response.status&&(t.options.imgEyecandy&&t.imgEyecandy.hide(),t.destroy(),t.obj.append(''),""!==t.options.outputUrlId&&$("#"+t.options.outputUrlId).val(response.url),t.croppedImg=t.obj.find(".croppedImg"),t.init(),t.hideLoader()),"error"==response.status&&(t.options.onError&&t.options.onError.call(t,response.message),t.hideLoader(),setTimeout(function(){t.reset()},2e3)),t.options.onAfterImgCrop&&t.options.onAfterImgCrop.call(t,response)},showLoader:function(){var o=this;o.obj.append(o.options.loaderHtml),o.loader=o.obj.find(".loader")},hideLoader:function(){var o=this;o.loader.remove()},reset:function(){var o=this;o.destroy(),o.init(),$.isEmptyObject(o.croppedImg)||(o.obj.append(o.croppedImg),""!==o.options.outputUrlId&&$("#"+o.options.outputUrlId).val(o.croppedImg.attr("url"))),"function"==typeof o.options.onReset&&o.options.onReset.call(o)},destroy:function(){var o=this;o.options.modal&&!$.isEmptyObject(o.modal)&&o.destroyModal(),o.options.imgEyecandy&&!$.isEmptyObject(o.imgEyecandy)&&o.destroyEyecandy(),$.isEmptyObject(o.cropControlsUpload)||o.cropControlsUpload.remove(),$.isEmptyObject(o.cropControlsCrop)||o.cropControlsCrop.remove(),$.isEmptyObject(o.loader)||o.loader.remove(),$.isEmptyObject(o.form)||o.form.remove(),o.obj.html("")},isAjaxUploadSupported:function(){var o=t.createElement("input");return o.type="file","multiple"in o&&"undefined"!=typeof File&&"undefined"!=typeof FormData&&"undefined"!=typeof(new XMLHttpRequest).upload},CreateFallbackIframe:function(){var o=this;if(o.isAjaxUploadSupported())return"";if(jQuery.isEmptyObject(o.iframeobj)){var e=t.createElement("iframe");e.setAttribute("id",o.id+"_upload_iframe"),e.setAttribute("name",o.id+"_upload_iframe"),e.setAttribute("width","0"),e.setAttribute("height","0"),e.setAttribute("border","0"),e.setAttribute("src","javascript:false;"),e.style.display="none",t.body.appendChild(e)}else e=o.iframeobj[0];var n='Uploading File";e.contentWindow.document.open("text/htmlreplace"),e.contentWindow.document.write(n),e.contentWindow.document.close(),o.iframeobj=$("#"+o.id+"_upload_iframe"),o.iframeform=o.iframeobj.contents().find("html").find("."+o.id+"_upload_iframe_form"),o.iframeform.on("change","input",function(){o.SubmitFallbackIframe(o)}),o.iframeform.find("input")[0].attachEvent("onchange",function(){o.SubmitFallbackIframe(o)});var i=function(){e.detachEvent?e.detachEvent("onload",i):e.removeEventListener("load",i,!1);var t=o.getIframeContentJSON(e);jQuery.isEmptyObject(o.modal)&&o.afterUpload(t)};return e.addEventListener&&e.addEventListener("load",i,!0),e.attachEvent&&e.attachEvent("onload",i),"#"+o.id+"_imgUploadField"},SubmitFallbackIframe:function(o){o.showLoader(),o.options.processInline&&!o.options.uploadUrl?o.options.onError&&(o.options.onError.call(o,"processInline is not supported by your browser "),o.hideLoader()):(o.options.onBeforeImgUpload&&o.options.onBeforeImgUpload.call(o),o.iframeform[0].submit())},getIframeContentJSON:function(o){try{var t,e=o.contentDocument?o.contentDocument:o.contentWindow.document,n=e.body.innerHTML;"
"==n.slice(0,5).toLowerCase()&&"
"==n.slice(-6).toLowerCase()&&(n=e.body.firstChild.firstChild.nodeValue),t=jQuery.parseJSON(n)}catch(i){t={success:!1}}return t}}}(window,document); \ No newline at end of file diff --git a/croppic.zip b/croppic.zip deleted file mode 100644 index e0e6ef4..0000000 Binary files a/croppic.zip and /dev/null differ diff --git a/croppicWeb.zip b/croppicWeb.zip deleted file mode 100644 index bb4a0ee..0000000 Binary files a/croppicWeb.zip and /dev/null differ diff --git a/img_crop_to_file.php b/img_crop_to_file.php index 06cbb0f..ce53f39 100644 --- a/img_crop_to_file.php +++ b/img_crop_to_file.php @@ -1,88 +1,100 @@ client_id.time(); +while (file_exists($tmp_dir . $output_filename)) { + $filename_array = explode('.', $output_filename); + $output_filename = $filename_array[0] . '_' . mt_rand(0, 1000) . '.' . $filename_array[count($filename_array) - 1]; +} $what = getimagesize($imgUrl); -switch(strtolower($what['mime'])) -{ +switch (strtolower($what['mime'])) { case 'image/png': - $img_r = imagecreatefrompng($imgUrl); - $source_image = imagecreatefrompng($imgUrl); - $type = '.png'; - break; + $img_r = imagecreatefrompng($imgUrl); + $source_image = imagecreatefrompng($imgUrl); + $type = '.png'; + break; case 'image/jpeg': - $img_r = imagecreatefromjpeg($imgUrl); - $source_image = imagecreatefromjpeg($imgUrl); - error_log("jpg"); - $type = '.jpeg'; - break; + $img_r = imagecreatefromjpeg($imgUrl); + $source_image = imagecreatefromjpeg($imgUrl); + error_log("jpg"); + $type = '.jpeg'; + break; case 'image/gif': - $img_r = imagecreatefromgif($imgUrl); - $source_image = imagecreatefromgif($imgUrl); - $type = '.gif'; - break; - default: die('image type not supported'); + $img_r = imagecreatefromgif($imgUrl); + $source_image = imagecreatefromgif($imgUrl); + $type = '.gif'; + break; + default: + $arr = Array( + "status" => 'error', + "message" => 'Тип файла не поддержвивается. Выберите другой файл' + ); + break; } - +$output_filename .= $type; //Check write Access to Directory -if(!is_writable(dirname($output_filename))){ - $response = Array( - "status" => 'error', - "message" => 'Can`t write cropped File' - ); -}else{ - +if (!is_writable(dirname($tmp_dir.$output_filename))) { + $arr = Array( + "status" => 'error', + "message" => 'Ошибка загрузки файла' + ); +} else { // resize the original image to size of editor - $resizedImage = imagecreatetruecolor($imgW, $imgH); - imagecopyresampled($resizedImage, $source_image, 0, 0, 0, 0, $imgW, $imgH, $imgInitW, $imgInitH); + $image = imagecreatetruecolor($imgInitW, $imgInitH); + imageAlphaBlending($image, false); + imageSaveAlpha($image, true); + // 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); - // finally output png image - //imagepng($final_image, $output_filename.$type, $png_quality); - imagejpeg($final_image, $output_filename.$type, $jpeg_quality); - $response = Array( + if ($angle) { + $image = imagerotate($source_image, -$angle, 0); + } else { + $image = $source_image; + } + $image2 = imagecreatetruecolor($imgW, $imgH); + imageAlphaBlending($image2, false); + imageSaveAlpha($image2, true); + imagecopyresampled($image2, $image, 0, 0, 0, 0, $imgW, $imgH, $imgInitW, $imgInitH); + + // crop image into selected area + $final_image = imagecreatetruecolor($cropW, $cropH); + imageAlphaBlending($final_image, false); + imageSaveAlpha($final_image, true); + //imagecolortransparent($final_image, imagecolorallocate($final_image, 0, 0, 0)); + imagecopyresampled($final_image, $image2, 0, 0, $imgX1, $imgY1, $cropW+1, $cropH+1, $cropW, $cropH); + + // finally output png image + //imagepng($final_image, $tmp_dir.$output_filename, $png_quality); + imagejpeg($final_image, $tmp_dir.$output_filename, $jpeg_quality); + $arr = Array( "status" => 'success', - "url" => $output_filename.$type - ); + "url" => '/tmp/'.$output_filename + ); } -print json_encode($response); \ No newline at end of file +echo json_encode($arr);