js怎么将svg导出成图片不显示不出来

要将SVG导出成图片并显示出来，可以通过canvas转换、使用Blob对象、利用FileReader API等方法。Canvas转换方法是最常用的，下面详细描述如何通过Canvas来实现这一点。

将SVG导出成图片并显示出来的步骤如下：

创建一个Canvas元素并设置尺寸：根据SVG的大小设置Canvas的宽和高。
将SVG转换成Data URL：使用XMLSerializer将SVG转换成字符串，并将其编码为Data URL。
将Data URL绘制到Canvas上：使用Canvas的drawImage方法将Data URL绘制到Canvas上。
将Canvas转换成图片：使用Canvas的toDataURL方法将Canvas内容转换成图片格式（如PNG、JPEG）。
创建图片元素并显示：将生成的Data URL赋值给图片元素的src属性，并将其添加到DOM中显示。

详细步骤示例：

<!DOCTYPE html>
<html>
<head>
    <title>SVG to Image</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>
    <button onclick="convertSvgToImage()">Convert SVG to Image</button>
    <div id="output"></div>
    <script>
        function convertSvgToImage() {
            const svgElement = document.getElementById("svgElement");
            const canvas = document.createElement("canvas");
            const context = canvas.getContext("2d");
            const svgData = new XMLSerializer().serializeToString(svgElement);
            const svgSize = svgElement.getBoundingClientRect();
            canvas.width = svgSize.width;
            canvas.height = svgSize.height;
            const img = new Image();
            const svgBlob = new Blob([svgData], { type: "image/svg+xml;charset=utf-8" });
            const url = URL.createObjectURL(svgBlob);
            img.onload = function() {
                context.drawImage(img, 0, 0);
                URL.revokeObjectURL(url);
                const imgURL = canvas.toDataURL("image/png");
                const imgElement = document.createElement("img");
                imgElement.src = imgURL;
                document.getElementById("output").appendChild(imgElement);
            };
            img.src = url;
        }
    </script>
</body>
</html>

一、创建Canvas并设置尺寸

为了确保生成的图片尺寸正确，首先需要创建一个Canvas元素，并根据SVG元素的宽高来设置Canvas的宽高。

const canvas = document.createElement("canvas");
const context = canvas.getContext("2d");
const svgSize = svgElement.getBoundingClientRect();
canvas.width = svgSize.width;
canvas.height = svgSize.height;

二、将SVG转换成Data URL

通过XMLSerializer将SVG DOM转换成字符串，再创建一个Blob对象，并生成一个Data URL。

const svgData = new XMLSerializer().serializeToString(svgElement);
const svgBlob = new Blob([svgData], { type: "image/svg+xml;charset=utf-8" });
const url = URL.createObjectURL(svgBlob);

三、将Data URL绘制到Canvas上

将生成的Data URL设置为Image对象的src属性，并在图像加载完成后使用Canvas的drawImage方法绘制图像。

const img = new Image();
img.onload = function() {
    context.drawImage(img, 0, 0);
    URL.revokeObjectURL(url);
    // 将Canvas转换成图片
    const imgURL = canvas.toDataURL("image/png");
    const imgElement = document.createElement("img");
    imgElement.src = imgURL;
    document.getElementById("output").appendChild(imgElement);
};
img.src = url;

四、将Canvas转换成图片并显示

通过Canvas的toDataURL方法将Canvas内容转换成图片格式，并将生成的Data URL赋值给图片元素的src属性。

const imgURL = canvas.toDataURL("image/png");
const imgElement = document.createElement("img");
imgElement.src = imgURL;
document.getElementById("output").appendChild(imgElement);

五、总结

在实际开发中，将SVG导出成图片并显示出来是一个常见的需求，特别是在图形处理和数据可视化领域。通过Canvas转换、使用Blob对象和FileReader API，可以方便地实现这一功能。如果你需要在项目管理系统中处理类似任务，可以考虑使用PingCode和Worktile这两个系统来管理和协作。