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 @@
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); });