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

【问题标题】：How to render SVG and convert to PNG in react native如何在 React Native 中渲染 SVG 并转换为 PNG
【发布时间】：2022-01-15 10:58:36
【问题描述】：

在我的应用中，头像是供用户选择的，它们会使用DiceBear的api随机生成，我在互联网上的几个论坛和网站上搜索过，我没有找到：

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

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

有人知道我该如何解决这个问题吗？从 PHP 中，还是使用 React Native 来转换这个 svg？

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

【问题讨论】：

您需要光栅图像吗？您可以保存 svg，它只是一个包含 10k 个字符的字符串。

标签： php react-native svg expo png

【解决方案1】：

您可以在<canvas> 上绘制SVG 图像，然后从<canvas> 获取数据URL。在这里，我绘制了 SVG 三遍：首先是 SVG，然后在画布中，最后是带有 PNG 数据的<img>。然后，您可以使用 PNG 数据 URL 向服务器发送 POST 请求。

请注意，您不需要显示所有图像。您可以隐藏画布并忽略<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>

【讨论】：

【解决方案2】：

DiceBear API 支持 PNG 格式已经有几天了。

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

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。