From 85ec0a141ab72c0efc9f09cd737f622c2325a5a8 Mon Sep 17 00:00:00 2001 From: Dries Marien Date: Wed, 19 Feb 2014 13:20:54 +0100 Subject: [PATCH 1/5] Added 'cover' logic and demo --- demo.html | 29 ++++++++++++-- public/javascripts/imageupload.js | 66 +++++++++++++++++++++++-------- 2 files changed, 76 insertions(+), 19 deletions(-) diff --git a/demo.html b/demo.html index 4d4cd56..9acff5d 100644 --- a/demo.html +++ b/demo.html @@ -28,7 +28,7 @@

Single image with resizing

accept="image/*" image="image2" resize-max-height="300" - resize-max-width="250" + resize-max-width="100" resize-quality="0.7" />

Original

@@ -38,8 +38,7 @@

Single image with resizing

- - +

Multiple images

@@ -81,6 +80,30 @@

Multiple images with resizing

+ + + +

Single image with covering

+
+ + + + +

Original

+ +

Resized

+ + +
+
+

Uploaded Image / Size: {{sizeInBytes}} Bytes

diff --git a/public/javascripts/imageupload.js b/public/javascripts/imageupload.js index c3c1453..255b364 100644 --- a/public/javascripts/imageupload.js +++ b/public/javascripts/imageupload.js @@ -23,6 +23,9 @@ angular.module('imageupload', []) var maxHeight = options.resizeMaxHeight || 300; var maxWidth = options.resizeMaxWidth || 250; var quality = options.resizeQuality || 0.7; + var cover = options.cover || false; + var coverHeight = options.coverHeight || 300; + var coverWidth = options.coverWidth || 250; var type = options.resizeType || 'image/jpg'; var canvas = getResizeArea(); @@ -30,21 +33,49 @@ angular.module('imageupload', []) var height = origImage.height; var width = origImage.width; - // calculate the width and height, constraining the proportions - if (width > height) { - if (width > maxWidth) { - height = Math.round(height *= maxWidth / width); - width = maxWidth; - } - } else { - if (height > maxHeight) { - width = Math.round(width *= maxHeight / height); - height = maxHeight; - } - } - - canvas.width = width; - canvas.height = height; + if(!cover){ + // calculate the width and height, constraining the proportions + if (width > height) { + if (width > maxWidth) { + height = Math.round(height *= maxWidth / width); + width = maxWidth; + } + } else { + if (height > maxHeight) { + width = Math.round(width *= maxHeight / height); + height = maxHeight; + } + } + + canvas.width = width; + canvas.height = height; + }else{ + // Logic for calculating size when in cover-mode + canvas.width = coverHeight; + canvas.height = coverWidth; + // Resize image to fit canvas and keep original proportions + var ratio = 1; + if(height < canvas.height) + { + ratio = canvas.height / height; + height = height * ratio; + width = width * ratio; + } + if(width < canvas.width) + { + ratio = canvas.width / width; + height = height * ratio; + width = width * ratio; + } + + // Check if both are too big -> downsize + if(width > canvas.width && height > canvas.height) + { + ratio = Math.max(canvas.width/width, canvas.height/height); + height = height * ratio; + width = width * ratio; + } + } //draw image on canvas var ctx = canvas.getContext("2d"); @@ -81,6 +112,9 @@ angular.module('imageupload', []) resizeMaxWidth: '@?', resizeQuality: '@?', resizeType: '@?', + cover: '@?', + coverHeight: '@?', + coverWidth: '@?', }, link: function postLink(scope, element, attrs, ctrl) { @@ -123,7 +157,7 @@ angular.module('imageupload', []) imageResult.dataURL = dataURL; }); - if(scope.resizeMaxHeight || scope.resizeMaxWidth) { //resize image + if(scope.resizeMaxHeight || scope.resizeMaxWidth || scope.cover) { //resize image doResizing(imageResult, function(imageResult) { applyScope(imageResult); }); From 0bf03aa82b776e2affa1239afa02c56e94b8065c Mon Sep 17 00:00:00 2001 From: Dries Marien Date: Wed, 19 Feb 2014 13:33:07 +0100 Subject: [PATCH 2/5] Added cover-position variables --- demo.html | 2 ++ public/javascripts/imageupload.js | 20 +++++++++++++++++++- 2 files changed, 21 insertions(+), 1 deletion(-) diff --git a/demo.html b/demo.html index 9acff5d..d303cc3 100644 --- a/demo.html +++ b/demo.html @@ -94,6 +94,8 @@

Single image with covering

cover="true" cover-height="300" cover-width="100" + cover-x="center" + cover-y="bottom" resize-quality="0.7" />

Original

diff --git a/public/javascripts/imageupload.js b/public/javascripts/imageupload.js index 255b364..73cb729 100644 --- a/public/javascripts/imageupload.js +++ b/public/javascripts/imageupload.js @@ -26,6 +26,8 @@ angular.module('imageupload', []) var cover = options.cover || false; var coverHeight = options.coverHeight || 300; var coverWidth = options.coverWidth || 250; + var coverX = options.coverX || 'left'; + var coverY = options.coverY || 'top'; var type = options.resizeType || 'image/jpg'; var canvas = getResizeArea(); @@ -33,6 +35,9 @@ angular.module('imageupload', []) var height = origImage.height; var width = origImage.width; + var imgX = 0; + var imgY = 0; + if(!cover){ // calculate the width and height, constraining the proportions if (width > height) { @@ -49,6 +54,7 @@ angular.module('imageupload', []) canvas.width = width; canvas.height = height; + }else{ // Logic for calculating size when in cover-mode canvas.width = coverHeight; @@ -75,11 +81,21 @@ angular.module('imageupload', []) height = height * ratio; width = width * ratio; } + + // place img according to coverX and coverY values + if(width > canvas.width){ + if(coverX === 'right'){ imgX = canvas.width - width; } + else if (coverX === 'center'){ imgX = (canvas.width - width) / 2; } + }else if(height > canvas.height){ + if(coverY === 'bottom'){ imgY = canvas.height - height; } + else if (coverY === 'center'){ imgY = (canvas.height - height) / 2; } + } + } //draw image on canvas var ctx = canvas.getContext("2d"); - ctx.drawImage(origImage, 0, 0, width, height); + ctx.drawImage(origImage, imgX, imgY, width, height); // get the data from canvas as 70% jpg (or specified type). return canvas.toDataURL(type, quality); @@ -115,6 +131,8 @@ angular.module('imageupload', []) cover: '@?', coverHeight: '@?', coverWidth: '@?', + coverX: '@?', + coverY: '@?', }, link: function postLink(scope, element, attrs, ctrl) { From 160550943f3dd834cebfc48aa5057eac686b58a4 Mon Sep 17 00:00:00 2001 From: Dries Marien Date: Wed, 19 Feb 2014 13:38:54 +0100 Subject: [PATCH 3/5] Updated readme --- README.md | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/README.md b/README.md index f638a32..31be2c2 100644 --- a/README.md +++ b/README.md @@ -64,6 +64,25 @@ When used with multiple the image object is always an array of objects with the - dataURL - type +### Single image with covering + +```html + + Original + Resized +``` + + + See [demo.html](demo.html) for more concrete examples. ### Optional Parameter: @@ -78,6 +97,8 @@ See [demo.html](demo.html) for more concrete examples. - Upload Image with FileReader - Resize Image via canvas +- Make image cover certain size while maintaining its original height-width ratio +- Choose cover origin ( left - center - right / top - center - bottom ) - Send Image Data URL (base64) to whatever you want. ## How to run the Demo? From 9b5e9450451e2dbb13e95a87a7919434fcbaf22f Mon Sep 17 00:00:00 2001 From: Dries Marien Date: Wed, 19 Feb 2014 13:41:59 +0100 Subject: [PATCH 4/5] Updated readme --- README.md | 27 ++++++++++++++++----------- 1 file changed, 16 insertions(+), 11 deletions(-) diff --git a/README.md b/README.md index 31be2c2..20cf531 100644 --- a/README.md +++ b/README.md @@ -68,17 +68,17 @@ When used with multiple the image object is always an array of objects with the ```html - Original - Resized + type="file" + accept="image/*" + image="image5" + cover="true" + cover-height="300" + cover-width="100" + cover-x="center" + cover-y="center" + resize-quality="0.7" /> +Original +Resized ``` @@ -91,6 +91,11 @@ See [demo.html](demo.html) for more concrete examples. - resize-type (default is 'image/jpg') - resize-max-height (default is 300) - resize-max-width (default is 250) +- cover (default is false) +- cover-height (default is 300) +- cover-width (default is 250) +- cover-x (default is 'left') +- cover-y (default is 'top') ## Features From c22775100e1a6ee0007f1f5b20dc8b2942bedddd Mon Sep 17 00:00:00 2001 From: Dries Marien Date: Wed, 19 Feb 2014 13:43:37 +0100 Subject: [PATCH 5/5] Reset demo values --- demo.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/demo.html b/demo.html index d303cc3..ac6c83e 100644 --- a/demo.html +++ b/demo.html @@ -28,7 +28,7 @@

Single image with resizing

accept="image/*" image="image2" resize-max-height="300" - resize-max-width="100" + resize-max-width="250" resize-quality="0.7" />

Original