Added crop option to enfore maxWidth & maxHeight constraints.

blueimp · blueimp · commit 15a2b276c0f2 · 2013-04-26T08:35:48.000+02:00
diff --git a/README.md b/README.md
@@ -33,7 +33,7 @@ However, JavaScript Load Image is a very suitable complement to the [Canvas to B
 The **loadImage()** function accepts a [File](https://developer.mozilla.org/en/DOM/File) or [Blob](https://developer.mozilla.org/en/DOM/Blob) object or a simple image URL (e.g. "http://example.org/image.png") as first argument.
 
 If a [File](https://developer.mozilla.org/en/DOM/File) or [Blob](https://developer.mozilla.org/en/DOM/Blob) is passed as parameter, it returns a HTML **img** element if the browser supports the [URL](https://developer.mozilla.org/en/DOM/window.URL) API or a [FileReader](https://developer.mozilla.org/en/DOM/FileReader) object if supported, or **false**.  
-It always returns a HTML **img** element when passing an image URL:
+It always returns a HTML [img](https://developer.mozilla.org/en/docs/HTML/Element/Img) element when passing an image URL:
 
 ```js
 document.getElementById('file-input').onchange = function (e) {
@@ -88,6 +88,7 @@ The optional third argument is a map of options:
 * **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.
+* **crop**: Defines if the canvas element should be cropped to the maxWidth/maxHeight constraints.
 * **canvas**: Defines if the returned element should be a [canvas](https://developer.mozilla.org/en/HTML/Canvas) element.
 * **crossOrigin**: Sets the crossOrigin property on the img element for loading [CORS enabled images](https://developer.mozilla.org/en-US/docs/HTML/CORS_Enabled_Image).
 * **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*.
diff --git a/index.html b/index.html
@@ -1,7 +1,7 @@
 <!DOCTYPE HTML>
 <!--
 /*
- * JavaScript Load Image Demo 1.3.1
+ * JavaScript Load Image Demo 1.5
  * https://github.com/blueimp/JavaScript-Load-Image
  *
  * Copyright 2011, Sebastian Tschan
@@ -17,12 +17,11 @@
 <meta charset="utf-8">
 <title>JavaScript Load Image</title>
 <meta name="description" content="JavaScript Load Image is a function to load images provided as File or Blob objects or via URL. It returns an optionally scaled HTML img or canvas element.">
-<meta name="viewport" content="width=device-width">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link rel="stylesheet" href="http://blueimp.github.com/cdn/css/bootstrap.min.css">
 <style>body{padding-top:60px;}</style>
 <link rel="stylesheet" href="http://blueimp.github.com/cdn/css/bootstrap-responsive.min.css">
 <!--[if lt IE 7]><link rel="stylesheet" href="http://blueimp.github.com/cdn/css/bootstrap-ie6.min.css"><![endif]-->
-<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
 </head>
 <body>
 <div class="navbar navbar-fixed-top">
@@ -54,7 +53,7 @@ <h1>JavaScript Load Image Demo</h1>
     </div>
     <blockquote>
         <p><a href="https://developer.mozilla.org/en/JavaScript/">JavaScript</a> Load Image is a function to load images provided as <a href="https://developer.mozilla.org/en/DOM/File">File</a> or <a href="https://developer.mozilla.org/en/DOM/Blob">Blob</a> objects or via URL.<br>
-            It returns an optionally scaled HTML <strong>img</strong> or <strong>canvas</strong> element.</p>
+            It returns an optionally <strong>scaled</strong> and/or <strong>cropped</strong> HTML <a href="https://developer.mozilla.org/en/docs/HTML/Element/Img">img</a> or <a href="https://developer.mozilla.org/en/docs/HTML/Canvas">canvas</a> element.<br></p>
     </blockquote>
     <br>
     <div class="row">
diff --git a/load-image.js b/load-image.js
@@ -1,5 +1,5 @@
 /*
- * JavaScript Load Image 1.4.1
+ * JavaScript Load Image 1.5
  * https://github.com/blueimp/JavaScript-Load-Image
  *
  * Copyright 2011, Sebastian Tschan
@@ -77,40 +77,38 @@
 
     // Detects subsampling in JPEG images:
     loadImage.detectSubsampling = function (img) {
-        var iw = img.width,
-            ih = img.height,
-            canvas,
-            ctx;
-        if (iw * ih > 1024 * 1024) { // only consider mexapixel images
+        var canvas,
+            context;
+        if (img.width * img.height > 1024 * 1024) { // only consider mexapixel images
             canvas = document.createElement('canvas');
             canvas.width = canvas.height = 1;
-            ctx = canvas.getContext('2d');
-            ctx.drawImage(img, -iw + 1, 0);
+            context = canvas.getContext('2d');
+            context.drawImage(img, -img.width + 1, 0);
             // subsampled image becomes half smaller in rendering size.
             // check alpha channel value to confirm image is covering edge pixel or not.
             // if alpha value is 0 image is not covering, hence subsampled.
-            return ctx.getImageData(0, 0, 1, 1).data[3] === 0;
+            return context.getImageData(0, 0, 1, 1).data[3] === 0;
         }
         return false;
     };
 
     // Detects vertical squash in JPEG images:
-    loadImage.detectVerticalSquash = function (img, ih) {
+    loadImage.detectVerticalSquash = function (img, correctedHeight) {
         var canvas = document.createElement('canvas'),
-            ctx = canvas.getContext('2d'),
+            context = canvas.getContext('2d'),
             data,
             sy,
             ey,
             py,
             alpha;
         canvas.width = 1;
-        canvas.height = ih;
-        ctx.drawImage(img, 0, 0);
-        data = ctx.getImageData(0, 0, 1, ih).data;
+        canvas.height = correctedHeight;
+        context.drawImage(img, 0, 0);
+        data = context.getImageData(0, 0, 1, correctedHeight).data;
         // search image edge pixel position in case it is squashed vertically:
         sy = 0;
-        ey = ih;
-        py = ih;
+        ey = correctedHeight;
+        py = correctedHeight;
         while (py > sy) {
             alpha = data[(py - 1) * 4 + 3];
             if (alpha === 0) {
@@ -120,94 +118,164 @@
             }
             py = (ey + sy) >> 1;
         }
-        return (py / ih) || 1;
+        return (py / correctedHeight) || 1;
     };
 
     // Renders image to canvas while working around iOS image scaling bugs:
     // https://github.com/blueimp/JavaScript-Load-Image/issues/13
-    loadImage.renderImageToCanvas = function (img, canvas, width, height) {
-        var iw = img.width,
-            ih = img.height,
-            ctx = canvas.getContext('2d'),
-            vertSquashRatio,
-            d = 1024, // size of tiling canvas
+    loadImage.renderImageToCanvas = function (
+        canvas,
+        img,
+        sourceX,
+        sourceY,
+        sourceWidth,
+        sourceHeight,
+        destX,
+        destY,
+        destWidth,
+        destHeight
+    ) {
+        var context = canvas.getContext('2d'),
             tmpCanvas = document.createElement('canvas'),
-            tmpCtx,
-            dw,
-            dh,
-            dx,
-            dy,
-            sx,
-            sy;
-        ctx.save();
+            tileSize = tmpCanvas.width = tmpCanvas.height = 1024,
+            tmpContext = tmpCanvas.getContext('2d'),
+            vertSquashRatio,
+            tileX,
+            tileY;
+        context.save();
         if (loadImage.detectSubsampling(img)) {
-            iw /= 2;
-            ih /= 2;
+            sourceWidth /= 2;
+            sourceHeight /= 2;
         }
-        vertSquashRatio = loadImage.detectVerticalSquash(img, ih);
-        tmpCanvas.width = tmpCanvas.height = d;
-        tmpCtx = tmpCanvas.getContext('2d');
-        dw = Math.ceil(d * width / iw);
-        dh = Math.ceil(d * height / ih / vertSquashRatio);
-        dy = 0;
-        sy = 0;
-        while (sy < ih) {
-            dx = 0;
-            sx = 0;
-            while (sx < iw) {
-                tmpCtx.clearRect(0, 0, d, d);
-                tmpCtx.drawImage(img, -sx, -sy);
-                ctx.drawImage(tmpCanvas, 0, 0, d, d, dx, dy, dw, dh);
-                sx += d;
-                dx += dw;
+        vertSquashRatio = loadImage.detectVerticalSquash(img, sourceHeight);
+        destWidth = Math.ceil(tileSize * destWidth / sourceWidth);
+        destHeight = Math.ceil(
+            tileSize * destHeight / sourceHeight / vertSquashRatio
+        );
+        destY = 0;
+        tileY = 0;
+        while (tileY < sourceHeight) {
+            destX = 0;
+            tileX = 0;
+            while (tileX < sourceWidth) {
+                tmpContext.clearRect(0, 0, tileSize, tileSize);
+                tmpContext.drawImage(
+                    img,
+                    sourceX,
+                    sourceY,
+                    sourceWidth,
+                    sourceHeight,
+                    -tileX,
+                    -tileY,
+                    sourceWidth,
+                    sourceHeight
+                );
+                context.drawImage(
+                    tmpCanvas,
+                    0,
+                    0,
+                    tileSize,
+                    tileSize,
+                    destX,
+                    destY,
+                    destWidth,
+                    destHeight
+                );
+                tileX += tileSize;
+                destX += destWidth;
             }
-            sy += d;
-            dy += dh;
+            tileY += tileSize;
+            destY += destHeight;
         }
-        ctx.restore();
-        tmpCanvas = tmpCtx = null;
+        context.restore();
     };
 
     // Scales the given image (img or canvas HTML element)
     // using the given options.
     // Returns a canvas object if the browser supports canvas
-    // and the canvas option is true or a canvas object is passed
-    // as image, else the scaled image:
+    // and the canvas or crop option is true or a canvas object
+    // is passed as image, else the scaled image:
     loadImage.scale = function (img, options) {
         options = options || {};
         var canvas = document.createElement('canvas'),
+            useCanvas = img.getContext ||
+                ((options.canvas || options.crop) && canvas.getContext),
             width = img.width,
             height = img.height,
+            maxWidth = options.maxWidth,
+            maxHeight = options.maxHeight,
+            sourceWidth = width,
+            sourceHeight = height,
+            sourceX = 0,
+            sourceY = 0,
+            destX = 0,
+            destY = 0,
+            destWidth,
+            destHeight,
+            scale;
+        if (useCanvas && maxWidth && maxHeight && options.crop) {
+            destWidth = maxWidth;
+            destHeight = maxHeight;
+            if (width / height < maxWidth / maxHeight) {
+                sourceHeight = maxHeight * width / maxWidth;
+                sourceY = (height - sourceHeight) / 2;
+            } else {
+                sourceWidth = maxWidth * height / maxHeight;
+                sourceX = (width - sourceWidth) / 2;
+            }
+        } else {
+            destWidth = width;
+            destHeight = height;
             scale = Math.max(
-                (options.minWidth || width) / width,
-                (options.minHeight || height) / height
+                (options.minWidth || destWidth) / destWidth,
+                (options.minHeight || destHeight) / destHeight
             );
-        if (scale > 1) {
-            width = Math.ceil(width * scale);
-            height = Math.ceil(height * scale);
-        }
-        scale = Math.min(
-            (options.maxWidth || width) / width,
-            (options.maxHeight || height) / height
-        );
-        if (scale < 1) {
-            width = Math.ceil(width * scale);
-            height = Math.ceil(height * scale);
+            if (scale > 1) {
+                destWidth = Math.ceil(destWidth * scale);
+                destHeight = Math.ceil(destHeight * scale);
+            }
+            scale = Math.min(
+                (maxWidth || destWidth) / destWidth,
+                (maxHeight || destHeight) / destHeight
+            );
+            if (scale < 1) {
+                destWidth = Math.ceil(destWidth * scale);
+                destHeight = Math.ceil(destHeight * scale);
+            }
         }
-        if (img.getContext || (options.canvas && canvas.getContext)) {
-            canvas.width = width;
-            canvas.height = height;
+        if (useCanvas) {
+            canvas.width = destWidth;
+            canvas.height = destHeight;
             if (img._type === 'image/jpeg') {
-                loadImage
-                    .renderImageToCanvas(img, canvas, width, height);
+                loadImage.renderImageToCanvas(
+                    canvas,
+                    img,
+                    sourceX,
+                    sourceY,
+                    sourceWidth,
+                    sourceHeight,
+                    destX,
+                    destY,
+                    destWidth,
+                    destHeight
+                );
             } else {
-                canvas.getContext('2d')
-                    .drawImage(img, 0, 0, width, height);
+                canvas.getContext('2d').drawImage(
+                    img,
+                    sourceX,
+                    sourceY,
+                    sourceWidth,
+                    sourceHeight,
+                    destX,
+                    destY,
+                    destWidth,
+                    destHeight
+                );
             }
             return canvas;
         }
-        img.width = width;
-        img.height = height;
+        img.width = destWidth;
+        img.height = destHeight;
         return img;
     };
 
diff --git a/load-image.min.js b/load-image.min.js
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "blueimp-load-image",
-    "version": "1.4.1",
+    "version": "1.5.0",
     "title": "JavaScript Load Image",
     "description": "JavaScript Load Image is a function to load images provided as File or Blob objects or via URL. It returns an optionally scaled HTML img or canvas element.",
     "keywords": [
@@ -12,7 +12,7 @@
         "blob",
         "url",
         "scale",
-        "scaling",
+        "crop",
         "img",
         "canvas"
     ],
diff --git a/test/index.html b/test/index.html
@@ -1,7 +1,7 @@
 <!DOCTYPE HTML>
 <!--
 /*
- * JavaScript Load Image Test 1.3
+ * JavaScript Load Image Test 1.5
  * https://github.com/blueimp/JavaScript-Load-Image
  *
  * Copyright 2011, Sebastian Tschan
@@ -16,7 +16,7 @@
 <!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><![endif]-->
 <meta charset="utf-8">
 <title>JavaScript Load Image Test</title>
-<meta name="viewport" content="width=device-width">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link rel="stylesheet" href="http://blueimp.github.com/cdn/css/mocha.min.css">
 </head>
 <body>
diff --git a/test/test.js b/test/test.js
