主要依赖了一个compress.js的文件，文件内容如下:
```/*
*TencentispleasedtosupporttheopensourcecommunitybymakingWeUI.jsavailable.
*
*Copyright(C)THLA29Limited,aTencentcompany.Allrightsreserved.
*
*LicensedundertheMITLicense(the"License");youmaynotusethisfileexceptincompliance
*withtheLicense.YoumayobtainacopyoftheLicenseat
*
*/licenses/MIT
*
*Unlessrequiredbyapplicablelaworagreedtoinwriting,softwaredistributedundertheLicenseis
*distributedonan"ASIS"BASIS,WITHOUTWARRANTIESORCONDITIONSOFANYKIND,
*eitherexpressorimplied.SeetheLicenseforthespecificlanguagegoverningpermissionsand
*limitationsundertheLicense.
*//**
*检查图片是否有被压扁，如果有，返回比率
*refto/questions/11929099/html5-canvas-drawimage-ratio-bug-ios
*/functiondetectVerticalSquash(img){
//拍照在IOS7或以下的机型会出现照片被压扁的bug
vardata;
varih=img.naturalHeight;
varcanvas=document.createElement('canvas');
canvas.width=1;
canvas.height=ih;
varctx=canvas.getContext('2d');
ctx.drawImage(img,0,0);
try{
data=ctx.getImageData(0,0,1,ih).data;
}catch(err){
console.log('CannotcheckverticalSquash:CORS?');
return1;
}
varsy=0;
varey=ih;
varpy=ih;
while(py>sy){
varalpha=data[(py-1)*4+3];
if(alpha===0){
ey=py;
}else{
sy=py;
}
py=(ey+sy)>>1;//py=parseInt((ey+sy)/2)
}
varratio=(py/ih);
return(ratio===0)?1:ratio;}/**
*dataURItoblob,refto/fupslot/5015897
*@paramdataURI
*/functiondataURItoBuffer(dataURI){
varbyteString=atob(dataURI.split(',')[1]);
varbuffer=newArrayBuffer(byteString.length);
varview=newUint8Array(buffer);
for(vari=0;i
view[i]=byteString.charCodeAt(i);
}
returnbuffer;}functiondataURItoBlob(dataURI){
varmimeString=dataURI.split(',')[0].split(':')[1].split(';')[0];
varbuffer=dataURItoBuffer(dataURI);
returnnewBlob([buffer],{type:mimeString});}/**
*获取图片的orientation
*refto/questions/7584794/accessing-jpeg-exif-rotation-data-in-javascript-on-the-client-side
*/functiongetOrientation(buffer){
varview=newDataView(buffer);
if(view.getUint16(0,false)!=0xFFD8)return-2;
varlength=view.byteLength,offset=2;
while(offset
varmarker=view.getUint16(offset,false);
offset+=2;
if(marker==0xFFE1){
if(view.getUint32(offset+=2,false)!=0x45786966)return-1;
varlittle=view.getUint16(offset+=6,false)==0x4949;
offset+=view.getUint32(offset+4,little);
vartags=view.getUint16(offset,little);
offset+=2;
for(vari=0;i
if(view.getUint16(offset+(i*12),little)==0x0112)
returnview.getUint16(offset+(i*12)+8,little);
}
elseif((marker&0xFF00)!=0xFF00)break;
elseoffset+=view.getUint16(offset,false);
}
return-1;}/**
*修正拍照时图片的方向
*refto/questions/19463126/how-to-draw-photo-with-correct-orientation-in-canvas-after-capture-photo-by-usin
*/functionorientationHelper(canvas,ctx,orientation){
constw=canvas.width,h=canvas.height;
if(orientation>4){
canvas.width=h;
canvas.height=w;
}
switch(orientation){
case2:
ctx.translate(w,0);
ctx.scale(-1,1);
break;
case3:
ctx.translate(w,h);
ctx.rotate(Math.PI);
break;
case4:
ctx.translate(0,h);
ctx.scale(1,-1);
break;
case5:
ctx.rotate(0.5*Math.PI);
ctx.scale(1,-1);
break;
case6:
ctx.rotate(0.5*Math.PI);
ctx.translate(0,-h);
break;
case7:
ctx.rotate(0.5*Math.PI);
ctx.translate(w,-h);
ctx.scale(-1,1);
break;
case8:
ctx.rotate(-0.5*Math.PI);
ctx.translate(-w,0);
break;
}}/**
*压缩图片
*/functioncompress(file,options,callback){
constreader=newFileReader();
reader.onload=function(evt){
if(press===false){
//不启用压缩&base64上传的分支，不做任何处理，直接返回文件的base64编码
file.base64=evt.target.result;
callback(file);
return;
}
//启用压缩的分支
constimg=newImage();
img.onload=function(){
constratio=detectVerticalSquash(img);
constorientation=getOrientation(dataURItoBuffer(img.src));
constcanvas=document.createElement('canvas');
constctx=canvas.getContext('2d');
constmaxW=press.width;
constmaxH=press.height;
letw=img.width;
leth=img.height;
letdataURL;
if(wmaxH){
w=parseInt(maxH*img.width/img.height);
h=maxH;
}elseif(w>=h&&w>maxW){
h=parseInt(maxW*img.height/img.width);
w=maxW;
}
canvas.width=w;
canvas.height=h;
if(orientation>0){
orientationHelper(canvas,ctx,orientation);
}
ctx.drawImage(img,0,0,w,h/ratio);
if(/image\/jpeg/.test(file.type)||/image\/jpg/.test(file.type)){
dataURL=canvas.toDataURL('image/jpeg',press.quality);
}else{
dataURL=canvas.toDataURL(file.type);
}
if(options.type=='file'){
if(/;base64,null/.test(dataURL)||/;base64,$/.test(dataURL)){
//压缩出错，以文件方式上传的，采用原文件上传
console.warn('Compressfail,dataURLis'+dataURL+'.Nextwilluseoriginfiletoupload.');
callback(file);
}else{
letblob=dataURItoBlob(dataURL);
blob.id=file.id;
blob.name=file.name;
blob.lastModified=file.lastModified;
blob.lastModifiedDate=file.lastModifiedDate;
callback(blob);
}
}else{
if(/;base64,null/.test(dataURL)||/;base64,$/.test(dataURL)){
//压缩失败，以base64上传的，直接报错不上传
options.onError(file,newError('Compressfail,dataURLis'+dataURL+'.'));
callback();
}else{
file.base64=dataURL;
callback(file);
}
}
};
img.src=evt.target.result;
};
reader.readAsDataURL(file);}exportdefault{
compress};
```
文件中有多种bug处理，如，拍照在IOS7或以下的机型会出现照片被压扁的bug 、修正拍照时图片的方向、压缩图片等问题。
具体使用也大概说明一下，下例子使用用的是vue-cli
1, 引入 js 注在静态文件目录下，es6引入，，注意，导出的是对象，，且用的是default导出importcompressfrom'@/assets/js/compress.js'
2,下面是个人的使用方式，
```
```
说到这儿，懂些vue的大概就知道了，上面是一个当成组件的封装，还可以更完善，谢谢点赞。
