H5 拍照圖片旋轉、壓縮和上傳

原文地址：github.com/whinc/blog/…javascript

最近接到一個「發表評論」的需求：用戶輸入評論而且能夠拍照或從相冊選擇圖片上傳，即支持圖文評論。須要同時在 H5 和小程序兩端實現，該需求處理圖片的地方較多，本文對 H5 端的圖片處理實踐作一個小結。項目代碼基於 Vue 框架，爲了不受框架影響，我將代碼所有改成原生 API 的實現方式進行說明，同時項目代碼中有不少其餘額外的細節和功能（預覽、裁剪、上傳進度等）在這裏都省去，只介紹與圖片處理相關的關鍵思路和代碼。小程序的實現方式與 H5 相似，再也不重述，在文末附上小程序端的實現代碼。html

拍照

使用<input>標籤，type設爲"file"選擇文件，accept設爲"image/*"選擇文件爲圖片類型和相機拍攝，設置multiple支持多選。監聽change事件拿到選中的文件列表，每一個文件都是一個Blob類型。前端

<input type="file" accept="image/*" multiple />  
  <img class="preivew" />
  <script type="text/javascript">
    function onFileChange (event) { const files = Array.prototype.slice.call(event.target.files) files.forEach(file => console.log('file name:', file.name)) } document.querySelector('input').addEventListener('change', onFileChange) </script>

注意：若是連續選擇相同文件，第二次選文件不會觸發change事件，由於value值未發生變化，而<input>的change事件僅在value變化時觸發。解決辦法：在 change 事件處理方法中完成對文件的處理後重置value爲默認值""，一旦 value 的值被重置，files的值也會同時被自動重置。java

圖片預覽

URL.createObjectURL方法可建立一個本地的 URL 路徑指向本地資源對象，下面使用該接口建立所選圖片的地址並展現。git

function onFileChange (event) { const files = Array.prototype.slice.call(event.target.files) const file = files[0] document.querySelector('img').src = window.URL.createObjectURL(file) }

圖片旋轉

經過相機拍攝的圖片，因爲拍攝時手持相機的方向問題，致使拍攝的圖片可能存在旋轉，須要進行糾正。糾正旋轉須要知道圖片的旋轉信息，這裏藉助了一個叫 exif-js 的庫，該庫能夠讀取圖片的 EXIF 元數據，其中包括拍攝時相機的方向，根據這個方向能夠推算出圖片的旋轉信息。github

下面是 EXIF 旋轉標誌位，總共有 8 種，可是經過相機拍攝時只能產生一、三、六、8 四種，分別對應相機正常、順時針旋轉180°、逆時針旋轉90°、順時針旋轉90°時所拍攝的照片。ajax

因此糾正圖片旋轉角度，只要讀取圖片的 EXIF 旋轉標誌位，判斷旋轉角度，在畫布上對圖片進行旋轉後，從新導出新的圖片便可。其中關於畫布的旋轉操做能夠參考canvas 圖像旋轉與翻轉姿式解鎖這篇文章。下面函數實現了對圖片文件進行旋轉角度糾正，接收一個圖片文件，返回糾正後的新圖片文件。canvas

/** * 修正圖片旋轉角度問題 * @param {file} 原圖片 * @return {Promise} resolved promise 返回糾正後的新圖片 */
function fixImageOrientation (file) { return new Promise((resolve, reject) => { // 獲取圖片
    const img = new Image(); img.src = window.URL.createObjectURL(file); img.onerror = () => resolve(file); img.onload = () => { // 獲取圖片元數據（EXIF 變量是引入的 exif-js 庫暴露的全局變量）
      EXIF.getData(img, function() { // 獲取圖片旋轉標誌位
        var orientation = EXIF.getTag(this, "Orientation"); // 根據旋轉角度，在畫布上對圖片進行旋轉
        if (orientation === 3 || orientation === 6 || orientation === 8) { const canvas = document.createElement("canvas"); const ctx = canvas.getContext("2d"); switch (orientation) { case 3: // 旋轉180°
              canvas.width = img.width; canvas.height = img.height; ctx.rotate((180 * Math.PI) / 180); ctx.drawImage(img, -img.width, -img.height, img.width, img.height); break; case 6: // 旋轉90°
              canvas.width = img.height; canvas.height = img.width; ctx.rotate((90 * Math.PI) / 180); ctx.drawImage(img, 0, -img.height, img.width, img.height); break; case 8: // 旋轉-90°
              canvas.width = img.height; canvas.height = img.width; ctx.rotate((-90 * Math.PI) / 180); ctx.drawImage(img, -img.width, 0, img.width, img.height); break; } // 返回新圖片
          canvas.toBlob(file => resolve(file), 'image/jpeg', 0.92) } else { return resolve(file); } }); }; }); }

圖片壓縮

如今的手機拍照效果愈來愈好，隨之而來的是圖片大小的上升，動不動就幾MB甚至十幾MB，直接上傳原圖，速度慢容易上傳失敗，並且後臺對請求體的大小也有限制，後續加載圖片展現也會比較慢。若是前端對圖片進行壓縮後上傳，能夠解決這些問題。小程序

下面函數實現了對圖片的壓縮，原理是在畫布上繪製縮放後的圖片，最終從畫布導出壓縮後的圖片。方法中有兩處能夠對圖片進行壓縮控制：一處是控制圖片的縮放比；另外一處是控制導出圖片的質量。promise

/** * 壓縮圖片 * @param {file} 輸入圖片 * @returns {Promise} resolved promise 返回壓縮後的新圖片 */
function compressImage(file) { return new Promise((resolve, reject) => { // 獲取圖片（加載圖片是爲了獲取圖片的寬高）
    const img = new Image(); img.src = window.URL.createObjectURL(file); img.onerror = error => reject(error); img.onload = () => { // 畫布寬高
      const canvasWidth = document.documentElement.clientWidth * window.devicePixelRatio; const canvasHeight = document.documentElement.clientHeight * window.devicePixelRatio; // 計算縮放因子
      // 這裏我取水平和垂直方向縮放因子較大的做爲縮放因子，這樣能夠保證圖片內容所有可見
      const scaleX = canvasWidth / img.width; const scaleY = canvasHeight / img.height; const scale = Math.min(scaleX, scaleY); // 將原始圖片按縮放因子縮放後，繪製到畫布上
      const canvas = document.createElement('canvas'); const ctx = canvas.getContext("2d"); canvas.width = canvasWidth; canvas.height = canvasHeight; const imageWidth = img.width * scale; const imageHeight = img.height * scale; const dx = (canvasWidth - imageWidth) / 2; const dy = (canvasHeight - imageHeight) / 2; ctx.drawImage(img, dx, dy, imageWidth, imageHeight); // 導出新圖片
      // 指定圖片 MIME 類型爲 'image/jpeg', 經過 quality 控制導出的圖片質量，進行實現圖片的壓縮
      const quality = 0.92 canvas.toBlob(file => resolve(tempFile), "image/jpeg", quality); }; }); },

圖片上傳

經過FormData建立表單數據，發起 ajax POST請求便可，下面函數實現了上傳文件。

注意：發送FormData數據時，瀏覽器會自動設置Content-Type爲合適的值，無需再設置Content-Type，不然反而會報錯，由於 HTTP 請求體分隔符 boundary 是瀏覽器生成的，沒法手動設置。

/** * 上傳文件 * @param {File} file 待上傳文件 * @returns {Promise} 上傳成功返回 resolved promise，不然返回 rejected promise */
function uploadFile (file) { return new Promise((resolve, reject) => { // 準備表單數據
    const formData = new FormData() formData.append('file', file) // 提交請求
    const xhr = new XMLHttpRequest() xhr.open('POST', uploadUrl) xhr.onreadystatechange = function () { if (this.readyState === XMLHttpRequest.DONE && this.status === 200) { resolve(JSON.parse(this.responseText)) } else { reject(this.responseText) } } xhr.send(formData) }) }

小結

有了上面這些輔助函數，處理起來就簡單多了，最終調用代碼以下：

function onFileChange (event) { const files = Array.prototype.slice.call(event.target.files) const file = files[0] // 修正圖片旋轉
  fixImageOrientation(file).then(file2 => { // 建立預覽圖片
    document.querySelector('img').src = window.URL.createObjectURL(file2) // 壓縮
    return compressImage(file2) }).then(file3 => { // 更新預覽圖片
    document.querySelector('img').src = window.URL.createObjectURL(file3) // 上傳
    return uploadFile(file3) }).then(data => { console.log('上傳成功') }).catch(error => { console.error('上傳失敗') }) }

H5 提供了處理文件的接口，藉助畫布能夠在瀏覽器中實現複雜的圖片處理，本文總結了移動端 H5 上傳圖片這個場景下的一些圖片處理實踐，之後遇到相似的需求可做爲部分參考。