angularjs客戶端實現(xiàn)壓縮圖片文件并上傳實例
更新時間:2015年07月06日 08:43:43 投稿:junjie
這篇文章主要介紹了angularjs客戶端實現(xiàn)壓縮圖片文件并上傳實例,本文直接給出代碼實例,需要的朋友可以參考下
主要是利用html5的canvas來進行圖片的壓縮,然后轉(zhuǎn)化為dataURL,再有dataURL轉(zhuǎn)化為Blob文件,Blob對象可以直接賦值給Formdata.
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 < 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 canvas
var 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 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
};
});
由于目前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);
});
}
相關(guān)文章
Angularjs實現(xiàn)控制器之間通信方式實例總結(jié)
這篇文章主要介紹了Angularjs實現(xiàn)控制器之間通信方式,結(jié)合實例形式總結(jié)分析了AngularJS控制器常用通信方式及相關(guān)操作注意事項,需要的朋友可以參考下2018-03-03
Angularjs Ng_repeat中實現(xiàn)復(fù)選框選中并顯示不同的樣式方法
今天小編就為大家分享一篇Angularjs Ng_repeat中實現(xiàn)復(fù)選框選中并顯示不同的樣式方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
AngularJS使用ocLazyLoad實現(xiàn)js延遲加載
這篇文章主要介紹了AngularJS使用ocLazyLoad實現(xiàn)js延遲加載的相關(guān)資料,需要的朋友可以參考下2017-07-07
Angular.Js中過濾器filter與自定義過濾器filter實例詳解
Angularjs過濾器是 angularjs非常棒的特性之一。有朝一日,你可能需要使用自定義過濾器,所以下面這篇文章主要給大家介紹了Angular.Js中過濾器filter與自定義過濾器filter的相關(guān)資料,需要的朋友可以參考借鑒,下面來一起看看吧。2017-05-05

