angularjs客户端实现压缩图片文件并上传实例

主要是利用html5的canvas来进行图片的压缩,然后转化为dataURL，再有dataURL转化为Blob文件，Blob对象可以直接赋值给Formdata.

app.service（"Util", function（$q） {var dataURItoBlob = function（dataURI） {// convert base64/URLEncoded data component to raw binary data held in a stringvar byteString;if （dataURI.split（","）[0].indexOf（"base64"） >= 0）byteString = atob（dataURI.split（","）[1]）;elsebyteString = unescape（dataURI.split（","）[1]）;// separate out the mime componentvar mimeString = dataURI.split（","）[0].split（":"）[1].split（";"）[0];// write the bytes of the string to a typed arrayvar ia = new Uint8Array（byteString.length）;for （var i = 0; i < byteString.length; i++） {ia[i] = byteString.charCodeAt（i）;}return new Blob（[ia], {type: mimeString}）;};var resizeFile = function（file） {var deferred = $q.defer（）;var img = document.createElement（"img"）;try {var reader = new FileReader（）;reader.onload = function（e） {img.src = e.target.result;//resize the image using canvasvar canvas = document.createElement（"canvas"）;var ctx = canvas.getContext（"2d"）;ctx.drawImage（img, 0, 0）;var MAX_WIDTH = 800;var MAX_HEIGHT = 800;var width = img.width;var height = 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;var ctx = canvas.getContext（"2d"）;ctx.drawImage（img, 0, 0, width, height）;//change the dataUrl to blob data for uploading to servervar dataURL = canvas.toDataURL（"image/jpeg"）;var blob = dataURItoBlob（dataURL）;deferred.resolve（blob）;};reader.readAsDataURL（file）;} catch （e） {deferred.resolve（e）;}return deferred.promise;};return {resizeFile: resizeFile};}）;

由于目前angualrjs暂不支持通过multiform data上传文件，所以利用如下的代码可以上传formdata里的文件

app.controller（"CompanyCtrl", function（$http, Util） {Util.resizeFile（input.files[0]）.then（function（blob_data） {var fd = new FormData（）;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（"uploaded error..."）}）;}, function（err_reason） {console.log（err_reason）;}）;}