如何在angularjs中上传图像时自动压缩图像答案

【问题标题】：How to auto-compress Images while uploading image in angularjs如何在angularjs中上传图像时自动压缩图像
【发布时间】：2018-08-09 05:20:16
【问题描述】：

这是我的 HTML 表单：

<form name="myForm" ng-submit="">
    <input ng-model='file' type="file"/>
    <input type="submit" value='Submit'/>
</form>

我想上传一张图片。在这里，如果文件大小很大（如 3 或 4 MB），我想将图像自动压缩到 1MB 或更少。任何选项都可以在 angularjs 或 javascript 中自动压缩图像。

【问题讨论】：

我认为您无法在 JavaScript 中执行此操作。有许多服务器端库可以提供帮助，具体取决于您在服务器端使用的语言。或者像 cloudinary.com 这样的公司也可以为你做这件事并托管你的图片。
看看github.com/oukan/angular-image-compress
让我知道这是否是您想要的，以便我可以在答案中添加代码示例
是的，这就是我想要的，你能添加一个代码示例@UsmanRana

标签： javascript angularjs file-upload

【解决方案1】：

您可以使用图像压缩器，您可以在其中指定图像的所需高度和宽度。

https://www.npmjs.com/package/image-compressor

【讨论】：

【解决方案2】：

This Angular 指令在客户端使用 angularjs 压缩 jpeg 或 png 文件。阅读更多关于它的信息here

此模块依赖于angularjs，因此请确保您已添加angularjs 依赖项，然后添加angular-image-compress.js。类似的东西

angular.module('myApp', ['ngImageCompress']);

这样你就可以实现你想要的。

 <input id="inputImage" type="file" accept="image/*" image="image1" resize-max-height="800" resize-max-width="800" resize-quality="0.7" resize-type="image/jpg" ng-image-compress />

Directives 上面使用的input 标签是不言自明的

【讨论】：