Angular使用 ng-img-max 调整浏览器中的图片的示例代码

你想在Angular应用程序中进行图片上传，是否想在图片上传之前在前端限制上传图片的尺寸？ng2-img-max模块会使用web sorkers 进行图片大小的计算，并驻留在主线程中。如果您使用Angular CLI，您可以将脚本添加到.angular-cli.json文件中：将脚本添加到Angular CLI配置后，您将需要重新启动本地服务。不要忘记在后端做好验证，因为这里的内容会阻止一些用户将超大或非图像文件直接上传到后端。假设您只想将高度限制为300px，并相应调整宽度，以保持宽高比相同。只需传递最大值（兆字节）。在以下示例中，我们将生成的图像限制为大约75Kb：您可能想要预览要上传到用户的图像。您可以使用FileReader对象执行此操作。您还需要使用Angular的DomSanitizer来使其信任使用FileReader对象创建的base64编码数据URI：现在，我们的组件内容是这样的。