vue 2 모 바 일 업로드,미리 보기,압축 이미지 구현 사진 회전 문제 해결

최근 모 바 일 에서 프로필 사진 을 올 리 는 수요 가 생 겨 배경 에 올 린 데 이 터 는 base 64 비트 이 며,이 중 사용자 체험 을 향상 시 키 기 위해 비교적 큰 그림 을 canvas 로 압축 한 후 업로드 합 니 다.모 바 일 에서 사진 촬영 기능 을 호출 할 때 그림 회전 이 발생 합 니 다.이 문 제 를 해결 하기 위해 exif 를 도입 하여 사진 을 찍 을 때의 정 보 를 판단 하고 그림 을 처리 하 는 것 이 좋 은 플러그 인 입 니 다.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; 
 //         ，             
 Exif.getData(file, function(){ 
  Orientation = Exif.getTag(this, 'Orientation'); 
 }); 
 //       FileReader 
 if (!file || !window.FileReader) return; 
 if (/^image/.test(file.type)) { 
  //     reader 
  let reader = new FileReader(); 
  //    2    base64    
  reader.readAsDataURL(file); 
  //          
  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) { 
 //         ，    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++; 
  //      ，       
  step > max_step && (step = min_step); 
 } else { 
  step--; 
  step < min_step && (step = max_step); 
 } 
 //            
 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               
 if(Orientation != "" && Orientation != 1){ 
 switch(Orientation){ 
  case 6://     （  ）90    
  this.rotateImg(img,'left',canvas); 
  break; 
  case 8://     （  ）90    
  this.rotateImg(img,'right',canvas); 
  break; 
  case 3://  180    
  this.rotateImg(img,'right',canvas);//    
  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>

위 에서 말 한 것 은 편집장 이 소개 한 vue 2 가 모 바 일 업로드,미리 보기,압축 사진 을 실현 하여 사진 회전 문 제 를 해결 하 는 데 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.편집장 은 신속하게 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!