AngularJs - 在数据库中保存时减小图像大小
AngularJs - Reducing Image Size while saving in database
在我的 Angular 应用程序中,我具有浏览和上传图像功能。 Windows7(Chrysanthemum.jpg、Desert.jpg 等)提供的样本图片大小超过 500KB。我需要存储最大尺寸为 170KB 的图像(客户要求)。那么如何在不影响太多图像质量的情况下上传到数据库的同时减小图像的大小)另外我不希望验证限制用户选择大小大于 170KB 的图像。我正在将图像转换为 Base64 并存储为 SQL 服务器的图像数据类型。
我的HTML代码:
<input id="BrowseFile" type="file" ngf-select ng-model="vm.picFile" name="file" ngf-change="vm.uploadPic(vm.picFile)" accept="image/*" required >
我的控制器代码:
this.uploadPic = function (picFile) {
if (picFile == null)
console.log("Please select image");
else {
vm.fileName = picFile.name;
picFile.upload = Upload.base64DataUrl(picFile).then(function (imgBase64) {
vm.image = imgBase64; // Storing Uploaded photo string for storing in database.
});
}
}
任何建议将不胜感激。
Note : I used
ng-file-upload
directive for Image Browsing & uploading functionality.
更新 1:
我在这个 GitHub link 上获得了 Angular Image Compress 指令
https://github.com/oukan/angular-image-compress 现在正在使用我现有的代码来压缩图像。
angular-image-compress.js 提供了完成此任务的好方法。
我已经使用该指令成功实现了图像压缩功能。请参考https://github.com/oukan/angular-image-compress作为起点。
在我的 Angular 应用程序中,我具有浏览和上传图像功能。 Windows7(Chrysanthemum.jpg、Desert.jpg 等)提供的样本图片大小超过 500KB。我需要存储最大尺寸为 170KB 的图像(客户要求)。那么如何在不影响太多图像质量的情况下上传到数据库的同时减小图像的大小)另外我不希望验证限制用户选择大小大于 170KB 的图像。我正在将图像转换为 Base64 并存储为 SQL 服务器的图像数据类型。
我的HTML代码:
<input id="BrowseFile" type="file" ngf-select ng-model="vm.picFile" name="file" ngf-change="vm.uploadPic(vm.picFile)" accept="image/*" required >
我的控制器代码:
this.uploadPic = function (picFile) {
if (picFile == null)
console.log("Please select image");
else {
vm.fileName = picFile.name;
picFile.upload = Upload.base64DataUrl(picFile).then(function (imgBase64) {
vm.image = imgBase64; // Storing Uploaded photo string for storing in database.
});
}
}
任何建议将不胜感激。
Note : I used ng-file-upload directive for Image Browsing & uploading functionality.
更新 1:
我在这个 GitHub link 上获得了 Angular Image Compress 指令 https://github.com/oukan/angular-image-compress 现在正在使用我现有的代码来压缩图像。
angular-image-compress.js 提供了完成此任务的好方法。
我已经使用该指令成功实现了图像压缩功能。请参考https://github.com/oukan/angular-image-compress作为起点。