Add downsamplingRatio option.

Author: blueimp

README.md

@@ -188,6 +188,10 @@ Setting the `aspectRatio` also enables the `crop` option.
 pixels on the screen.  
 Should be set to `window.devicePixelRatio` unless the scaled image is not
 rendered on screen.  
+Defaults to `1` and requires `canvas: true`.
+* **downsamplingRatio**: Defines the ratio in which the image is downsampled.  
+By default, images are downsampled in one step. With a ratio of `0.5`, each step
+scales the image to half the size, before reaching the target dimensions.  
 Requires `canvas: true`.
 * **crop**: Crops the image to the maxWidth/maxHeight constraints if set to
 `true`.  

js/demo.js

@@ -78,7 +78,8 @@ $(function () {
     var options = {
       maxWidth: result.width(),
       canvas: true,
-      pixelRatio: window.devicePixelRatio
+      pixelRatio: window.devicePixelRatio,
+      downsamplingRatio: 0.5
     }
     if (!file) {
       return
@@ -139,7 +140,8 @@ $(function () {
         sourceHeight: coordinates.h * pixelRatio,
         minWidth: result.width(),
         maxWidth: result.width(),
-        pixelRatio: pixelRatio
+        pixelRatio: pixelRatio,
+        downsamplingRatio: 0.5
       }))
       coordinates = null
     }

js/load-image.js

@@ -166,6 +166,7 @@
     var sourceX
     var sourceY
     var pixelRatio
+    var downsamplingRatio
     var tmp
     function scaleUp () {
       var scale = Math.max(
@@ -251,6 +252,43 @@
         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
+          )
+          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(

test/test.js

@@ -198,6 +198,14 @@
         }, {maxWidth: 40, canvas: true, pixelRatio: 2})).to.be.ok()
       })
 
+      it('Scale down with the given downsamplingRatio', function (done) {
+        expect(loadImage(blobGIF, function (img) {
+          expect(img.width).to.be(20)
+          expect(img.height).to.be(15)
+          done()
+        }, {maxWidth: 20, canvas: true, downsamplingRatio: 0.5})).to.be.ok()
+      })
+
       it('Ignore max settings if image dimensions are smaller', function (done) {
         expect(loadImage(blobGIF, function (img) {
           expect(img.width).to.be(80)