javascript - 如何将 SVG 图像转换为标准图像格式(例如 PNG 或 JPEG)？

Question

 <svg width="360" height="180">
     <circle class="little" cx="234.14618999697268" cy="13.068148791790009" r="12" fill="#e7d59e"></circle>
     <circle class="little" cx="315.8937894925475" cy="12.226657052524388" r="12" fill="#c85768"></circle>
     <circle class="little" cx="320.8564972691238" cy="133.00350899342448" r="12" fill="#bc63de"></circle>
 </svg>

假设我有像上面这样的 SVG 数据。有什么方法可以将其转换为 JPEG 或 PNG 等图像格式吗？我可以在 PHP 或 Javascript 中以适用于 IE8 的方式执行此操作吗？

Answer 1

您可以使用https://github.com/gabelerner/canvg或类似的库将 svg 绘制到 Canvas 上，然后使用 canvas.getImageData() 或 canvas.toDataURL() 分别以像素数组或 base64 字符串形式获取实际图像。不需要 PHP，但你可以忘记 IE8(每个人都应该忘记它)。