HTML5 和小程式實現拍照圖片旋轉、壓縮和上傳功能

原文網址：github.com/whinc/blog/…

最近接到一個發表評論的需求：使用者輸入評論並且可以拍照或從相簿選擇圖片上傳，即支援圖文評論。需要同時在H5 和小程式兩端實現，需求處理圖片的地方較多，本文對H5 端的圖片處理實務做一個小結。專案程式碼基於Vue 框架，為了避免受框架影響，我將程式碼全部改為原生API 的實作方式進行說明，同時專案程式碼中有很多其他額外的細節和功能（預覽、裁剪、上傳進度等）在這裡都省去，只介紹與圖片處理相關的關鍵思路和程式碼。小程式的實作方式與H5 類似，不再重述，在文末附上小程式端的實作程式碼。

使用<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>

URL.createObjectURL 方法可建立一個本機的URL 路徑指向本機資源對象，下方使用該介面建立所選圖片的位址並顯示。

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

透過相機拍攝的圖片，由於拍攝時手持相機的方向問題，導致拍攝的圖片可能存在旋轉，需要進行修正。修正旋轉需要知道圖片的旋轉訊息，這裡借助了一個叫exif-js 的庫，該庫可以讀取圖片的EXIF 元數據，其中包括拍攝時相機的方向，根據這個方向可以推算出圖片的旋轉信息。

以下是EXIF 旋轉標誌位，總共有8 種，但透過相機拍攝時只能產生1、3、6、8 四種，分別對應相機正常、順時針旋轉180°、逆時針旋轉90°、順時針旋轉90°時所拍攝的照片。

所以修正圖片旋轉角度，只要讀取圖片的EXIF 旋轉標誌位，判斷旋轉角度，在畫布上對圖片進行旋轉後，重新匯出新的圖片即可。其中關於畫布的旋轉操作可以參考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，直接上傳原圖，速度慢容易上傳失敗，而且後台對請求體的大小也有限制，後續載入圖片展示也會比較慢。如果前端對圖片進行壓縮後上傳，可以解決這些問題。

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

 /** * 壓縮圖片* @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.alentWidth * window.devicePixelHeightio. = 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, MIME 類型/ idth, imageHeight); // 匯出新圖片/ dx, 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 上傳圖片這個場景下的一些圖片處理實踐，以後遇到類似的需求可作為部分參考。

附小程式實作參考

 // 拍照wx.chooseImage({ sourceType: [camera], success: ({ tempFiles }) => { const file = tempFiles[0] // 處理圖片}});/** * 壓縮圖片* @param {Object } params * filePath: String 輸入的圖片路徑* success: Function 壓縮成功時回調，並返回壓縮後的新圖片路徑* fail: Function壓縮失敗時回呼*/compressImage({ filePath, success, fail }) { // 取得圖片寬高wx.getImageInfo({ src: filePath, success: ({ width, height }) => { const systemInfo = wx.getSystemInfoSync (); const canvasWidth = systemInfo.screenWidth; const canvasHeight = systemInfo.screenHeight; // 更新畫布尺寸this.setData({ canvasWidth, canvasHeight }) // 計算縮放比例const scaleX = canvasWidth / width; const scaleY = canvasHeight / height; const scale = Math.min(scaleY = scaleX / height; const scale = Math.min(scaleX); const imageWidth = width * scale; const imageHeight = height * scale; // 將縮放後的圖片繪製到畫布const ctx = wx.createCanvasContext(hidden-canvas); let dx = (canvasWidth - imageWidth) / 2; let dy = (canvasHeight - imageWidth) / 2; let dy = (canvasHeight - 2; ctx.drawImage(filePath, dx, dy, imageWidth, imageHeight); ctx.draw(false, () => { // 匯出壓縮後的圖片到臨時檔案wx.canvasToTempFilePath({ canvasId: hidden-canvas, width: canvasWidth, height: canvasHeight, destWid: canvas, destWidth, height: canvasHeight, destWid: canvas, destWidth, : canvasHeight, fileType: jpg, quality: 0.92, success: ({ tempFilePath }) => { // 隱藏畫布this.setData({ canvasWidth: 0, canvasHeight: 0 }) // 壓縮完成success({ tempFilePath }); }, fail: error => { // 隱藏畫布this.setData({ canvasWidth: 0, canvasHeight: 0 }) fail(error); } }); }); }, fail: error => { fail(error); } });}/** * 上傳檔案*/uploadFile({ uploadUrl, filePath, onData, onError }) { wx.uploadFile({ url: uploadUrl filePath: filePath, name: file, header: { Cookie: cookie }, success: res => { if (res.statusCode === 200) { onData(res.data) } else { onError(res); } }, fail: error => { onError(error); } });}

以上所述是小編給大家介紹的HTML5 和小程式實現拍照圖片旋轉、壓縮和上傳功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回覆大家的。在此也非常感謝大家對VeVb武林網站的支持！