整合了网上angularjs关于头像上传,图片压缩以及文件传输的功能代码。
1.摆放一个固定大小为(100,100)的头像选择框,将图片与输入框重叠,输入内容改变时调用imgChange()方法生成缩小的图片。
<ion-item class="item-input item-stacked-label">
<input οnchange="angular.element(this).scope().imgChange(this)" type="file" multiple accept="image/*" style="width: 100px; height: 100px; display:block; border: none;opacity: 0;position: absolute;" />
<img id="face" ng-src="{{userInfo.headImage}}" style="width: 100px; height: 100px;">
</ion-item>
2.将图片转换成base64字符串类型,再将图片压缩赋值给userInfo.headImage,打印原始图片的字符串长度,压缩后图片的字符串及长度。
$scope.imgChange = function (element) {
if (!element.files[0]) {
console.log("未选择图片!");
return;
}
$scope.$apply(function(scope) {
var photofile = element.files[0];
var reader = new FileReader();
reader.onload = function(e) {
var prev_img = document.getElementById("face");
prev_img.src = e.target.result;
console.log(prev_img.src.length);
$scope.userInfo.headImage = reduceImage.compress(prev_img, 50).src;
console.log($scope.userInfo.headImage);
console.log($scope.userInfo.headImage.length);
};
reader.readAsDataURL(photofile);
});
};
var reduceImage = {
/**
* Receives an Image Object (can be JPG OR PNG) and returns a new Image Object compressed
* @param {Image} source_img_obj The source Image Object
* @param {Integer} quality The output quality of Image Object
* @return {Image} result_image_obj The compressed Image Object
*/
compress: function(source_img_obj, quality, output_format){
var mime_type = "image/jpeg";
if(output_format!=undefined && output_format=="png"){
mime_type = "image/png";
}
var cvs = document.createElement('canvas');
//naturalWidth真实图片的宽度
//cvs.width = source_img_obj.naturalWidth;
//cvs.height = source_img_obj.naturalHeight;
var xRate = 100 / source_img_obj.naturalWidth;
var yRate = 100 / source_img_obj.naturalHeight;
cvs.width = 100;
cvs.height = 100;
var cvsContext = cvs.getContext('2d');
cvsContext.scale(xRate, yRate);
var ctx = cvsContext.drawImage(source_img_obj, 0, 0);
var newImageData = cvs.toDataURL(mime_type, quality/100);
var result_image_obj = new Image();
result_image_obj.src = newImageData;
return result_image_obj;
}
};
3.上传头像只需上传userInfo.headImage字符串的值就行了,后台将字符串存为图片格式即可。
var face = headImage.Substring(23);
var filepath = HttpContext.Current.Server.MapPath("");
var index = filepath.LastIndexOf(@"\", StringComparison.Ordinal);
filepath = filepath.Substring(0, index) + "\\upload\\images\\";
//如果不存在就创建file文件夹
if (Directory.Exists(filepath) == false)
{
Directory.CreateDirectory(filepath);
}
filepath += "face.png";
try
{
var stream = new MemoryStream(Convert.FromBase64String(face));
var img = new Bitmap(stream);
img.Save(filepath, ImageFormat.Png);
}
catch (Exception)
{
filepath = "upload/images/default.png";
}