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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何转换数据:image / webp,expo(或php)中的base64相关的知识,希望对你有一定的参考价值。

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

返回图像字符串的示例

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

答案

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

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

<picture>
    <source srcset="images/logo@1x.webp" type="image/webp">
    <source srcset="images/logo@1x.png" type="image/png">
    <img src="images/logo@1x.png" 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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

以上是关于如何转换数据:image / webp,expo(或php)中的base64的主要内容,如果未能解决你的问题,请参考以下文章

webp格式图片转换为jpg

如何在服务工作者中缓存webp图像?

使用 Pillow 将图像转换为 webP

Javascript 将图像加载到 Offscreen Canvas 中,执行 webp 转换

python 使用pillow将图片转换为webp格式

如何将 expo-image-picker 与 android 11 范围存储一起使用?