如何在 React Native 中渲染 SVG 并转换为 PNG

Question

在我的应用程序中，头像可供用户使用 select，它们将使用 DiceBear 的 api 随机生成，我在互联网上的几个论坛和网站上搜索，我没有'找不到方法：

1 - 显示我用 DiceBear 的 api 生成的这个 svg 列表；（编辑：使用 react-native-svg 库可以很容易地解决这个问题，现在的问题是转换为 PNG 发送到服务器！）

2 - 如何将 selected svg 转换为 png 以发送到我的应用程序的服务器，它有一个 api 全部在 PHP 和 php没有 SVG 支持在后端进行这种转换，我相信它必须在前端完成并以 png 格式发送！

有人知道我该如何解决这个问题吗？来自 PHP，或使用 React Native 转换此 svg？

重要信息：我使用 EXPO 和打字稿； API 在 PHP;

Answer 1

您可以在 <canvas> 上绘制 SVG 图像，然后从 <canvas> 获取数据 URL。在这里，我绘制了 SVG 三次：首先是 SVG，然后是 canvas，最后是带有 PNG 数据的 <img>。然后，您可以将 PNG 数据 URL 用于您对服务器的 POST 请求。

请注意，您不需要显示所有图像。您可以只隐藏 canvas 并省略 <img>.

document.addEventListener('DOMContentLoaded', e => {
  let svg01 = document.getElementById('svg01');
  let canvas = document.getElementById('canvas');
  let ctx = canvas.getContext('2d');
  
  let img01 = document.getElementById('img01');
  
  let img = new Image();
  
  img.addEventListener('load', e => {
    canvas.width = e.target.width;
    canvas.height = e.target.height;
    ctx.drawImage(e.target, 0, 0);
    img01.src = canvas.toDataURL('image/png');
    console.log('The Data URL that goes into the request:', canvas.toDataURL('image/png'));
  });
  img.src = `data:image/svg+xml,${svg01.outerHTML}`;
});

<div>
  <svg id="svg01" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="30" height="30">
    <circle r="4" cx="4" cy="4" fill="red" />
    <rect x="4" y="4" width="6" height="6" fill="navy"/>
  </svg>
</div>
<canvas id="canvas"></canvas>
<div>
<img id="img01"/>
</div>

Answer 2

DiceBear API 几天前就支持 PNG 格式了。

https://github.com/dicebear/dicebear/discussions/179

如何在 React Native 中渲染 SVG 并转换为 PNG

How to render SVG and convert to PNG in react native

php

react-native

svg

expo

png