vue2實現(xiàn)移動端上傳、預覽、壓縮圖片解決拍照旋轉(zhuǎn)問題

163九九 2019-04-08

展開全文

因為最近遇到個移動端上傳頭像的需求，上傳到后臺的數(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); 
 } 
 //修復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)移動端上傳、預覽、壓縮圖片解決拍照旋轉(zhuǎn)問題，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對512筆記網(wǎng)站的支持！

注：關(guān)于vue2實現(xiàn)移動端上傳、預覽、壓縮圖片解決拍照旋轉(zhuǎn)問題的內(nèi)容就先介紹到這里，更多相關(guān)文章的可以留意512筆記的其他信息。