将 HTML5 svg 标签导出到图像 c#答案

【问题标题】：Export the HTML5 svg tags to image c#将 HTML5 svg 标签导出到图像 c#
【发布时间】：2013-10-31 08:58:21
【问题描述】：

我有一个 aspx 文件，它包含 <svg>。我想将此 svg 保存为图像。我搜索了很多，但找不到正确的答案。

例如：

<body>
    <form id="form1" runat="server">
        <div>
            <svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="mycanvas">
                <rect width="300" height="100" style="fill: rgb(0,0,255); stroke-width: 1; stroke: rgb(0,0,0)" />
            </svg>
        </div>
        <input id="Submit2" type="submit" value="submit2" onclick="test2()" />
        <asp:Button ID="BtnDotNew" runat="server" Text="Convert" OnClick="BtnDotNew_Click" />
    </form>
</body>

我该怎么做？

编辑：我尝试如下：

    function test2() {
        canvg(document.getElementById('drawingArea'), document.getElementById("mycanvas").innerHTML)

        canvg('canvas', 'file.svg', { ignoreMouse: true, ignoreAnimation: true })
    }

但在这种情况下，document.getElementById("mycanvas").innerHTML 值被称为undefined

【问题讨论】：

标签： asp.net html c#-4.0 svg

【解决方案1】：

试试这个：- SVG to Canvas to Image Conversion

SVG 到 Canvas 的初始转换是使用 https://code.google.com/p/canvg/ 完成的

//在id = 'canvas'的画布中加载'../path/to/your.svg'

canvg('canvas', '../path/to/your.svg')

//在画布中加载一个svg sn-p id = 'drawingArea'

canvg(document.getElementById('drawingArea'), '<svg>...</svg>')

//忽略鼠标事件和动画

canvg('canvas', 'file.svg', { ignoreMouse: true, ignoreAnimation: true })

然后使用 toDataURL() 将画布转换为 png 图像，该图像将当前画布的内容作为图像返回，您可以将其用作另一个画布或 HTML 元素的源。

【讨论】：

canvg('canvas', '../path/to/your.svg')我没有保存svg文件
@DevT 在你的情况下它将是canvg(document.getElementById('drawingArea'), document.getElementById("Id_of_SVG_Tag").innerHTML)
@DevT 你需要有一个canvas 元素和display:none 作为占位符。