Javascript 在传入组件之前，如何在reactjs中旋转base64图像？

我正在尝试将一个基本64图像旋转90度，但无法做到这一点。 我想先旋转它，然后再将其传递给图像组件。 我有一个图像存储，但它是在base64，我必须把它传递到另一个页面的一个组件，但在这样做之前，我必须把它旋转90度

我可以使用样式在组件内部旋转图像，使其旋转90度=> 变换：“旋转（90度）”

但我想旋转图像，然后将其传递给组件

我尝试使用javascript使用stackoverflow中另一个类似问题的代码。但它不起作用

示例图像字符串

data:image/png;base64,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

预期结果：我希望使用代码将图像旋转90度

---

实际结果：我根本无法旋转它。

要实现您所描述的，您需要将图像渲染到

画布

，旋转它，然后调用

画布.toDataURL（“图像/png”）

。这将带来巨大的开销

我建议您通过制作一个

RotatedComponent

来解决这个问题，该组件按照您的建议使用css转换进行包装

如果您仍然想这样做：

---

如果不想使用

画布

，可以将带有样式的整个图像传递给组件，例如：

<MyComponent
  img={
    <img src={myBase64Img} style={{ transform: 'rotate(90deg)'}} />
  }
/>  

---

javascript中的图像处理可以使用canvas元素完成。要解决问题，需要旋转图像并生成新图像。为了从canvas获得帮助，我们可以遵循简单的算法

• 获取原始图像base64代码
• 使用图像构造函数从代码中创建飞行图像
• 在飞行画布中创建并获取其上下文
• 现在我们需要获得最大尺寸以克服边缘覆盖，因为我们需要对画布进行转换
• 我们有旋转90度和270度的特殊情况，因为这将使宽度与高度成反比，所以我们需要处理这个问题
• 旋转后对画布进行变换以覆盖图像
• 旋转画布，并将其内容作为base64返回
• 加载图像并在回调中发送结果

---

你试过什么？你有一些代码吗？我试着用css旋转它，这就是转换。。旋转属性，但该属性位于组件中。我想使用代码进行旋转，然后将其传递给图像组件。这是一个base64映像。所以我只想知道如何将它旋转90度。所以没有代码。谢谢你斯科特的帮助me@red我已经尝试过这个解决方案，它在reactjs中不起作用，而且它使用canvas。感谢您尝试帮助确保获得对canvas元素的引用，没有理由链接不能在ReactJS中工作。除了使用canvas之外，没有其他方法吗？我将字符串存储在一个数组中，但不知道如何旋转它，因为我不知道如何自己解析png数据。如果这是一个bmp，它将是微不足道的，但png是压缩的。哦，谢谢你格雷格。我真的只想把它旋转90度，然后再把它传递给一个组件。一旦它在组件中，它就不会按照我想要的方式运行。所以我必须在它到达组件之前旋转它。我已经尝试过了，它在查看时会旋转，但我想将它保存为旋转文件。在组件上旋转它并没有给我想要的结果。谢谢你，莫斯，谢谢你帮助我。真的很感激。如果你想将其保存为旋转图像，画布是最可行的方法，而且在FE env上100%是这样做的。我看到画布可以在屏幕外（你不必将其渲染到屏幕以获得旋转图像并将其发送到服务器）画布方式在这个解决方案stackoverflow.com/a/17043361/11368483中给出。我试过了，但它返回的getcontext为null，我不知道为什么。这就是为什么我不再以这种方式来处理它，而该解决方案是为jquery代码编写的，而不是reactjs@Harry，没有任何东西可以阻止您将jQuery与reactjs一起使用。顺便说一句，没有其他方法可以旋转图像，但可以旋转。除非你不打算使用画布，否则这个解决方案是可行的。你应该多解释一下你的答案。从这里很难知道你的答案是如何或为什么起作用的。虽然这段代码可能会解决这个问题，但这段代码如何以及为什么会解决这个问题将真正有助于提高你的帖子质量，并可能导致更多的投票。请记住，你是在将来回答读者的问题，而不仅仅是现在提问的人。请在回答中添加解释，并说明适用的限制和假设。嗯，好的。完成！

function rotateImage(imageBase64, rotation, cb) {
           var img = new Image();
            img.src = imageBase64;
            img.onload = () => {
              var canvas = document.createElement("canvas");
              const maxDim = Math.max(img.height, img.width);
              if ([90, 270].indexOf(rotation) > -1) {
                canvas.width = img.height;
                canvas.height = img.width;
              } else {
                canvas.width = img.width;
                canvas.height = img.height;
              }
              var ctx = canvas.getContext("2d");
              ctx.setTransform(1, 0, 0, 1, maxDim / 2, maxDim / 2);
              ctx.rotate(90 * (Math.PI / 180));
              ctx.drawImage(img, -maxDim / 2, -maxDim / 2);
              cb(canvas.toDataURL("image/jpeg"))
            };
}