update

Author: Sergey Russkih

README.md

@@ -19,7 +19,7 @@ document.getElementById('file-input').onchange = function (e) {
         function (img) {
             document.body.appendChild(img);
         },
-        {maxWidth: 600}
+        {width: 600}
     );
 };
 ```
@@ -42,7 +42,7 @@ document.getElementById('file-input').onchange = function (e) {
         function (img) {
             document.body.appendChild(img);
         },
-        {maxWidth: 600}
+        {width: 600}
     );
     if (!loadingImage) {
         // Alternative code ...
@@ -59,7 +59,7 @@ document.getElementById('file-input').onchange = function (e) {
         function (img) {
             document.body.appendChild(img);
         },
-        {maxWidth: 600}
+        {width: 600}
     );
     loadingImage.onload = loadingImage.onerror = null;
 };
@@ -78,16 +78,16 @@ window.loadImage(
             document.body.appendChild(img);
         }
     },
-    {maxWidth: 600}
+    {width: 600}
 );
 ```
 
 The optional third argument is a map of options:
 
-* **maxWidth**: Defines the maximum width of the img/canvas element.
-* **maxHeight**: Defines the maximum height of the img/canvas element.
-* **minWidth**: Defines the minimum width of the img/canvas element.
-* **minHeight**: Defines the minimum height of the img/canvas element.
+* **width**: Defines the width of the img/canvas element.
+* **height**: Defines the height of the img/canvas element.
+* **crop**: Defines croping of the canvas element. (for now works only for canvas)
+* **upscale**: Define upscaling of the img/canvas element.
 * **canvas**: Defines if the returned element should be a [canvas](https://developer.mozilla.org/en/HTML/Canvas) element.
 * **noRevoke**: By default, the [created object URL](https://developer.mozilla.org/en/DOM/window.URL.createObjectURL) is revoked after the image has been loaded, except when this option is set to *true*.
 
@@ -100,10 +100,10 @@ window.loadImage(
         document.body.appendChild(img);
     },
     {
-        maxWidth: 600,
-        maxHeight: 300,
-        minWidth: 100,
-        minHeight: 50,
+        width: 600,
+        height: 300,
+        crop: true,
+        upsacel: true,
         canvas: true,
         noRevoke: true
     }

index.html

@@ -69,9 +69,9 @@ <h2>Result</h2>
         </div>
     </div>
 </div>
-<script src="load-image.min.js"></script>
+<script src="load-image.js"></script>
 <!-- jQuery and Bootstrap JS are not required, but included for the demo -->
-<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
 <script src="http://blueimp.github.com/cdn/js/bootstrap.min.js"></script>
 <script>
 /*global jQuery, window, document */

load-image.js

@@ -58,32 +58,55 @@
     // as image, else the scaled image:
     loadImage.scale = function (img, options) {
         options = options || {};
+
         var canvas = document.createElement('canvas'),
             width = img.width,
             height = img.height,
+            x = 0, y = 0,
+            scale;
+
+        // if crop in options then we have to get biggest scale factor
+        if (options.crop || false){
             scale = Math.max(
-                (options.minWidth || width) / width,
-                (options.minHeight || height) / height
+                (options.width) / width,
+                (options.height) / height
+            );
+        } else {
+            // else we have to get lowest
+            scale = Math.min(
+                (options.width) / width,
+                (options.height) / height
             );
-        if (scale > 1) {
-            width = parseInt(width * scale, 10);
-            height = parseInt(height * scale, 10);
         }
-        scale = Math.min(
-            (options.maxWidth || width) / width,
-            (options.maxHeight || height) / height
-        );
-        if (scale < 1) {
+
+        // if scale factor is below 1, or more then and upscale options is
+        // then we going to calculate new image size
+        if (scale < 1 || (scale > 1 && (options.upscale || false))){
             width = parseInt(width * scale, 10);
             height = parseInt(height * scale, 10);
         }
+
+        if (options.crop || false){
+            var dx = width - Math.min(width, options.width || width),
+                dy = height - Math.min(height, options.height || height);
+            
+            // if we have difference with required size and
+            // currently calculated size, we have to calculate
+            // image offset to got correct croping
+            if (dx || dy) {
+                x = -1 * parseInt(dx / 2, 10);
+                y = -1 * parseInt(dy / 2, 10);
+            }
+        }
+
         if (img.getContext || (options.canvas && canvas.getContext)) {
             canvas.width = width;
             canvas.height = height;
             canvas.getContext('2d')
-                .drawImage(img, 0, 0, width, height);
+                .drawImage(img, x, y, width, height);
             return canvas;
         }
+
         img.width = width;
         img.height = height;
         return img;