如何转换数据:image / webp,expo(或php)中的base64

问题描述 投票:0回答:1

[因此,当我从api接收webp,base64图像格式时,出现了这个问题,该图像未在ios设备中显示,但在Android中显示。那么对于使用expo并希望在ios上显示webp图像的人有解决方案吗?如果可以在php中使用,我可以采取另一种解决方案,因为这就是我用作后端的方法。

返回图像字符串的示例

https://i.stack.imgur.com/k1yHv.png

php react-native base64 expo webp
1个回答
0
投票

通常,webp图像与Safari不兼容。您可以检查webp here的兼容性。

[您需要做的可能是使用将图像转换为jpeg或png并使用<picture>标签的服务。这只是如何使用标记的示例。

<picture>
    <source srcset="images/[email protected]" type="image/webp">
    <source srcset="images/[email protected]" type="image/png">
    <img src="images/[email protected]" alt="Logo">
</picture>

UPDATE

上面的示例只是向您展示如何在不同类型的图像上使用picture标签。

关于base64图像,您可以执行以下操作:

<picture>
    <source srcset="data:image/webp;base64,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" type="image/webp">
    <source srcset="data:image/jpeg;base64,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" type="image/jpeg">
    <img src="data:image/jpeg;base64,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">
</picture>

另一种选择是使用Modernizr来检测客户端的浏览器是否可以使用webp。您可以检查并构建专门用于webp检测的Modernizr。检查它here

如果您可以控制图像的创建/上传方式,则需要做的是jpg / png和webp版本,并根据需要使用相应的版本。您确实需要同时拥有两者,因为正如我之前说过的那样,webp仍不兼容所有浏览器。

如果运行该代码段,您将看到,如果尝试下载该图像,它将使用webp版本。如果您从Safari中打开它,则会下载jpg版本。

UPDATE 2:图像转换

关于图像转换,您可以做的是使图像生成函数将webp图像作为参数并返回jpg图像。

由于收到的图像为base64格式,因此可以使用this topic将图像保存在服务器上,但对于您的情况则为.webp格式。之后,您可以使用imagecreatefromwebp()功能创建新图像。检查该页面末尾的示例。它将webp图像转换为jpeg。

据我所见,您可以执行以下操作:

  1. 获取包含有关图像信息的API调用。
  2. 检查服务器上是否存在映像(理想的情况是创建一个特定的文件夹并使用相同的映像名称)。
  3. 如果存在,则返回图像的路径。
  4. 如果不存在,则从base64数据创建一个.webp文件。然后根据需要将其转换为.jpg或.png文件。
  5. 您使用本地图像。这也可能会加快您的通话速度。
© www.soinside.com 2019 - 2024. All rights reserved.