AngularJs - 在数据库中保存时缩小图像大小

时间:2017-11-06 07:27:49

标签: javascript angularjs image ng-file-upload ng-image-compress

在我的Angular应用程序中,我浏览并上传了图像功能。样本图像由Windows7(Chrysanthemum.jpg,Desert.jpg等)提供,大小超过500KB。我需要存储最大大小为170KB的图像(客户端要求)。那么如何在不影响图像质量的情况下上传到数据库时减小图像的大小)另外,我不想要验证来限制用户选择大小超过170KB的图像。我正在将图像转换为Base64并存储为SQL Server的Image数据类型。

我的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.                            
                });
            }
 }

任何建议都将受到高度赞赏。

  

注意:我用过   NG-文件上传    图像浏览指令&amp;上传功能。

更新1:

我在这个GitHub链接上获得了Angular Image Compress指令 https://github.com/oukan/angular-image-compress现在使用我现有的代码来压缩图像。

1 个答案:

答案 0 :(得分:2)

angular-image-compress.js提供了完成此任务的好方法。

我已使用此指令成功实现了图像压缩功能。请参考https://github.com/oukan/angular-image-compress作为起点。