blog

vue + base64圧縮と回転

htmlコード jsコード cssコード...

Nov 29, 2020 · 3 min. read

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

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>
Read next

Javaのいくつかの参照型

jvmの理解は、オブジェクトが参照との関係を持って生きているかどうかを判断するために、知っている 、参照記述のJDK1.2は非常に狭い値に格納されているデータの参照型は、アドレスの先頭にあるメモリの別の部分を表す場合、それは参照に代わってメモリのこの作品は、JDK1.2 Jの後、JDK1.2と言われています。

Nov 26, 2020 · 3 min read