vue + base64圧縮と回転

はじめに：携帯電話の写真とイメージのアップロードを選択し、イメージが大きすぎると携帯電話のカメラの角度は、写真の角度やその他の問題につながる解決するために

html

<template>
	<div class="twoPic_fdfs">
 	<img v-if='this.PassportImg' :src="this.PassportImg" />
 	<input @change="uploadPhoto($event)" class="change-photo-btn" type='file' accept="image/*" id="passport" />
 </div>
</template>

js

<script>
import {EXIF} from 'exif-js' //イメージ情報を取得する
export default {
 data() {
 return {
 Orientation:null,
 PassportImg:'',
 }
 },
 methods:{
 getImgSize(str) {
 //base64でイメージサイズを取得し、KB数を返す
 var str = str.replace('data:image/jpeg;base64,', '');//それぞれのアップロードイメージ形式に応じて、以下のように修正する。
 
 var strLength = str.length;
 var fileLength = parseInt(strLength - (strLength / 8) * 2);
 // バイトからKBに変換する
 var size = "";
 size = (fileLength / 1024).toFixed(2);
 return parseInt(size);
 },
 //  
 uploadPhoto(e) {
 const global = this;
 let id =e.target.id;
 // fileReaderオブジェクトを使ってファイルを取得する
 var file = e.target.files[0];
 // var URL = URL || webkitURL;
 //写真の向き角度プロパティ、ユーザー回転制御を取得する
 EXIF.getData(file, function() {
 EXIF.getAllTags(this); 
 global.Orientation = EXIF.getTag(this, 'Orientation');
 //return;
 });
 
 var reader = new FileReader();
 reader.readAsDataURL(file);
 reader.onload = e => {
 // alert("圧縮前："+global.getImgSize(e.target.result))
 global.dealImage(e.target.result, 800, (result)=>{
 // alert("圧縮:"+global.getImgSize(result))
 this.PassportImg = result
 
 },this) 
 // イメージのBase64データエンコーディングを読み込み、このエンコーディング文字列をバックエンドに渡す。
 };
 },
 //圧縮方法
 dealImage(base64, w, callback,img) {
 const global = this;
 var newImage = new Image()
 //圧縮率0～1
 var quality = 0.8
 newImage.src = base64
 newImage.setAttribute('crossOrigin', 'Anonymous') //url外部ドメインに必要
 var imgWidth, imgHeight
 newImage.onload = function () {
 imgWidth = this.width
 imgHeight = this.height
 var canvas = document.createElement('canvas')
 var ctx = canvas.getContext('2d')
 canvas.width = imgWidth;
 canvas.height = imgHeight;
 // ========イメージの回転==========
 if(global.Orientation && global.Orientation != 1){
 // alert('回転処理,Orientation:'+global.Orientation);
 switch(global.Orientation){
 case 6://時計回りに90度回転させる
 // alert('時計回りに90度回転させる必要がある');
 canvas.width = imgHeight;
 canvas.height = imgWidth;
 ctx.rotate(Math.PI / 2);
 ctx.drawImage(this, 0, -imgHeight, imgWidth, imgHeight);
 break;
 case 8://反時計回りに90度回転させる必要がある
 // alert('時計回りに90度回転させる必要がある');
 canvas.width = imgHeight;
 canvas.height = imgWidth;
 ctx.rotate(3 * Math.PI / 2);
 ctx.drawImage(this, -imgWidth, 0, imgWidth, imgHeight);
 
 break;
 case 3://180度回転が必要
 // alert('180度回転が必要');
 ctx.rotate(Math.PI);
 ctx.drawImage(this, -imgWidth, -imgHeight, imgWidth, imgHeight);
 break;
 default:
 break; 
 } 
 }else{
 ctx.drawImage(this, 0, 0, canvas.width, canvas.height)
 }
 // ========イメージの回転===========
 
 var ba = canvas.toDataURL('image/jpeg', quality) //圧縮ステートメント
 // あなたがそのような間の50から150キロバイトの要件として、あなたが望むサイズに圧縮されたイメージを確保したい場合は、次の文を追加してください、品質の初期値は、自己定義の場合に応じて
 // while (base64.length / 1024 < 150) {
 // quality -= 0.01;
 // base64 = canvas.toDataURL("image/jpeg", quality);
 // }
 // 最後の圧縮が最小サイズを下回らないようにする。QUALITYの減少が妥当であれば、考える必要はない。
 // while (base64.length / 1024 > 50) {
 // quality += 0.001;
 // base64 = canvas.toDataURL("image/jpeg", quality);
 // }
 callback(ba) //コールバック関数を通して返さなければならない。
 }
 }
 }
}
</script>

css

<style lang="less">
.twoPic_fdfs{
 font-size: .3rem;
 width: 3rem;
 margin: 20px auto;
 img{
 width: 100%;
 }
}
</style>