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