在我的應用中，頭像可供用戶選擇，他們會使用DiceBear的api隨機生成，我在網上搜索了幾個論壇和網站，我沒有找到方法：
1 - 顯示我用 DiceBear 的 api 生成的這個 svg 串列；（編輯：使用 react-native-svg 庫可以很容易地解決這個問題，現在的問題是轉換為 PNG 以發送到服務器！）
2 - 如何將選定的 svg 轉換為 png 以發送到我的應用程式的服務器，該服務器的 api 全部使用 PHP，而 php 沒有 SVG 支持在后端進行此轉換，我相信它必須在前面并以png格式發送！
任何人都知道我該如何解決這個問題？從 PHP 中，還是使用 React Native 來轉換這個 svg？
重要資訊：我使用 EXPO 和 typescript；PHP中的API；
uj5u.com熱心網友回復：
您可以在 a 上繪制 SVG 影像<canvas>，然后從<canvas>. 在這里，我繪制了 SVG 三次：首先是 SVG，然后是畫布，最后是<img>帶有 PNG 資料的。然后，您可以使用 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>uj5u.com熱心網友回復：
幾天前 DiceBear API 支持 PNG 格式。
https://github.com/dicebear/dicebear/discussions/179
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/385009.html
下一篇：帶有d:路徑的Svg影片