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

 app.service('Util', function($q) { var dataURItoBlob = function(dataURI) { // convert base64/URLEncoded data component to raw binary data held in a string var byteString; if (dataURI.split(',')[0].indexOf('base64') >= 0) byteString = atob(dataURI.split(',')[1]); else byteString = unescape(dataURI.split(',')[1]); // separate out the mime component var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]; // write the bytes of the string to a typed array var ia = new Uint8Array(byteString.length); for (var i = 0; i  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 server var 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 }; }); 

 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); }); }