angularjs客户端实现压缩图片文件并上传实例
主要是利用html5的canvas来进行图片的压缩,然后转化为dataURL，再有dataURL转化为Blob文件，Blob对象可以直接赋值给Formdata.
app.service('Util',function($q){
vardataURItoBlob=function(dataURI){
//convertbase64/URLEncodeddatacomponenttorawbinarydataheldinastring
varbyteString;
if(dataURI.split(',')[0].indexOf('base64')>=0)
byteString=atob(dataURI.split(',')[1]);
else
byteString=unescape(dataURI.split(',')[1]);
//separateoutthemimecomponent
varmimeString=dataURI.split(',')[0].split(':')[1].split(';')[0];
//writethebytesofthestringtoatypedarray
varia=newUint8Array(byteString.length);
for(vari=0;i<byteString.length;i++){
ia[i]=byteString.charCodeAt(i);
}
returnnewBlob([ia],{
type:mimeString
});
};
varresizeFile=function(file){
vardeferred=$q.defer();
varimg=document.createElement("img");
try{
varreader=newFileReader();
reader.onload=function(e){
img.src=e.target.result;
//resizetheimageusingcanvas
varcanvas=document.createElement("canvas");
varctx=canvas.getContext("2d");
ctx.drawImage(img,0,0);
varMAX_WIDTH=800;
varMAX_HEIGHT=800;
varwidth=img.width;
varheight=img.height;
if(width>height){
if(width>MAX_WIDTH){
height*=MAX_WIDTH/width;
width=MAX_WIDTH;
}
}else{
if(height>MAX_HEIGHT){
width*=MAX_HEIGHT/height;
height=MAX_HEIGHT;
}
}
canvas.width=width;
canvas.height=height;
varctx=canvas.getContext("2d");
ctx.drawImage(img,0,0,width,height);
//changethedataUrltoblobdataforuploadingtoserver
vardataURL=canvas.toDataURL('image/jpeg');
varblob=dataURItoBlob(dataURL);
deferred.resolve(blob);
};
reader.readAsDataURL(file);
}catch(e){
deferred.resolve(e);
}
returndeferred.promise;
};
return{
resizeFile:resizeFile
};
});
由于目前angualrjs暂不支持通过multiformdata上传文件，所以利用如下的代码可以上传formdata里的文件
app.controller('CompanyCtrl',function($http,Util){
Util.resizeFile(input.files[0]).then(function(blob_data){
varfd=newFormData();
fd.append("imageFile",blob_data);
$http.post('http://your.domain.com/upload',fd,{
headers:{'Content-Type':undefined},
transformRequest:angular.identity
})
.success(function(data){
$scope.model.company_pict=data[0];
})
.error(function(){
console.log("uploadederror...")
});
},function(err_reason){
console.log(err_reason);
});
}