因為最近遇到個移動端上傳頭像的需求，上傳到后臺的數(shù)據(jù)是base64位，其中為了提高用戶體驗，把比較大的圖片用canvas進行壓縮之后再進行上傳。在移動端調(diào)用拍照功能時，會發(fā)生圖片旋轉(zhuǎn)，為了解決這個問題引入了exif去判斷拍照時的信息再去處理圖片，這是個很好的插件。關(guān)于exif.js可以去他的GitHub上了解，這邊直接 npm install exif-js --save 安裝，然后import一下就可以使用了。以下就是源碼，可以直接使用。
代碼如下：
<template> <div> <div style="padding:20px;"> <div class="show"> <div class="picture" :style="'backgroundImage:url('+headerImage+')'"></div> </div> <div style="margin-top:20px;"> <input type="file" id="upload" accept="image" @change="upload"> <label for="upload"></label> </div> </div> </div> </template> <script> import Exif from 'exif-js' export default { data () { return { headerImage:'', } }, mounted () { }, methods: { upload (e) { let files = e.target.files || e.dataTransfer.files; if (!files.length) return; this.picValue = files[0]; this.imgPreview(this.picValue); }, imgPreview (file) { let self = this; let Orientation; //去獲取拍照時的信息，解決拍出來的照片旋轉(zhuǎn)問題 Exif.getData(file, function(){ Orientation = Exif.getTag(this, 'Orientation'); }); // 看支持不支持FileReader if (!file || !window.FileReader) return; if (/^image/.test(file.type)) { // 創(chuàng)建一個reader let reader = new FileReader(); // 將圖片2將轉(zhuǎn)成 base64 格式 reader.readAsDataURL(file); // 讀取成功后的回調(diào) reader.onloadend = async function () { let result = this.result; let img = new Image(); img.src = result; //判斷圖片是否大于100K,是就直接上傳，反之壓縮圖片 if (this.result.length <= (100 * 1024)) { self.headerImage = this.result; self.postImg(); }else { img.onload = function () { let data = self.compress(img,Orientation); self.headerImage = data; self.postImg(); } } } } }, postImg () { //這里寫接口 }, rotateImg (img, direction,canvas) { //最小與最大旋轉(zhuǎn)方向，圖片旋轉(zhuǎn)4次后回到原方向 const min_step = 0; const max_step = 3; if (img == null)return; //img的高度和寬度不能在img元素隱藏后獲取，否則會出錯 let height = img.height; let width = img.width; let step = 2; if (step == null) { step = min_step; } if (direction == 'right') { step++; //旋轉(zhuǎn)到原位置，即超過最大值 step > max_step && (step = min_step); } else { step--; step < min_step && (step = max_step); } //旋轉(zhuǎn)角度以弧度值為參數(shù) let degree = step * 90 * Math.PI / 180; let ctx = canvas.getContext('2d'); switch (step) { case 0: canvas.width = width; canvas.height = height; ctx.drawImage(img, 0, 0); break; case 1: canvas.width = height; canvas.height = width; ctx.rotate(degree); ctx.drawImage(img, 0, -height); break; case 2: canvas.width = width; canvas.height = height; ctx.rotate(degree); ctx.drawImage(img, -width, -height); break; case 3: canvas.width = height; canvas.height = width; ctx.rotate(degree); ctx.drawImage(img, -width, 0); break; } }, compress(img,Orientation) { let canvas = document.createElement("canvas"); let ctx = canvas.getContext('2d'); //瓦片canvas let tCanvas = document.createElement("canvas"); let tctx = tCanvas.getContext("2d"); let initSize = img.src.length; let width = img.width; let height = img.height; //如果圖片大于四百萬像素，計算壓縮比并將大小壓至400萬以下 let ratio; if ((ratio = width * height / 4000000) > 1) { console.log("大于400萬像素") ratio = Math.sqrt(ratio); width /= ratio; height /= ratio; } else { ratio = 1; } canvas.width = width; canvas.height = height; // 鋪底色 ctx.fillStyle = "#fff"; ctx.fillRect(0, 0, canvas.width, canvas.height); //如果圖片像素大于100萬則使用瓦片繪制 let count; if ((count = width * height / 1000000) > 1) { console.log("超過100W像素"); count = ~~(Math.sqrt(count) + 1); //計算要分成多少塊瓦片 // 計算每塊瓦片的寬和高 let nw = ~~(width / count); let nh = ~~(height / count); tCanvas.width = nw; tCanvas.height = nh; for (let i = 0; i < count; i++) { for (let j = 0; j < count; j++) { tctx.drawImage(img, i * nw * ratio, j * nh * ratio, nw * ratio, nh * ratio, 0, 0, nw, nh); ctx.drawImage(tCanvas, i * nw, j * nh, nw, nh); } } } else { ctx.drawImage(img, 0, 0, width, height); } //修復(fù)ios上傳圖片的時候 被旋轉(zhuǎn)的問題 if(Orientation != "" && Orientation != 1){ switch(Orientation){ case 6://需要順時針（向左）90度旋轉(zhuǎn) this.rotateImg(img,'left',canvas); break; case 8://需要逆時針（向右）90度旋轉(zhuǎn) this.rotateImg(img,'right',canvas); break; case 3://需要180度旋轉(zhuǎn) this.rotateImg(img,'right',canvas);//轉(zhuǎn)兩次 this.rotateImg(img,'right',canvas); break; } } //進行最小壓縮 let ndata = canvas.toDataURL('image/jpeg', 0.1); console.log('壓縮前：' + initSize); console.log('壓縮后：' + ndata.length); console.log('壓縮率：' + ~~(100 * (initSize - ndata.length) / initSize) + "%"); tCanvas.width = tCanvas.height = canvas.width = canvas.height = 0; return ndata; }, } } </script> <style> *{ margin: 0; padding: 0; } .show { width: 100px; height: 100px; overflow: hidden; position: relative; border-radius: 50%; border: 1px solid #d5d5d5; } .picture { width: 100%; height: 100%; overflow: hidden; background-position: center center; background-repeat: no-repeat; background-size: cover; } </style>以上所述是小編給大家介紹的vue2實現(xiàn)移動端上傳、預(yù)覽、壓縮圖片解決拍照旋轉(zhuǎn)問題，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對512筆記網(wǎng)站的支持！
注：關(guān)于vue2實現(xiàn)移動端上傳、預(yù)覽、壓縮圖片解決拍照旋轉(zhuǎn)問題的內(nèi)容就先介紹到這里，更多相關(guān)文章的可以留意512筆記的其他信息。
