时间戳

首页 > 解决方案 > 如何对单个图像执行或处理多个操作？

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

问题描述

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

当图像上传到 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 调用。

标签： javascriptreactjsamazon-web-servicesaws-lambda

解决方案

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

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

这是一个很好的参考和生产级别的实现。

推荐阅读