移除 canvas 绘制图像的方向兼容处理 (#525)

* 移除针对 canvas 绘制图片时的 Orientation 兼容处理（已经进入 W3C 规范且支持良好）

Author: yinxulai

README.md

@@ -269,6 +269,9 @@ qiniu.compressImage(file, options).then(data => {
 
 ### qiniu.compressImage(file: File, options: object): Promise<CompressResult> (上传前图片压缩)
 
+  **在 v3.3.3 版本之前，该压缩行为会根据图片的 `Orientation(设备角度)` 信息对图片进行旋转处理，详细的信息可以参考**
+  [issue：关于 canvas 绘制图像的方向兼容处理](https://github.com/qiniu/js-sdk/issues/522 )
+
   ```JavaScript
   const imgLink = qiniu.compressImage(file, options).then(res => {
     // res : {

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "qiniu-js",
   "jsName": "qiniu",
-  "version": "3.3.2",
+  "version": "3.3.3",
   "private": false,
   "description": "Javascript SDK for Qiniu Resource (Cloud) Storage AP",
   "main": "lib/index.js",
@@ -78,7 +78,6 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime-corejs2": "^7.10.2",
-    "exif-js": "^2.3.0",
     "querystring": "^0.2.1",
     "spark-md5": "^3.0.0"
   }

package.json

@@ -14,7 +14,6 @@ export enum QiniuErrorName {
   RemoveCacheFailed = 'RemoveCacheFailed',
 
   // 图片压缩模块相关
-  InvalidTransformOrientation = 'InvalidTransformOrientation',
   GetCanvasContextFailed = 'GetCanvasContextFailed',
   UnsupportedFileType = 'UnsupportedFileType',
 

src/errors/index.ts

@@ -1,8 +1,6 @@
-import { EXIF } from 'exif-js'
-
 import { QiniuErrorName, QiniuError } from '../errors'
 
-import { createObjectURL, getTransform } from './helper'
+import { createObjectURL } from './helper'
 
 export interface CompressOptions {
   quality?: number
@@ -117,30 +115,24 @@ class Compress {
 
   getCanvas(img: HTMLImageElement): Promise<HTMLCanvasElement> {
     return new Promise((resolve, reject) => {
-      // 通过得到图片的信息来调整显示方向以正确显示图片，主要解决 ios 系统上的图片会有旋转的问题
-      EXIF.getData(img, () => {
-        const orientation = EXIF.getTag(img, 'Orientation') || 1
-        const { width, height, matrix } = getTransform(img, orientation)
-        const canvas = document.createElement('canvas')
-        const context = canvas.getContext('2d')
-        if (!context) {
-          reject(new QiniuError(
-            QiniuErrorName.GetCanvasContextFailed,
-            'context is null'
-          ))
-          return
-        }
-
-        canvas.width = width
-        canvas.height = height
-
-        this.clear(context, width, height)
-        context.save()
-        context.transform(...matrix)
-        context.drawImage(img, 0, 0)
-        context.restore()
-        resolve(canvas)
-      })
+      const canvas = document.createElement('canvas')
+      const context = canvas.getContext('2d')
+
+      if (!context) {
+        reject(new QiniuError(
+          QiniuErrorName.GetCanvasContextFailed,
+          'context is null'
+        ))
+        return
+      }
+
+      const { width, height } = img
+      canvas.height = height
+      canvas.width = width
+
+      this.clear(context, width, height)
+      context.drawImage(img, 0, 0)
+      resolve(canvas)
     })
   }
 

src/utils/compress.ts

@@ -337,79 +337,6 @@ export function getPutPolicy(token: string): PutPolicy {
 
 export function createObjectURL(file: File) {
   const URL = window.URL || window.webkitURL || window.mozURL
+  // FIXME:  需要 revokeObjectURL
   return URL.createObjectURL(file)
 }
-
-export interface TransformValue {
-  width: number
-  height: number
-  matrix: [number, number, number, number, number, number]
-}
-
-export function getTransform(image: HTMLImageElement, orientation: number): TransformValue {
-  const { width, height } = image
-
-  switch (orientation) {
-    case 1:
-      // default
-      return {
-        width,
-        height,
-        matrix: [1, 0, 0, 1, 0, 0]
-      }
-    case 2:
-      // horizontal flip
-      return {
-        width,
-        height,
-        matrix: [-1, 0, 0, 1, width, 0]
-      }
-    case 3:
-      // 180° rotated
-      return {
-        width,
-        height,
-        matrix: [-1, 0, 0, -1, width, height]
-      }
-    case 4:
-      // vertical flip
-      return {
-        width,
-        height,
-        matrix: [1, 0, 0, -1, 0, height]
-      }
-    case 5:
-      // vertical flip + -90° rotated
-      return {
-        width: height,
-        height: width,
-        matrix: [0, 1, 1, 0, 0, 0]
-      }
-    case 6:
-      // -90° rotated
-      return {
-        width: height,
-        height: width,
-        matrix: [0, 1, -1, 0, height, 0]
-      }
-    case 7:
-      // horizontal flip + -90° rotate
-      return {
-        width: height,
-        height: width,
-        matrix: [0, -1, -1, 0, height, width]
-      }
-    case 8:
-      // 90° rotated
-      return {
-        width: height,
-        height: width,
-        matrix: [0, -1, 1, 0, 0, width]
-      }
-    default:
-      throw new QiniuError(
-        QiniuErrorName.InvalidTransformOrientation,
-        `orientation ${orientation} is unavailable`
-      )
-  }
-}