如何仅使用源 URL 而不是原始文件来调整图像的大小？答案

【问题标题】：How to resize an image with only the source URL, not the original file?如何仅使用源 URL 而不是原始文件来调整图像的大小？
【发布时间】：2019-11-30 18:21:33
【问题描述】：

老实说，我不确定这是否可能，但在对现有帖子进行了几天的挖掘之后，还没有找到解决方案，我想我会在这里询问社区。p>

我正在为一个社区风格的网站开发一个新的前端，用户可以在其中上传自己的帖子，包括图片。图像直接上传到 AWS S3 存储桶，然后源 URL 存储在数据库中。

之前的开发团队在初始上传时没有使用任何类型的图像优化，所以当我从我们的后端接收 S3 源 URL 时，图像大小可以从小（300 像素宽度）到大（5000 像素宽度） .因此，用户帖子的前端提要有间歇性的加载时间，因为浏览器需要时间在提要中加载这些海量图像。

我想知道是否有任何方法可以做一些漂亮的工作来“调整大小”或仅使用源 URL 优化图像。据我了解，在大多数情况下，我需要原始文件来进行任何大小优化，但也许这里有人知道我忽略了一个技巧。

我尝试获取源 URL 并创建一个 canvas 来保存原始图像的降级版本，但在这里没有成功。我正在使用最新版本的 Angular (8.x)，并且图像位于 *ngFor 循环中，这使得这更具挑战性。

【问题讨论】：

您在客户端所做的任何事情都不会减少从源交付的大小。您可以在 Angular 应用程序中拦截 url 并将其传递给服务器端优化脚本以返回缩放图像
根据@charlietfl，您需要编写一个服务器端进程来抓取、检查和优化。或者，您可以编写一个动态调整大小的新服务器端图像处理程序。但是，由于您的服务器离文件不近，这将是没有实际意义的。
@charlietfl & Bibberty（不会让我再次标记），感谢您的确认。我会和我们的后端开发人员讨论这个问题。

标签： javascript angular image image-processing

【解决方案1】：

这个aws solution 似乎可以完成您所追求的目标，因为您已经在使用 S3。看起来您可以使用 resize 方法来调整图像大小。

【讨论】：

感谢资源链接！我会看看我们能用这个做什么。