Add image smoothing options.

Resolves blueimp#95.

Author: blueimp

README.md

@@ -209,8 +209,16 @@ The optional third argument to **loadImage()** is a map of options:
   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.  
+  step scales the image to half the size, before reaching the target
+  dimensions.  
   Requires `canvas: true`.
+- **imageSmoothingEnabled**: If set to `false`,
+  [disables image smoothing](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/imageSmoothingEnabled).  
+  Defaults to `true` and requires `canvas: true`.
+- **imageSmoothingQuality**: Sets the
+  [quality of image smoothing](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/imageSmoothingQuality).  
+  Possible values: `'low'`, `'medium'`, `'high'`  
+  Defaults to `'low'` and requires `canvas: true`.
 - **crop**: Crops the image to the maxWidth/maxHeight constraints if set to
   `true`.  
   Enabling the `crop` option also enables the `canvas` option.

js/load-image-scale.js

@@ -85,21 +85,26 @@
     destX,
     destY,
     destWidth,
-    destHeight
+    destHeight,
+    options
   ) {
-    canvas
-      .getContext('2d')
-      .drawImage(
-        img,
-        sourceX,
-        sourceY,
-        sourceWidth,
-        sourceHeight,
-        destX,
-        destY,
-        destWidth,
-        destHeight
-      )
+    var ctx = canvas.getContext('2d')
+    if (options.imageSmoothingEnabled === false) {
+      ctx.imageSmoothingEnabled = false
+    } else if (options.imageSmoothingQuality) {
+      ctx.imageSmoothingQuality = options.imageSmoothingQuality
+    }
+    ctx.drawImage(
+      img,
+      sourceX,
+      sourceY,
+      sourceWidth,
+      sourceHeight,
+      destX,
+      destY,
+      destWidth,
+      destHeight
+    )
     return canvas
   }
 
@@ -246,7 +251,8 @@
             0,
             0,
             canvas.width,
-            canvas.height
+            canvas.height,
+            options
           )
           sourceX = 0
           sourceY = 0
@@ -266,7 +272,8 @@
             0,
             0,
             sourceWidth,
-            sourceHeight
+            sourceHeight,
+            options
           )
         }
       }
@@ -283,7 +290,8 @@
         0,
         0,
         destWidth,
-        destHeight
+        destHeight,
+        options
       )
     }
     img.width = destWidth

test/test.js

@@ -398,6 +398,114 @@
         ).to.be.ok
       })
     })
+
+    describe('image smoothing', function () {
+      if (
+        !document.createElement('canvas').getContext('2d').imageSmoothingEnabled
+      ) {
+        return
+      }
+
+      it('imageSmoothingEnabled defaults to true', function (done) {
+        expect(
+          loadImage(
+            blobGIF,
+            function (img) {
+              expect(img.width).to.equal(160)
+              expect(img.getContext('2d').imageSmoothingEnabled).to.equal(true)
+              done()
+            },
+            { minWidth: 160, canvas: true }
+          )
+        ).to.be.ok
+      })
+
+      it('Sets imageSmoothingEnabled to false', function (done) {
+        expect(
+          loadImage(
+            blobGIF,
+            function (img) {
+              expect(img.width).to.equal(160)
+              expect(img.getContext('2d').imageSmoothingEnabled).to.equal(false)
+              done()
+            },
+            { minWidth: 160, canvas: true, imageSmoothingEnabled: false }
+          )
+        ).to.be.ok
+      })
+
+      if (
+        document.createElement('canvas').getContext('2d')
+          .imageSmoothingQuality !== 'low'
+      ) {
+        return
+      }
+
+      it('imageSmoothingQuality defaults to "low"', function (done) {
+        expect(
+          loadImage(
+            blobGIF,
+            function (img) {
+              expect(img.width).to.equal(160)
+              expect(img.getContext('2d').imageSmoothingQuality).to.equal('low')
+              done()
+            },
+            { minWidth: 160, canvas: true }
+          )
+        ).to.be.ok
+      })
+
+      it('Sets imageSmoothingQuality to "medium"', function (done) {
+        expect(
+          loadImage(
+            blobGIF,
+            function (img) {
+              expect(img.width).to.equal(160)
+              expect(img.getContext('2d').imageSmoothingQuality).to.equal(
+                'medium'
+              )
+              done()
+            },
+            { minWidth: 160, canvas: true, imageSmoothingQuality: 'medium' }
+          )
+        ).to.be.ok
+      })
+
+      it('Sets imageSmoothingQuality to "high"', function (done) {
+        expect(
+          loadImage(
+            blobGIF,
+            function (img) {
+              expect(img.width).to.equal(160)
+              expect(img.getContext('2d').imageSmoothingQuality).to.equal(
+                'high'
+              )
+              done()
+            },
+            { minWidth: 160, canvas: true, imageSmoothingQuality: 'high' }
+          )
+        ).to.be.ok
+      })
+
+      it('Ignores imageSmoothingQuality if imageSmoothingEnabled is false', function (done) {
+        expect(
+          loadImage(
+            blobGIF,
+            function (img) {
+              expect(img.width).to.equal(160)
+              expect(img.getContext('2d').imageSmoothingQuality).to.equal('low')
+              done()
+            },
+            {
+              minWidth: 160,
+              canvas: true,
+              imageSmoothingQuality: 'high',
+              imageSmoothingEnabled: false
+            }
+          )
+        ).to.be.ok
+      })
+    })
   })
 
   describe('Cropping', function () {