以移動端為例，在H5上傳圖片時，由于機型 / 網速 / 流量等限制，在低版本機型上經常會出現上傳的圖片太大導致上傳很慢甚至崩潰的情況，所以需要對在某些情況下需要對上傳的圖片進行壓縮上傳。

以下以移動端使用Vue框架為例：

（以下主要實現思路來自張鑫旭大神的博客：?https://www.zhangxinxu.com/wordpress/2017/07/html5-canvas-image-compress-upload/）

?

話不多說進入正題

第一步：使用原生input上傳圖片

<input type="file" class="file-btn" @change="changeImg($event)" />

上面這句代碼中可以發現，我沒有指定上傳的文件的格式，因為在之前的開發過程中發現，input在設置了accpet=“image/*”之后，在某些低版本安卓機（微信瀏覽器）上，會出現上傳jpeg格式的圖片無法觸發input的change的事件的情況，所以后來就把input的圖片類型去掉了，驗證文件類型在change事件觸發后處理或者交由后端校驗。

?

第二步：將圖片利用canvas的drawImage進行按比例重繪

在接收到需要上傳的圖片之后，我們可以做一些限制操作，比如限制上傳圖片的大小 / 校驗文件的格式等等，這里就不寫出來了。直接切入正題：

changeImg(e){const imgFile = e.target.files[0];const zipImgPromise = (imgFile) => {return new Promise((resolve, reject) => {let reader = new FileReader(); // 定義一個fileReaderreader.readAsDataURL(imgFile); // 將圖片轉換成base64后可以得到圖片的寬高let img = new Image();reader.onload = () => {img.src = reader.result;}img.onload = () => {// 圖片原始尺寸let originWidth = img.width;let originHeight = img.height;let canvas = document.createElement('canvas');let context = canvas.getContext('2d');// 最大尺寸限制let maxWidth = 800, maxHeight = 800;// 目標尺寸let targetWidth = originWidth, targetHeight = originHeight;// 圖片尺寸超過400x400的限制if (originWidth > maxWidth || originHeight > maxHeight) {if (originWidth / originHeight > maxWidth / maxHeight) {// 更寬，按照寬度限定尺寸targetWidth = maxWidth;targetHeight = Math.round(maxWidth * (originHeight / originWidth));} else {targetHeight = maxHeight;targetWidth = Math.round(maxHeight * (originWidth / originHeight));}}// canvas對圖片進行縮放canvas.width = targetWidth;canvas.height = targetHeight;// 清除畫布context.clearRect(0, 0, targetWidth, targetHeight);// 圖片壓縮context.drawImage(img, 0, 0, targetWidth, targetHeight);// canvas轉換成dataUrllet dataUrl = canvas.toDataURL('image/png');// 轉換成formdata格式用于上傳圖片let blob = this.dataURItoBlob(dataUrl);if (blob) {resolve(blob);} else {reject(new Error('Error！！'));}}});};zipImgPromise(imgFile).then(blob => {let file = new FormData(); // 創建form對象file.append('file', blob, imgFile.name); // 通過append向form對象添加數據file.append('chunk', '0'); // 添加form表單中其他數據let config = {headers: {'Content-Type': 'multipart/form-data'}};// 開始上傳圖片// ...// 這里用于執行上傳圖片的XHR操作// ...$http.post(‘api’, file, config).then(res => {// ...}).catch(error => {// ...});}).catch(error => {// 處理zipImgPromise和前一個回調函數運行時發生的錯誤console.log('發生錯誤', error);});? }, dataURItoBlob(dataURI) {let byteString = atob(dataURI.split(',')[1]);let mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]let ab = new ArrayBuffer(byteString.length);let ia = new Uint8Array(ab);for (let i = 0; i < byteString.length; i++) {ia[i] = byteString.charCodeAt(i);}let bb = new Blob([ab], { "type": mimeString });return bb; }

主要思路

其上傳主要思路其實就是按比例縮放圖片，主要運用了canvas的drawImage()方法。

canvas的drawImage()方法API如下：

context.drawImage(img, dx, dy); context.drawImage(img, dx, dy, dWidth, dHeight); context.drawImage(img, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

dx, dy, dWidth, dHeight——表示在canvas畫布上規劃處一片區域用來放置圖片，dx, dy為canvas元素的左上角坐標，dWidth, dHeight指canvas元素上用在顯示圖片的區域大小。如果沒有指定sx,sy,sWidth,sHeight這4個參數，則圖片會被拉伸或縮放在這片區域內。

所以我們這里簡單來說是通過的將一張原始尺寸是2000*1300的圖片，通過剛剛說的canvas的drawImage()方法，把尺寸限制為400*300大小，很簡單，主要代碼就是下面這4句

let canvas = document.createElement('canvas'); let context = canvas.getContext('2d'); canvas.width = 400; canvas.height = 300; // 核心JS context.drawImage(img,0,0,400,300);

這里通俗來說就是把一張大的圖片，直接畫在一張小的畫布上，這樣大圖片就變成了小圖片，壓縮圖片就是這樣實現的。（聽起來有點amazing~）

所以經過了圖片→canvas壓縮→圖片的這三個步驟，我們的壓縮圖片就完成啦～～

總結

以上是生活随笔為你收集整理的前端实现图片压缩上传功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。