Ensure pixelRatio scaling is idempotent.

blueimp · blueimp · commit 379922b53b38 · 2020-04-21T23:23:47.000+09:00
diff --git a/js/load-image-scale.js b/js/load-image-scale.js
@@ -225,11 +225,17 @@
     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)
+        if (parseInt(img.style.width, 10) === width / pixelRatio) {
+          // Source image is already scaled according to device pixel ratio
+          canvas.style.width = destWidth / pixelRatio + 'px'
+          canvas.style.height = destHeight / pixelRatio + 'px'
+        } else {
+          canvas.style.width = destWidth + 'px'
+          canvas.style.height = destHeight + 'px'
+          destWidth *= pixelRatio
+          destHeight *= pixelRatio
+          canvas.getContext('2d').scale(pixelRatio, pixelRatio)
+        }
       }
       downsamplingRatio = options.downsamplingRatio
       if (
diff --git a/test/test.js b/test/test.js
@@ -300,6 +300,12 @@
               expect(img.height).to.equal(160)
               expect(img.style.width).to.equal('120px')
               expect(img.style.height).to.equal('80px')
+              // Check if pixelRatio scaling is idempotent:
+              var img2 = loadImage.scale(img, { minWidth: 120, pixelRatio: 2 })
+              expect(img2.width).to.equal(240)
+              expect(img2.height).to.equal(160)
+              expect(img2.style.width).to.equal('120px')
+              expect(img2.style.height).to.equal('80px')
               done()
             },
             { minWidth: 120, canvas: true, pixelRatio: 2 }
@@ -316,6 +322,12 @@
               expect(img.height).to.equal(40)
               expect(img.style.width).to.equal('30px')
               expect(img.style.height).to.equal('20px')
+              // Check if pixelRatio scaling is idempotent:
+              var img2 = loadImage.scale(img, { minWidth: 30, pixelRatio: 2 })
+              expect(img2.width).to.equal(60)
+              expect(img2.height).to.equal(40)
+              expect(img2.style.width).to.equal('30px')
+              expect(img2.style.height).to.equal('20px')
               done()
             },
             { maxWidth: 30, canvas: true, pixelRatio: 2 }
