fix image orientation (didi#724)

* fix(image-processor): 当浏览器不自动修复图片角度问题时，再用代码修复图片角度
lizzie0802 · Feb 25, 2021 · 8bd1b23 · 8bd1b23
1 parent bf4147d
commit 8bd1b23
Showing 1 changed file with 42 additions and 38 deletions.
diff --git a/components/image-reader/image-processor.js b/components/image-reader/image-processor.js
@@ -127,44 +127,48 @@ function makeCanvas(img, orientation, maxWidth, maxHeight, quality) {
   ctx.drawImage(img, 0, 0, width, height)
 
   let base64 = null
-  switch (orientation) {
-    case 3:
-      ctx.rotate(180 * Math.PI / 180)
-      ctx.drawImage(img, -width, -height, width, height)
-      break
-    case 6:
-      ctx.rotate(90 * Math.PI / 180)
-      ctx.drawImage(img, 0, -width, height, width)
-      break
-    case 8:
-      ctx.rotate(270 * Math.PI / 180)
-      ctx.drawImage(img, -height, 0, height, width)
-      break
-    case 2:
-      ctx.translate(width, 0)
-      ctx.scale(-1, 1)
-      ctx.drawImage(img, 0, 0, width, height)
-      break
-    case 4:
-      ctx.translate(width, 0)
-      ctx.scale(-1, 1)
-      ctx.rotate(180 * Math.PI / 180)
-      ctx.drawImage(img, -width, -height, width, height)
-      break
-    case 5:
-      ctx.translate(width, 0)
-      ctx.scale(-1, 1)
-      ctx.rotate(90 * Math.PI / 180)
-      ctx.drawImage(img, 0, -width, height, width)
-      break
-    case 7:
-      ctx.translate(width, 0)
-      ctx.scale(-1, 1)
-      ctx.rotate(270 * Math.PI / 180)
-      ctx.drawImage(img, -height, 0, height, width)
-      break
-    default:
-      ctx.drawImage(img, 0, 0, width, height)
+  if (CSS && CSS.supports && !CSS.supports('image-orientation:none')) {
+    switch (orientation) {
+      case 3:
+        ctx.rotate(180 * Math.PI / 180)
+        ctx.drawImage(img, -width, -height, width, height)
+        break
+      case 6:
+        ctx.rotate(90 * Math.PI / 180)
+        ctx.drawImage(img, 0, -width, height, width)
+        break
+      case 8:
+        ctx.rotate(270 * Math.PI / 180)
+        ctx.drawImage(img, -height, 0, height, width)
+        break
+      case 2:
+        ctx.translate(width, 0)
+        ctx.scale(-1, 1)
+        ctx.drawImage(img, 0, 0, width, height)
+        break
+      case 4:
+        ctx.translate(width, 0)
+        ctx.scale(-1, 1)
+        ctx.rotate(180 * Math.PI / 180)
+        ctx.drawImage(img, -width, -height, width, height)
+        break
+      case 5:
+        ctx.translate(width, 0)
+        ctx.scale(-1, 1)
+        ctx.rotate(90 * Math.PI / 180)
+        ctx.drawImage(img, 0, -width, height, width)
+        break
+      case 7:
+        ctx.translate(width, 0)
+        ctx.scale(-1, 1)
+        ctx.rotate(270 * Math.PI / 180)
+        ctx.drawImage(img, -height, 0, height, width)
+        break
+      default:
+        ctx.drawImage(img, 0, 0, width, height)
+    }
+  } else {
+    ctx.drawImage(img, 0, 0, width, height)
   }
 
   if ((UA.oldIOS || UA.oldAndroid || UA.mQQBrowser || !navigator.userAgent) && window.JPEGEncoder) {