Vue前端圖片壓縮，ios拍照上傳出現旋轉問題

ios拍照上傳問題，目前這個項目是由於ios拍照上傳圖片過大，故此前端須要在上傳的時候壓縮圖片

上傳圖片壓縮是參考博客園一位大佬的代碼

安裝  npm install exif-js --save

<template>
　　 <div>

　　　　<div v-for="(item,index) in ImgList">
　　　　　　<img src="../../../static/img/d.png" alt="" class="del" @click="del(index)" />
　　　　　　<img :src="$store.state.website.website_domain_name + '/uploads/' + item" alt="" />
　　　　</div>

　　　　

　　　　<form enctype="multipart/form-data" method="post" id="upload">
　　　　　　<img src="../../../static/img/jh.png" alt="" class="tp" />

　　　　　　<input v-if="type==1" type="file" name="upload" capture="camera" accept="image/*" @change="upload($event)" class="upload1" style="width: 100%; height: 100%; opacity: 0;position: absolute;top: 0;left: 0;">

　　　　</form>

　　</div>
</template>

export default { data () { return { ImgList:'',
　　 picValue:'' } }, 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 = 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(self.headerImage); }else { img.onload = function () { let data = self.compress(img,Orientation); self.headerImage = data; self.postImg(self.headerImage); } } } } }, postImg () {
　　　　//這裏寫接口

　　　　 var _this = this;
　　　　 let param = new FormData() // 建立form對象
　　　　 param.append('img', headerImage)
　　　　 let config = {
　　　　 　　headers: {
　　　　　　 　　'Content-Type': 'multipart/form-data'
　　　　 　　}
　　　 　}
　　　　 _this.$store.commit('loadingOFFON', true)
　　　　 _this.isshow = false
　　　　 _this.$http.post(_this.$store.state.url + '/index/uploadImgs', param, config).then(function(res) {
　　　　　　 if (!res) return
　　　　　　 _this.src = res.imgurl;
　　　　　　 _this.ImgList.push(res.imgurl)
　　　　 })

 }, 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>