Move image scaling functionality into a separate module.

Author: blueimp

README.md

@@ -41,10 +41,11 @@ Or alternatively, choose which components you want to include:
 
 ```html
 <script src="js/load-image.js"></script>
-<script src="js/load-image-orientation.js"></script>
+<script src="js/load-image-scale.js"></script>
 <script src="js/load-image-meta.js"></script>
 <script src="js/load-image-exif.js"></script>
 <script src="js/load-image-exif-map.js"></script>
+<script src="js/load-image-orientation.js"></script>
 ```
 
 ## Usage
@@ -200,7 +201,7 @@ value `true`.
 When set to `true`, it will set the orientation value based on the EXIF data of
 the image, which will be parsed automatically if the exif library is available.  
 Setting the `orientation` also enables the `canvas` option.  
-Setting `orientation` to `true` alsoe enables the `meta` option.
+Setting `orientation` to `true` also enables the `meta` option.
 * **meta**: Automatically parses the image meta data if set to `true`.  
 The meta data is passed to the callback as second argument.
 * **canvas**: Returns the image as

index.html

@@ -57,6 +57,7 @@ <h2>Exif meta data</h2>
 </div>
 <br>
 <script src="js/load-image.js"></script>
+<script src="js/load-image-scale.js"></script>
 <script src="js/load-image-meta.js"></script>
 <script src="js/load-image-exif.js"></script>
 <script src="js/load-image-exif-map.js"></script>

js/load-image-orientation.js

@@ -15,9 +15,9 @@
   'use strict'
   if (typeof define === 'function' && define.amd) {
     // Register as an anonymous AMD module:
-    define(['./load-image'], factory)
+    define(['./load-image', './load-image-scale'], factory)
   } else if (typeof module === 'object' && module.exports) {
-    factory(require('./load-image'))
+    factory(require('./load-image'), require('./load-image-scale'))
   } else {
     // Browser globals:
     factory(window.loadImage)

js/load-image-scale.js

@@ -0,0 +1,282 @@
+/*
+ * JavaScript Load Image Scaling
+ * https://github.com/blueimp/JavaScript-Load-Image
+ *
+ * Copyright 2011, Sebastian Tschan
+ * https://blueimp.net
+ *
+ * Licensed under the MIT license:
+ * https://opensource.org/licenses/MIT
+ */
+
+/* global define */
+
+;(function (factory) {
+  'use strict'
+  if (typeof define === 'function' && define.amd) {
+    // Register as an anonymous AMD module:
+    define(['./load-image'], factory)
+  } else if (typeof module === 'object' && module.exports) {
+    factory(require('./load-image'))
+  } else {
+    // Browser globals:
+    factory(window.loadImage)
+  }
+}(function (loadImage) {
+  'use strict'
+
+  var originalTransform = loadImage.transform
+
+  loadImage.transform = function (img, options, callback, file, data) {
+    originalTransform.call(
+      loadImage,
+      loadImage.scale(img, options, data),
+      options,
+      callback,
+      file,
+      data
+    )
+  }
+
+  // Transform image coordinates, allows to override e.g.
+  // the canvas orientation based on the orientation option,
+  // gets canvas, options passed as arguments:
+  loadImage.transformCoordinates = function () {
+    return
+  }
+
+  // Returns transformed options, allows to override e.g.
+  // maxWidth, maxHeight and crop options based on the aspectRatio.
+  // gets img, options passed as arguments:
+  loadImage.getTransformedOptions = function (img, options) {
+    var aspectRatio = options.aspectRatio
+    var newOptions
+    var i
+    var width
+    var height
+    if (!aspectRatio) {
+      return options
+    }
+    newOptions = {}
+    for (i in options) {
+      if (options.hasOwnProperty(i)) {
+        newOptions[i] = options[i]
+      }
+    }
+    newOptions.crop = true
+    width = img.naturalWidth || img.width
+    height = img.naturalHeight || img.height
+    if (width / height > aspectRatio) {
+      newOptions.maxWidth = height * aspectRatio
+      newOptions.maxHeight = height
+    } else {
+      newOptions.maxWidth = width
+      newOptions.maxHeight = width / aspectRatio
+    }
+    return newOptions
+  }
+
+  // Canvas render method, allows to implement a different rendering algorithm:
+  loadImage.renderImageToCanvas = function (
+    canvas,
+    img,
+    sourceX,
+    sourceY,
+    sourceWidth,
+    sourceHeight,
+    destX,
+    destY,
+    destWidth,
+    destHeight
+  ) {
+    canvas.getContext('2d').drawImage(
+      img,
+      sourceX,
+      sourceY,
+      sourceWidth,
+      sourceHeight,
+      destX,
+      destY,
+      destWidth,
+      destHeight
+    )
+    return canvas
+  }
+
+  // Determines if the target image should be a canvas element:
+  loadImage.hasCanvasOption = function (options) {
+    return options.canvas || options.crop || !!options.aspectRatio
+  }
+
+  // Scales and/or crops the given image (img or canvas HTML element)
+  // using the given options.
+  // Returns a canvas object if the browser supports canvas
+  // and the hasCanvasOption method returns true or a canvas
+  // object is passed as image, else the scaled image:
+  loadImage.scale = function (img, options, data) {
+    options = options || {}
+    var canvas = document.createElement('canvas')
+    var useCanvas = img.getContext ||
+                    (loadImage.hasCanvasOption(options) && canvas.getContext)
+    var width = img.naturalWidth || img.width
+    var height = img.naturalHeight || img.height
+    var destWidth = width
+    var destHeight = height
+    var maxWidth
+    var maxHeight
+    var minWidth
+    var minHeight
+    var sourceWidth
+    var sourceHeight
+    var sourceX
+    var sourceY
+    var pixelRatio
+    var downsamplingRatio
+    var tmp
+    function scaleUp () {
+      var scale = Math.max(
+        (minWidth || destWidth) / destWidth,
+        (minHeight || destHeight) / destHeight
+      )
+      if (scale > 1) {
+        destWidth *= scale
+        destHeight *= scale
+      }
+    }
+    function scaleDown () {
+      var scale = Math.min(
+        (maxWidth || destWidth) / destWidth,
+        (maxHeight || destHeight) / destHeight
+      )
+      if (scale < 1) {
+        destWidth *= scale
+        destHeight *= scale
+      }
+    }
+    if (useCanvas) {
+      options = loadImage.getTransformedOptions(img, options, data)
+      sourceX = options.left || 0
+      sourceY = options.top || 0
+      if (options.sourceWidth) {
+        sourceWidth = options.sourceWidth
+        if (options.right !== undefined && options.left === undefined) {
+          sourceX = width - sourceWidth - options.right
+        }
+      } else {
+        sourceWidth = width - sourceX - (options.right || 0)
+      }
+      if (options.sourceHeight) {
+        sourceHeight = options.sourceHeight
+        if (options.bottom !== undefined && options.top === undefined) {
+          sourceY = height - sourceHeight - options.bottom
+        }
+      } else {
+        sourceHeight = height - sourceY - (options.bottom || 0)
+      }
+      destWidth = sourceWidth
+      destHeight = sourceHeight
+    }
+    maxWidth = options.maxWidth
+    maxHeight = options.maxHeight
+    minWidth = options.minWidth
+    minHeight = options.minHeight
+    if (useCanvas && maxWidth && maxHeight && options.crop) {
+      destWidth = maxWidth
+      destHeight = maxHeight
+      tmp = sourceWidth / sourceHeight - maxWidth / maxHeight
+      if (tmp < 0) {
+        sourceHeight = maxHeight * sourceWidth / maxWidth
+        if (options.top === undefined && options.bottom === undefined) {
+          sourceY = (height - sourceHeight) / 2
+        }
+      } else if (tmp > 0) {
+        sourceWidth = maxWidth * sourceHeight / maxHeight
+        if (options.left === undefined && options.right === undefined) {
+          sourceX = (width - sourceWidth) / 2
+        }
+      }
+    } else {
+      if (options.contain || options.cover) {
+        minWidth = maxWidth = maxWidth || minWidth
+        minHeight = maxHeight = maxHeight || minHeight
+      }
+      if (options.cover) {
+        scaleDown()
+        scaleUp()
+      } else {
+        scaleUp()
+        scaleDown()
+      }
+    }
+    if (useCanvas) {
+      pixelRatio = options.pixelRatio
+      if (pixelRatio > 1) {
+        canvas.style.width = destWidth + 'px'
+        canvas.style.height = destHeight + 'px'
+        destWidth *= pixelRatio
+        destHeight *= pixelRatio
+        canvas.getContext('2d').scale(pixelRatio, pixelRatio)
+      }
+      downsamplingRatio = options.downsamplingRatio
+      if (downsamplingRatio > 0 && downsamplingRatio < 1 &&
+            destWidth < sourceWidth && destHeight < sourceHeight) {
+        while (sourceWidth * downsamplingRatio > destWidth) {
+          canvas.width = sourceWidth * downsamplingRatio
+          canvas.height = sourceHeight * downsamplingRatio
+          loadImage.renderImageToCanvas(
+            canvas,
+            img,
+            sourceX,
+            sourceY,
+            sourceWidth,
+            sourceHeight,
+            0,
+            0,
+            canvas.width,
+            canvas.height
+          )
+          sourceX = 0
+          sourceY = 0
+          sourceWidth = canvas.width
+          sourceHeight = canvas.height
+          img = document.createElement('canvas')
+          img.width = sourceWidth
+          img.height = sourceHeight
+          loadImage.renderImageToCanvas(
+            img,
+            canvas,
+            0,
+            0,
+            sourceWidth,
+            sourceHeight,
+            0,
+            0,
+            sourceWidth,
+            sourceHeight
+          )
+        }
+      }
+      canvas.width = destWidth
+      canvas.height = destHeight
+      loadImage.transformCoordinates(
+        canvas,
+        options
+      )
+      return loadImage.renderImageToCanvas(
+        canvas,
+        img,
+        sourceX,
+        sourceY,
+        sourceWidth,
+        sourceHeight,
+        0,
+        0,
+        destWidth,
+        destHeight
+      )
+    }
+    img.width = destWidth
+    img.height = destHeight
+    return img
+  }
+}))