diff --git a/README.md b/README.md index f638a32..20cf531 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: @@ -72,12 +91,19 @@ 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 - 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? diff --git a/demo.html b/demo.html index 4d4cd56..ac6c83e 100644 --- a/demo.html +++ b/demo.html @@ -38,8 +38,7 @@

Single image with resizing


- - +

Multiple images

@@ -81,6 +80,32 @@

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..73cb729 100644 --- a/public/javascripts/imageupload.js +++ b/public/javascripts/imageupload.js @@ -23,6 +23,11 @@ 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 coverX = options.coverX || 'left'; + var coverY = options.coverY || 'top'; var type = options.resizeType || 'image/jpg'; var canvas = getResizeArea(); @@ -30,25 +35,67 @@ 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; + var imgX = 0; + var imgY = 0; + + 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; + } + + // 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); @@ -81,6 +128,11 @@ angular.module('imageupload', []) resizeMaxWidth: '@?', resizeQuality: '@?', resizeType: '@?', + cover: '@?', + coverHeight: '@?', + coverWidth: '@?', + coverX: '@?', + coverY: '@?', }, link: function postLink(scope, element, attrs, ctrl) { @@ -123,7 +175,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); });