javascript - 如何对单个图像执行或处理多个操作？

Question

所以这是我的问题陈述:我在编辑器中提供对图像执行的某些操作，例如旋转、裁剪、调整大小等。我对图像执行的这些操作提供了我存储在我的编辑器中的特定输出。图像数据节点，对通过预签名 URL 上传到 S3 的图像执行此操作。例如，在裁剪图像时，我将获得裁剪属性，如 x、y、宽度和高度，我必须从其中裁剪原始图像，为了旋转，我将获取 Angular 等。

当图像上传到 S3 时，其中一些属性会默认初始化并存储在图像数据节点中。然后，当执行相应的操作时，这些属性会发生更改。我存储在图像中的属性结构如下:

const properties = {
    crop: {
      // Here x & y: position to place crop container of specific width & height mentioned below
      unit: '%',
      x: 0,
      y: 0,
      width: 100,
      height: 100
    },
    rotate: 0 // Angle in degrees
  };

当文档加载到我的编辑器中时，图像的这些属性将被访问，然后分别应用于操作中以在前端显示它。我用来应用这些属性的方法是 CANVAS 方法，用于从相应的操作生成一个 blob，以显示处理后的图像。

我的主要目标是使用我从操作中获得的属性对原始图像执行这些操作。但随着运算量的增加，为了将这些属性正确地应用到原始图像上，运算顺序的优先级也至关重要。例如，我有一个原始图像，我将其逆时针旋转 90 度，然后应用裁剪，然后旋转回其方向，因此我得到的裁剪参数将与我必须在原始图像上应用的参数不同，因此请跟踪操作顺序在这里也很重要。因此，我也在寻找一种方法，可以正确存储在原始图像上执行的这些操作序列，这样我就不必每次执行操作时都保存输出图像，即减少 API 调用。

Answer 1

AWS已经官方提供了名为Serverless Image Handler的解决方案它还通过 S3、Lambda 和 CloudFront 提供空中图像处理。

它提供了您想要的类似功能。而且它是开源的，支持一键部署到您的帐户中!

这是一个很好的引用和生产级实现。