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 からキャンバス、画像への変換

SVG から Canvas への最初の変換は、https://code.google.com/p/canvg/を使用して行われます。

//「../path/to/your.svg」を id = 'canvas' のキャンバスにロードします

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 に答える