工作用到了，就在這里記錄一下
<template>
??<div>
????<h2?class="title-detail">圖片描述</h2>
????<input?type="hidden"?id="picIndex"?value="0"?/>
????<div?id="image-list"?class="row?image-list">
??????<!--?<input?id="upload_image"?type="file"?name="image"?accept="image/*"?/>?-->
????</div>拍照：
????<input?type="file"?id="upload"?accept="image/jpg"?@change="upload"?/>
????<ul>
??????<li?v-for="(item,index)?in?imgList"?:key="index">
????????<img
??????????:src="item"
??????????alt
??????????style="width:100px;height:100px;border:1px?solid?#ccc;display:?inline-block;"
????????/>
????????<div?class="delimg?el-icon-circle-close"?@click="delimg(index)"></div>
??????</li>
????</ul>
????<img?src="./../../assets/timg.png"?id="my-img"?/>
??</div>
</template>
<script>
import?$?from?"jquery";
import?Exif?from?"exif-js";
import?{?stringify?}?from?"querystring";
export?default?{
??data()?{
????return?{
??????headerImage:?"",
??????picValue:?"",
??????imgList:?[]
????};
??},
??created()?{},
??mounted()?{
????$(document).ready(function()?{
??????$("#my-img").click(function()?{
????????$("#upload").click();
??????});
????});
??},
??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;
??????//去獲取拍照時的信息，解決拍出來的照片旋轉(zhuǎn)問題
??????Exif.getData(file,?function()?{
????????Orientation?=?Exif.getTag(this,?"Orientation");
??????});
??????//?看支持不支持FileReader
??????if?(!file?||?!window.FileReader)?return;
??????if?(/^image/.test(file.type))?{
????????//?創(chuàng)建一個reader
????????let?reader?=?new?FileReader();
????????//?將圖片2將轉(zhuǎn)成?base64?格式
????????reader.readAsDataURL(file);
????????//?讀取成功后的回調(diào)
????????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();
??????????//?}else?{
??????????img.onload?=?function()?{
????????????let?data?=?self.compress(img,?Orientation);
????????????self.headerImage?=?data;
????????????if?(self.imgList.length?<?9)?{
??????????????self.imgList.push(self.headerImage);
??????????????console.log(self.imgList,?"list");
????????????}?else?{
??????????????alert("上傳照片不得大于9張");
????????????}
????????????self.postImg(self.picValue);
??????????};
??????????//?}
????????};
??????}
????},
????postImg(file)?{
??????//?這里寫接口
??????console.log(file,'file');
??????this.$apiFetch.update('web.oss.upload',{?file:file}).then((data)?=>?{
????????console.log(data,'adta')
??????}).catch((err)?=>?{
????????console.log(err)
??????})
????},
????rotateImg(img,?direction,?canvas)?{
??????//最小與最大旋轉(zhuǎn)方向，圖片旋轉(zhuǎn)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++;
????????//旋轉(zhuǎn)到原位置，即超過最大值
????????step?>?max_step?&&?(step?=?min_step);
??????}?else?{
????????step--;
????????step?<?min_step?&&?(step?=?max_step);
??????}
??????//旋轉(zhuǎn)角度以弧度值為參數(shù)
??????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);
??????}
??????//修復(fù)ios上傳圖片的時候?被旋轉(zhuǎn)的問題
??????if?(Orientation?!=?""?&&?Orientation?!=?1)?{
????????switch?(Orientation)?{
??????????case?6:?//需要順時針（向左）90度旋轉(zhuǎn)
????????????this.rotateImg(img,?"left",?canvas);
????????????break;
??????????case?8:?//需要逆時針（向右）90度旋轉(zhuǎn)
????????????this.rotateImg(img,?"right",?canvas);
????????????break;
??????????case?3:?//需要180度旋轉(zhuǎn)
????????????this.rotateImg(img,?"right",?canvas);?//轉(zhuǎn)兩次
????????????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;
????},
????delimg(index)?{
??????for?(let?i?=?0;?i?<?this.imgList.length;?i++)?{
????????if?(i?==?index)?{
??????????this.imgList.splice(index,?1);?//刪除第index個元素
????????}
??????}
??????console.log(this.imgList,?"imgList2del");
????}
??}
};
</script>
<style?lang="less"?scope>
*?{
??margin:?0;
??padding:?0;
}
#upload?{
??display:?none;
}
.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;
}
ul?>?li?{
??width:?120px;
??padding:?5px;
??display:?inline-block;?
??position:?relative;
??.delimg?{
????width:?5px;
????height:?5px;
????position:?absolute;
????top:?0;
????right:?10px;
??}
}
#my-img?{
??width:?5rem;
}
</style>
