Cover-mode for resizing images

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
+<input id="inputImage5" 
+	  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  <img ng-show="image5" ng-src="{{image5.url}}" type="{{image5.file.type}}"/>
+Resized  <img ng-show="image5" ng-src="{{image5.resized.dataURL}}"/>
+```
+
+
+
 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?

demo.html

@@ -38,8 +38,7 @@ <h2>Single image with resizing</h2>
             <button type="submit" ng-click="single(image2.resized)" disabled>Add</button>
         </div>
         <hr />
-
-
+
 
 
         <h2>Multiple images</h2>
@@ -81,6 +80,32 @@ <h2>Multiple images with resizing</h2>
             <button type="submit" disabled>Add</button>
         </div>
         <hr />
+
+
+
+				<h2>Single image with covering</h2>
+        <div>
+            <label for="inputImage5">Image 5</label>
+
+            <input id="inputImage5" 
+                type="file" 
+                accept="image/*" 
+                image="image5" 
+                cover="true" 
+                cover-height="300" 
+                cover-width="100" 
+                cover-x="center" 
+                cover-y="bottom" 
+                resize-quality="0.7" />
+
+            <p>Original</p>
+            <img ng-show="image5" ng-src="{{image5.url}}" type="{{image5.file.type}}"/>
+            <p>Resized</p>
+            <img ng-show="image5" ng-src="{{image5.resized.dataURL}}"/>
+            <button type="submit" ng-click="single(image5.resized)" disabled>Add</button>
+        </div>
+        <hr />
+
     </form>  
 
     <p>Uploaded Image / Size: {{sizeInBytes}} Bytes</p>

public/javascripts/imageupload.js

@@ -23,32 +23,79 @@ 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();
 
             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);
                             });