0

我有 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

4

1 回答 1

2

试试这个：- 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')

//在画布中加载一个 id = 'drawingArea' 的 svg 片段

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

//忽略鼠标事件和动画

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

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

于 2013-10-31T09:48:34.970 回答