<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; 
 //去獲取拍照時(shí)的信息，解決拍出來(lái)的照片旋轉(zhuǎn)問(wèn)題 
 Exif.getData(file, function(){ 
  Orientation = Exif.getTag(this, 'Orientation'); 
 }); 
 // 看支持不支持FileReader 
 if (!file || !window.FileReader) return; 
 if (/^image/.test(file.type)) { 
  // 創(chuàng)建一個(gè)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 () { 
 //這里寫(xiě)接口 
 }, 
 rotateImg (img, direction,canvas) { 
 //最小與最大旋轉(zhuǎn)方向，圖片旋轉(zhuǎn)4次后回到原方向 
 const min_step = 0; 
 const max_step = 3; 
 if (img == null)return; 
 //img的高度和寬度不能在img元素隱藏后獲取，否則會(huì)出錯(cuò) 
 let height = img.height; 
 let width = img.width; 
 let step = 2; 
 if (step == null) { 
  step = min_step; 
 } 
 if (direction == 'right') { 
  step++; 
  //旋轉(zhuǎn)到原位置，即超過(guò)最大值 
  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; 
 //如果圖片大于四百萬(wàn)像素，計(jì)算壓縮比并將大小壓至400萬(wàn)以下 
 let ratio; 
 if ((ratio = width * height / 4000000) > 1) { 
 console.log("大于400萬(wàn)像素") 
 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萬(wàn)則使用瓦片繪制 
 let count; 
 if ((count = width * height / 1000000) > 1) { 
 console.log("超過(guò)100W像素"); 
 count = ~~(Math.sqrt(count) + 1); //計(jì)算要分成多少塊瓦片 
 //  計(jì)算每塊瓦片的寬和高 
 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上傳圖片的時(shí)候 被旋轉(zhuǎn)的問(wèn)題 
 if(Orientation != "" && Orientation != 1){ 
 switch(Orientation){ 
  case 6://需要順時(shí)針（向左）90度旋轉(zhuǎn) 
  this.rotateImg(img,'left',canvas); 
  break; 
  case 8://需要逆時(shí)針（向右）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; 
 } 
 } 
 //進(jìn)行最小壓縮 
 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>