Vue上传图片压缩的问题
上传图片太大，需要前台进行图片压缩
上传图片大于100* 1024 的用canvas 来压缩来解决
然后IOS拍照上传会有图片旋转的问题，然后用了github 上的exif.js很好的插件，项目里面npm install exif-js --save 安装，
然后import一下就可以使用了
html
<div class="operate">
<span class="btn" @click="sendMsg" v-if="isSend&&isCanSend">{{btndesc}}</span>
<span class="btn" v-if="isSend&&!isCanSend">{{btndesc}}</span>
<label class="choosepic" v-if="!isSend&&!isCanUpload"></label>
<label class="choosepic" for="uploadcolor" v-if="!isSend&&isCanUpload"></label>
<input class="fileupload" type="file" accept="image/*" >
</div>
js
import Exif from 'exif-js'
export default {
data () {
return {
headerImage:'',picValue:''
}
},
mounted () {
},
methods: {
upload (e) {
let _this = this;
console.log('change----------->',e);
_this.resulting = [];
let files = e.target.files || e.dataTransfer.files;
// let length = files.length;
let timer = setTimeout(()=>{
_this.$loading.show({
text: '发送中'
})
clearTimeout(timer);
},500);
_this.singleUpload(files[0],0,1);
_this.isCanUpload = false;
e.target.value = null;
},
singleUpload(files,i,length){
this.files = files;
this.name = this.files.name;
this.picValue = files;
this.imgPreview(this.picValue,i,length);
console.log(this.picValue);
},
imgPreview (file,i,length) {
let self = this;
let Orientation;
// this.$emit('dealupload');
//去获取拍照时的信息，解决拍出来的照片旋转问题
EXIF.getData(file, function(){
Orientation = EXIF.getTag(this, 'Orientation');
});
// 看支持不支持FileReader
if (!file || !window.FileReader) {
self.$loading.hide();
return;
}
if (sAser.storage('deviceOS')==2){ //安卓,sAser.storage('deviceOS')==2
self.checkHash(file,i,length);
}
else{ //ios sAser.storage('deviceOS')==1
if (/^image/.test(file.type)) {
// 创建一个reader
let reader = new FileReader();
// 将图片2将转成 base64 格式
reader.readAsDataURL(file);
// 读取成功后的回调
reader.onload = function () {
let result = this.result;
let img = new Image();
img.src = result;
img.onload = function () {
let data = self.compressImage(img,Orientation,file);
self.headerImage = data;
let fileCompress = self.convertBase64UrlToBlob(data);
self.checkHash(fileCompress,i,length);
}
}
}
}
},
rotateImg (img, direction, canvas, lastRotate) {
//最小与最大旋转方向，图片旋转4次后回到原方向
const min_step = 0;
const max_step = 3;
if (img == null)return;
//img的高度和宽度不能在img元素隐藏后获取，否则会出错
let height = 0;
let width = 0;
if(lastRotate == true){
height = canvas.height;
width = canvas.width;
}else{
height = img.height;
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, width, height);
break;
case 1:
canvas.width = height;
canvas.height = width;
ctx.rotate(degree);
ctx.drawImage(img, 0, -height, width, height);
break;
case 2:
canvas.width = width;
canvas.height = height;
ctx.rotate(degree);
ctx.drawImage(img, -width, -height, width, height);
break;
case 3:
canvas.width = height;
canvas.height = width;
ctx.rotate(degree);
ctx.drawImage(img, -width, 0, width, height);
break;
}
},
//图片压缩
compressImage(img, Orientation,file) {
let size = file.size;
let initSize = img.src.length;
let maxWidth = 1600;
let w = img.width;
let h = img.height;
console.log('原始 宽度：' + w + "，高度：" + h);
if(w > maxWidth){
//如果图片宽度大于1600px，则将图片进行等比缩放
let hRatio = maxWidth / w;
w = maxWidth;
h = h * hRatio;
console.log('高度缩放比例：' + hRatio +'缩放后 宽度：' + w + "，高度：" + h);
}
//创建一个image对象，给canvas绘制使用
let cvs = document.createElement('canvas');
cvs.width = w;
cvs.height = h;
let ctx = cvs.getContext('2d');
// this.getToast("旋转：" + Orientation, "20em", "22em");
//修复ios上传图片的时候 被旋转的问题
if(Orientation != "" && Orientation != 1){
switch(Orientation){
case 6://需要顺时针（向左）90度旋转
// ctx.rotate(Math.PI / 2);
// ctx.drawImage(img, 0, -h, w, h);
//上面的方式处理有问题，使用rotateImg方法。其他不能使用rotateImg方法，会有问题
this.rotateImg(img,'left',cvs, true);
break;
case 8://需要逆时针（向右）90度旋转
ctx.rotate(3 * Math.PI / 2);
ctx.drawImage(img, -w, 0, w, h);
break;
case 3://需要180度旋转
ctx.rotate(Math.PI);
ctx.drawImage(img, -w, -h, w, h);
break;
default:
ctx.drawImage(img, 0, 0, w, h);
console.log('特殊情況1111111111==========================>',ctx);
break;
}
}else{
console.log('特殊情況2222222222222==========================>',ctx);
ctx.drawImage(img, 0, 0, w, h);
}
//进行最小压缩
let rate = 0.3;
if (size<1048576){
rate = 1;
}
console.log('==============fileing===============>',file.size,rate);
let ndata = cvs.toDataURL('image/jpeg', 0.3);
console.log('压缩后内容：' + ndata);
console.log('压缩前：' + initSize);
console.log('压缩后：' + ndata.length);
console.log('压缩率：' + ~~(100 * (initSize - ndata.length) / initSize) + "%");
return ndata;
},
convertBase64UrlToBlob(urlData) {
//将以base64的图片url数据转换为Blob
var arr = urlData.split(','), mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], {type: mime});
},
calcHash(file){
return sha1File(file);
},
postImg (file,i,length) {
//这里写接口
let _this = this;
let name = _this.name;
let data = {};
// this.$emit('uploading');
// let files = this.files;
let files = file;
let param = new FormData(); //创建form对象
if(files!=''){
param.append('file', files,files.name); //单个图片 ，多个用循环 append 添加
}else{
// this.$message.error('请添加图片');
}
// param.append('param', JSON.stringify(data));//添加form表单中其他数据
let config = {
headers:{'Content-Type':'multipart/form-data'}
}; //添加请求头
this.$http.post(_this.ajaxUrl,param,config)
.then(response=>{
//上传成功后，检查上传后的图片是否有效
console.log('返回结果',response);
_this.uploadState(response,i,length);
}).catch(err=>{
_this.uploadFail();
console.log('接口失败返回结果',err);
})
},
uploadFail(){
//发送图片过程中出现失败的处理
let _this = this;
_this.isCanUpload = true;
_this.$loading.hide();
},
}
}