Fixed image scaling on iOS devices - Fixes blueimp#13.

iOS image scaling fixes based on
https://github.com/stomita/ios-imagefile-megapixel

Author: blueimp

load-image.js

@@ -1,15 +1,18 @@
 /*
- * JavaScript Load Image 1.2.1
+ * JavaScript Load Image 1.2.2
  * https://github.com/blueimp/JavaScript-Load-Image
  *
  * Copyright 2011, Sebastian Tschan
  * https://blueimp.net
  *
+ * iOS image scaling fixes based on
+ * https://github.com/stomita/ios-imagefile-megapixel
+ *
  * Licensed under the MIT license:
  * http://www.opensource.org/licenses/MIT
  */
 
-/*jslint nomen: true */
+/*jslint nomen: true, bitwise: true */
 /*global window, document, URL, webkitURL, Blob, File, FileReader, define */
 
 (function ($) {
@@ -34,6 +37,8 @@
                 // (Firefox 3.6) support the File API but not Blobs:
                     (window.File && file instanceof File)) {
                 url = oUrl = loadImage.createObjectURL(file);
+                // Store the file type for resize processing:
+                img._type = file.type;
             } else {
                 url = file;
             }
@@ -51,6 +56,103 @@
             (window.URL && URL.revokeObjectURL && URL) ||
             (window.webkitURL && webkitURL);
 
+    // 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
+            canvas = document.createElement('canvas');
+            canvas.width = canvas.height = 1;
+            ctx = canvas.getContext('2d');
+            ctx.drawImage(img, -iw + 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 false;
+    };
+
+    // Detects vertical squash in JPEG images:
+    loadImage.detectVerticalSquash = function (img, ih) {
+        var canvas = document.createElement('canvas'),
+            ctx = 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;
+        // search image edge pixel position in case it is squashed vertically:
+        sy = 0;
+        ey = ih;
+        py = ih;
+        while (py > sy) {
+            alpha = data[(py - 1) * 4 + 3];
+            if (alpha === 0) {
+                ey = py;
+            } else {
+                sy = py;
+            }
+            py = (ey + sy) >> 1;
+        }
+        return py / ih;
+    };
+
+    // 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
+            tmpCanvas = document.createElement('canvas'),
+            tmpCtx,
+            sy,
+            sh,
+            sx,
+            sw;
+        ctx.save();
+        if (loadImage.detectSubsampling(img)) {
+            iw /= 2;
+            ih /= 2;
+        }
+        vertSquashRatio = loadImage.detectVerticalSquash(img, ih);
+        tmpCanvas.width = tmpCanvas.height = d;
+        tmpCtx = tmpCanvas.getContext('2d');
+        sy = 0;
+        while (sy < ih) {
+            sh = sy + d > ih ? ih - sy : d;
+            sx = 0;
+            while (sx < iw) {
+                sw = sx + d > iw ? iw - sx : d;
+                tmpCtx.clearRect(0, 0, d, d);
+                tmpCtx.drawImage(img, -sx, -sy);
+                ctx.drawImage(
+                    tmpCanvas,
+                    0,
+                    0,
+                    sw,
+                    sh,
+                    Math.floor(sx * width / iw),
+                    Math.floor(sy * height / ih / vertSquashRatio),
+                    Math.ceil(sw * width / iw),
+                    Math.ceil(sh * height / ih / vertSquashRatio)
+                );
+                sx += d;
+            }
+            sy += d;
+        }
+        ctx.restore();
+        tmpCanvas = tmpCtx = null;
+    };
+
     // Scales the given image (img or canvas HTML element)
     // using the given options.
     // Returns a canvas object if the browser supports canvas
@@ -80,8 +182,13 @@
         if (img.getContext || (options.canvas && canvas.getContext)) {
             canvas.width = width;
             canvas.height = height;
-            canvas.getContext('2d')
-                .drawImage(img, 0, 0, width, height);
+            if (img._type === 'image/jpeg') {
+                loadImage
+                    .renderImageToCanvas(img, canvas, width, height);
+            } else {
+                canvas.getContext('2d')
+                    .drawImage(img, 0, 0, width, height);
+            }
             return canvas;
         }
         img.width = width;