有没有办法只使用javascript将在线svg转换为png?

问题描述 投票:0回答:1

我正在使用discordjs开发一个discord机器人,它使用this api返回一个svg文件,但我需要一个png文件来存储其余的代码。有没有什么方法可以将其转换为 png 而无需下载/保存任何文件?

我尝试使用一些不同的 API 和软件包,但它们要么无法正常工作,要么已经过时了。

javascript image discord discord.js
1个回答
0
投票

是的,使用 Canvas 是可能的

function convertSVGtoPNG() {
            var svgElement = document.getElementById('svgElement');
            var svgData = new XMLSerializer().serializeToString(svgElement);
            var svgBlob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' });
            var url = URL.createObjectURL(svgBlob);

            var img = new Image();
            img.onload = function () {
                var canvas = document.getElementById('canvasElement');
                var context = canvas.getContext('2d');
                context.drawImage(img, 0, 0);
                var pngData = canvas.toDataURL('image/png');
                var pngImage = document.getElementById('pngImage');
                pngImage.src = pngData;
                URL.revokeObjectURL(url);
            };
            img.src = url;
        }
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SVG to PNG Conversion</title>
</head>
<body>
    <svg id="svgElement" xmlns="http://www.w3.org/2000/svg" width="200" height="200">
        <rect width="100%" height="100%" fill="blue"/>
        <circle cx="100" cy="100" r="80" fill="green"/>
        <text x="100" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>
    </svg>

    <canvas id="canvasElement" width="200" height="200" style="display:none;"></canvas>

    <button onclick="convertSVGtoPNG()">Convert SVG to PNG</button>

    <img id="pngImage" alt="PNG Image" />
</body>
</html>

© www.soinside.com 2019 - 2024. All rights reserved.