From 22acd76a34dc2cdaf0dfae288d3125b405a4ae6b Mon Sep 17 00:00:00 2001 From: fuenfzehndreissig Date: Mon, 2 Mar 2015 14:58:52 +0100 Subject: [PATCH 1/3] Filter and validate file types In order to handle only image file types, an image filter for the file input field has been added. Unfortunately browsers handle this filter not reliably. Thus a validation also has been added in this update. --- croppic.js | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/croppic.js b/croppic.js index a9edeca..5e6a63b 100644 --- a/croppic.js +++ b/croppic.js @@ -137,7 +137,7 @@ var that = this; // CREATE UPLOAD IMG FORM - var formHtml = ''; + var formHtml = ''; that.outputDiv.append(formHtml); that.form = that.outputDiv.find('.'+that.id+'_imgUploadForm'); @@ -172,6 +172,14 @@ that.form.find('input[type="file"]').change(function(){ + var file = that.form.find('input[type="file"]')[0].files[0]; + if (file.type.indexOf('image') != 0) { + if (that.options.onError) that.options.onError.call(that, 'Invalid file type'); + that.hideLoader(); + that.reset(); + return; + } + if (that.options.onBeforeImgUpload) that.options.onBeforeImgUpload.call(that); that.showLoader(); @@ -202,7 +210,7 @@ } }; - reader.readAsDataURL(that.form.find('input[type="file"]')[0].files[0]); + reader.readAsDataURL(file); } else { @@ -677,4 +685,4 @@ that.obj.html(''); } }; -})(window, document); \ No newline at end of file +})(window, document); From d1dbf2b74ee6c8f1b65bcdc56cc1c6507eb09e1b Mon Sep 17 00:00:00 2001 From: fuenfzehndreissig Date: Mon, 2 Mar 2015 15:37:18 +0100 Subject: [PATCH 2/3] Inline cropping In addition to inline processing cropping and scaling with canvas on the client side has been added. --- croppic.js | 65 ++++++++++++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 63 insertions(+), 2 deletions(-) diff --git a/croppic.js b/croppic.js index 5e6a63b..9141a0a 100644 --- a/croppic.js +++ b/croppic.js @@ -598,8 +598,68 @@ cropW:that.objW, rotation:that.actualRotation }; - - var formData = new FormData(); + + if (that.options.processInline) { + // Cropping Inline + + if (that.options.imgEyecandy) that.imgEyecandy.hide(); + + that.destroy(); + + // Crop and resize image with a canvas + + var canvas = document.createElement('canvas'); + canvas.className = "croppedImg"; + canvas.width = cropData.cropW; + canvas.height = cropData.cropH; + var context = canvas.getContext('2d'); + + var imageObj = new Image(); + imageObj.src = cropData.imgUrl; + + var scaleFactor = cropData.imgInitW / cropData.imgW; + var cropX = cropData.imgX1 * scaleFactor; + var cropY = cropData.imgY1 * scaleFactor; + var cropW = cropData.cropW * scaleFactor; + var cropH = cropData.cropH * scaleFactor; + + var x = 0; + var y = 0; + var width = cropData.cropW; + var height = cropData.cropH; + + var ratioOriginalImage = cropData.imgInitW / cropData.imgInitH; + + try { + if (cropX == 0 && cropY == 0 && ratioOriginalImage == 1) { + // only scale image + context.drawImage(imageObj, x, y, width, height); + } else { + // crop and scale image + context.drawImage(imageObj, cropX, cropY, cropW, cropH, x, y, width, height); + } + } catch (e) { + if (that.options.onError) that.options.onError.call(that, e.message); + that.reset(); + return; + } + + that.obj.append(canvas); + + if (that.options.outputUrlId !== '') { + $('#' + that.options.outputUrlId).val(cropData['imgUrl']); + } + + that.croppedImg = that.obj.find('.croppedImg'); + + that.init(); + + that.hideLoader(); + + if (that.options.onAfterImgCrop) + that.options.onAfterImgCrop.call(that); + } else { + var formData = new FormData(); for (var key in cropData) { if( cropData.hasOwnProperty(key) ) { @@ -649,6 +709,7 @@ if (that.options.onAfterImgCrop) that.options.onAfterImgCrop.call(that); }); + } }, showLoader:function(){ var that = this; From 856abee15f18267c8890e76a6ea2547362c5b98c Mon Sep 17 00:00:00 2001 From: fuenfzehndreissig Date: Mon, 2 Mar 2015 15:39:21 +0100 Subject: [PATCH 3/3] Refactor setTimeout calls --- croppic.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/croppic.js b/croppic.js index 9141a0a..cb7b057 100644 --- a/croppic.js +++ b/croppic.js @@ -256,7 +256,7 @@ 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); } @@ -703,7 +703,7 @@ 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);