如何将 Base64 图像旋转 90 度而不损失图像质量？答案

【问题标题】：How to rotate a Base64 image by 90 degree without losing image quality?如何将 Base64 图像旋转 90 度而不损失图像质量？
【发布时间】：2019-08-14 15:41:59
【问题描述】：

我有一个用 javascript 编写的函数，它使用 canvas

将图像旋转给定的输入度数

我不知道该尝试什么来提高图像质量。

在下面给出的这个函数中，我将第一个参数作为 base64 图像，第二个参数是图像应该旋转的程度，第三个参数是回调函数。 p>

//code for rotating image.
    export const  rotateImage = (imageBase64, rotation, cb) => {
    var img = new Image();
    img.src = imageBase64;
    img.onload = () => {
      var canvas = document.createElement("canvas");

      canvas.width = img.height;
      canvas.height = img.width;
      var ctx = canvas.getContext("2d");

      ctx.translate( Math.floor(img.height/2),Math.floor(img.width/2));

      ctx.rotate(rotation * (Math.PI / 180));

      ctx.drawImage(img, -img.width / 2, -img.height / 2);

      cb(canvas.toDataURL("image/jpeg"))
    };
};

预期结果：我希望图像在不损失图像质量的情况下旋转。

实际结果：旋转 550kb 大小的图像后，它会返回 80kb 大小的图像。图像质量急剧下降。如何旋转这个图像，如果我将一个 550kb 的图像旋转 90 度，旋转图像的质量也是 550kb？

感谢您的宝贵时间。真的很感激。

【问题讨论】：

使用css可能更容易，质量不会改变
不幸的是 jpeg 是一种有损格式。只是修改并重新保存您可能会丢失质量的文件
我想将输入作为 base64 图像并将输出作为旋转 90 度的 base 64 图像返回。它不适用于在网页中查看。但我希望输出为不损失图像质量的旋转图像。欢迎任何建议。感谢您尝试帮助我。
海普子，有没有办法旋转图像并以相同的质量保存？或者至少比我目前得到的质量更高？还是我可以采取任何其他方法来解决这个问题？谢谢你 phuzi。
还有将 EXIF 数据添加到图像的解决方案，您可以在其中旋转图像的方向。并非在所有情况下都有用。

标签： javascript reactjs

【解决方案1】：

jpeg 是有损的，作为一种缓解措施，您可以尝试提高质量。您也许可以提高质量并最终获得比以前更大的 jpeg。

根据 Mozilla 的文档，默认值为 0.92 https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL

我认为你应该尝试 1 的质量，看看你会得到什么。

cb(canvas.toDataURL("image/jpeg",1))

您提到不在浏览器中使用生成的图像。 JPEG 的某些用途支持标记方向。我不能推荐任何工具来尝试，但看看https://www.impulseadventure.com/photo/exif-orientation.html

ctx.drawImage(img, -img.width / 2, -img.height / 2);您确定这条线没有将图像大小调整到其大小的一半吗？

【讨论】：

我正在尝试旋转矩形图像，因此该线。谢谢

【解决方案2】：

将质量参数设置为 1。

cb(canvas.toDataURL("image/jpeg",1));

另外，我会选择 PNG，因为它是一种无损文件格式。

cb(canvas.toDataURL("image/png",1));

【讨论】：

谢谢你，格里兹利。图像质量很好，当我更改格式时，图像大小也增加了。
没问题。：）祝你有个好的一天。附言如果您觉得可以，请批准答案。 @哈利
或者只是不传递任何东西，因为 PNG 是默认值。 canvas.toDataURL()