H5拍照、選擇圖片上傳組件核心

背景

前段時間項目重構，改爲SSR的項目，但以前用的圖片選擇上傳組件不支持SSR（server-side-render）。遂進行了調研，發現不少的工具。但有的太大，有的使用麻煩，有的不知足使用需求。決定本身寫一個h5移動端圖片上傳組件。圖片上傳是一個比較廣泛的需求，PC端還好，移動端就不是特別好作了。下面將過程當中一些重點的問題進行簡單的記錄。

重點

1.關於input

---

• 選擇功能使用<input>標籤實現。屬性accept='image/*'，：capture表示，能夠捕獲到系統默認的設備，好比：camera--照相機；camcorder--攝像機；microphone--錄音。若是設置了capture="camera"，那麼默認使用相機，存在部分機型沒法調用相機的問題，咱們這裏不設置。容許多選multiple，加上onchange事件的回調函數。最終input大概長這個樣子：

  <input type='file'
      className={classes.picker}
      accept='image/*'
      multiple
      capture="camera"
      onChange={this.onfileChange} />

  固然，這個input很醜，咱們能夠經過設置`opacity:0`,經過定位將咱們須要的選擇按鈕樣式覆蓋上去。讓它更加迷人一些。

2.關於選擇預覽功能

---

• 選擇圖片後能預覽是一個常見的功能，這裏拋開樣式，只說代碼實現。在onchange的回調函數中，咱們能經過e.target.files拿到所選擇的文件，可是文件是沒法展現在頁面上的，一般的作法是使用reader.readAsDataURL(file)轉爲base64而後展現在頁面上。我這邊採用九宮格展現，每一個圖片是一個canvas。考慮到不一樣圖片寬高比的問題，我先經過reader.readAsDataURL(file)拿到base64文件。而後建立一個經過九宮格的canvas寬高比繪製圖像，使圖片內容在不失真的狀況下鋪滿整個canvas。

  fileToCanvas (file, index) {//文件
          let reader = new FileReader();
          reader.readAsDataURL(file);
          reader.onload = (event) => {
              let image = new Image();
              image.src = event.target.result;
              image.onload = () => {
                  let imageCanvas = this['canvas' + index].getContext('2d');
                  let canvas = { width: imageCanvas.canvas.scrollWidth * 2, height: imageCanvas.canvas.scrollHeight * 2 };
                  let ratio = image.width / image.height;
                  let canvasRatio = canvas.width / canvas.height;
                  let xStart = 0; let yStart = 0; let renderableWidth; let renderableHeight;
                  if (ratio > canvasRatio) { 
                  // 橫向過大，以高爲準，縮放寬度
                      let hRatio = image.height / canvas.height;
                      renderableHeight = image.height;
                      renderableWidth = canvas.width * hRatio;
                      xStart = (image.width - renderableWidth) / 2;
                  }
                  if (ratio < canvasRatio) { 
                  // 橫向太小，以寬爲準，縮放高度
                      let wRatio = image.width / canvas.width;
                      renderableWidth = image.width;
                      renderableHeight = canvas.height * wRatio;
                      yStart = (image.height - renderableHeight) / 2;
                  }
                  imageCanvas.drawImage(image, xStart, yStart, renderableWidth, renderableHeight, 0, 0, canvas.width * 2, canvas.height);
              };
          };
      }

3.文件上傳的擴展名獲取

---

• 部分機型拍照時文件經過onchange事件拿到的文件是blob（小米6等）此時經過blob.type手動判斷擴展名。

4.ios拍照方向獲取

---

• 當ios拍照上傳後發現文件被旋轉了，本地文件確是正常的，這個問題的緣由這裏不做詳細解釋。有興趣的能夠搜一下。因此咱們須要檢測orientation，並將圖像旋轉回正常方向。獲取orientation有現成的不少庫如Exif.js。可是這個庫有些大，爲了這個小需求引入彷佛不太值得。stackoverflow上有不少現成的獲取圖片方向的代碼。
  稍微改了下：

  getOrientation (file) {
          return new Promise((resolve, reject) => {
              let reader = new FileReader();
              reader.onload = function (e) {
              //e.target.result爲base64編碼的文件
                  let view = new DataView(e.target.result);
                  if (view.getUint16(0, false) !== 0xffd8) {
                      return resolve(-2);
                  }
                  let length = view.byteLength;
                  let offset = 2;
                  while (offset < length) {
                      let marker = view.getUint16(offset, false);
                      offset += 2;
                      if (marker === 0xffe1) {
                          let tmp = view.getUint32(offset += 2, false);
                          if (tmp !== 0x45786966) {
                              return resolve(-1);
                          }
                          let little = view.getUint16(offset += 6, false) === 0x4949;
                          offset += view.getUint32(offset + 4, little);
                          let tags = view.getUint16(offset, little);
                          offset += 2;
                          for (let i = 0; i < tags; i++) {
                              if (view.getUint16(offset + i * 12, little) === 0x0112) {
                                  return resolve(view.getUint16(offset + i * 12 + 8, little));
                              }
                          }
                      } else if ((marker & 0xff00) !== 0xff00) {
                          break;
                      } else {
                          offset += view.getUint16(offset, false);
                      }
                  }
                  return resolve(-1);
              };
  
              reader.readAsArrayBuffer(file.slice(0, 64 * 1024));
          });
      }

  //返回值：1--正常，-2--非jpg，-1--undefined

5.ios照片方向修正

---

正常的圖像orientation應該是1，因而咱們將file轉爲canvas，使用canvas的transform方法對canvas進行變換, 參考。最後經過canvas.toDataURL('')拿到base64編碼的方向正常的base64圖片，再將base64轉爲blob進行上傳;

//重置文件orientation
resetOrientationToBlob (file, orientation) {
    return new Promise((resolve, reject) => {
        let reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = (event) => {
            let image = new Image();
            image.src = event.target.result;
            image.onload = () => {
                let width = image.width;
                let height = image.height;
                let canvas = document.createElement('canvas');
                let ctx = canvas.getContext('2d');
                if (orientation > 4 && orientation < 9) {
                    canvas.width = height;
                    canvas.height = width;
                } else {
                    canvas.width = width;
                    canvas.height = height;
                }

                switch (orientation) {
                case 2:
                    ctx.transform(-1, 0, 0, 1, width, 0);
                    break;
                case 3:
                    ctx.transform(-1, 0, 0, -1, width, height);
                    break;
                case 4:
                    ctx.transform(1, 0, 0, -1, 0, height);
                    break;
                case 5:
                    ctx.transform(0, 1, 1, 0, 0, 0);
                    break;
                case 6:
                    ctx.transform(0, 1, -1, 0, height, 0);
                    break;
                case 7:
                    ctx.transform(0, -1, -1, 0, height, width);
                    break;
                case 8:
                    ctx.transform(0, -1, 1, 0, 0, width);
                    break;
                default:
                    ctx.transform(1, 0, 0, 1, 0, 0);
                }

                ctx.drawImage(image, 0, 0, width, height);
                let base64 = canvas.toDataURL('image/png');
                let blob = this.dataURLtoBlob(base64);
                resolve(blob);
            };
        };
    });

}

最後

• 圖片上傳，這部分應該比較easy。經過FormData的形式將文件上傳便可。以上代碼僅是部分功能的僞代碼，不是全部功能的最終實現。
• 能折騰就折騰一下，最後你會發現，學到了不少東西，但仍是別人的輪子好用2333。