Add workaround for Chromium orientation crop bug.

blueimp · blueimp · commit 5f737b7c3562 · 2020-04-28T21:04:46.000+09:00
See https://bugs.chromium.org/p/chromium/issues/detail?id=1074354
diff --git a/js/load-image-orientation.js b/js/load-image-orientation.js
@@ -64,23 +64,43 @@ Exif orientation values to correctly display the letter F:
   var originalTransformCoordinates = loadImage.transformCoordinates
   var originalGetTransformedOptions = loadImage.getTransformedOptions
 
-  ;(function () {
-    // black 2x1 JPEG, with the following meta information set:
+  ;(function ($) {
+    // black+white 3x2 JPEG, with the following meta information set:
     // - EXIF Orientation: 6 (Rotated 90° CCW)
+    // Image data layout (B=black, F=white):
+    // BFF
+    // BBB
     var testImageURL =
       'data:image/jpeg;base64,/9j/4QAiRXhpZgAATU0AKgAAAAgAAQESAAMAAAABAAYAAAA' +
       'AAAD/2wCEAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBA' +
       'QEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQE' +
-      'BAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAf/AABEIAAEAAgMBEQACEQEDEQH/x' +
-      'ABKAAEAAAAAAAAAAAAAAAAAAAALEAEAAAAAAAAAAAAAAAAAAAAAAQEAAAAAAAAAAAAAAAA' +
-      'AAAAAEQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIRAxEAPwA/8H//2Q=='
+      'BAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAf/AABEIAAIAAwMBEQACEQEDEQH/x' +
+      'ABRAAEAAAAAAAAAAAAAAAAAAAAKEAEBAQADAQEAAAAAAAAAAAAGBQQDCAkCBwEBAAAAAAA' +
+      'AAAAAAAAAAAAAABEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEQMRAD8AG8T9NfSMEVMhQ' +
+      'voP3fFiRZ+MTHDifa/95OFSZU5OzRzxkyejv8ciEfhSceSXGjS8eSdLnZc2HDm4M3BxcXw' +
+      'H/9k='
     var img = document.createElement('img')
     img.onload = function () {
-      // Check if browser supports automatic image orientation:
-      loadImage.orientation = img.width === 1 && img.height === 2
+      // Check if the browser supports automatic image orientation:
+      $.orientation = img.width === 2 && img.height === 3
+      if ($.orientation) {
+        var canvas = document.createElement('canvas')
+        canvas.width = canvas.height = 1
+        var ctx = canvas.getContext('2d')
+        ctx.drawImage(img, 1, 1, 1, 1, 0, 0, 1, 1)
+        // Check if the source image coordinates (sX, sY, sWidth, sHeight) are
+        // correctly applied to the auto-orientated image, which should result
+        // in a white opaque pixel (e.g. in Safari).
+        // Browsers that show a transparent pixel (e.g. Chromium) fail to crop
+        // auto-oriented images correctly and require a workaround, e.g.
+        // drawing the complete source image to an intermediate canvas first.
+        // See https://bugs.chromium.org/p/chromium/issues/detail?id=1074354
+        $.orientationCropBug =
+          ctx.getImageData(0, 0, 1, 1).data.toString() !== '255,255,255,255'
+      }
     }
     img.src = testImageURL
-  })()
+  })(loadImage)
 
   /**
    * Determines if the image requires orientation.
diff --git a/js/load-image-scale.js b/js/load-image-scale.js
@@ -230,6 +230,31 @@
         destHeight *= pixelRatio
         canvas.getContext('2d').scale(pixelRatio, pixelRatio)
       }
+      // Check if workaround for Chromium orientation crop bug is required:
+      // https://bugs.chromium.org/p/chromium/issues/detail?id=1074354
+      if (
+        loadImage.orientationCropBug &&
+        !img.getContext &&
+        (sourceX || sourceY || sourceWidth !== width || sourceHeight !== height)
+      ) {
+        // Write the complete source image to an intermediate canvas first:
+        tmp = img
+        // eslint-disable-next-line no-param-reassign
+        img = document.createElement('canvas')
+        img.width = width
+        img.height = height
+        loadImage.drawImage(
+          tmp,
+          img,
+          0,
+          0,
+          width,
+          height,
+          width,
+          height,
+          options
+        )
+      }
       downsamplingRatio = options.downsamplingRatio
       if (
         downsamplingRatio > 0 &&
