Question

是否可以使用js将以下SVG代码转换为Canvas或Image格式。

<svg class="svg" id="myViewer" width="400" height="250" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
    <g transform="translate(0, 0)" stroke="#000000" fill="#ffffff" stroke-width="1">
        <foreignObject style="overflow:visible;" pointer-events="all" width="100%" height="100%">
            <div contenteditable="true" style="height:10%">Sample</div>
            <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%">
                <image x="0" y="0" width="100%" height="100%" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="https://cdn2.iconfinder.com/data/icons/circle-icons-1/64/focus-48.png"></image>
                <rect x="0" y="0" width="100%" height="10" pointer-events="all" fill="green"/>
            </svg>
        </foreignObject>
    </g>
</svg>
<canvas id="canvas"></canvas>

Answer 1

将svg内容转换为图片。

var img = new Image();

img.src = "data:image/svg+xml;base64," +
   window.btoa(`<svg class="svg" id="myViewer" width="400" height="250" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
    <g transform="translate(0, 0)" stroke="#000000" fill="#ffffff" stroke-width="1">
        <foreignObject style="overflow:visible;" pointer-events="all" width="100%" height="100%">
            <div contenteditable="true" style="height:10%">Sample</div>
            <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%">
                <image x="0" y="0" width="100%" height="100%" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="https://cdn2.iconfinder.com/data/icons/circle-icons-1/64/focus-48.png"></image>
                <rect x="0" y="0" width="100%" height="10" pointer-events="all" fill="green"/>
            </svg>
        </foreignObject>
    </g>
</svg>
`);

加载后，您可以将其渲染到画布，然后将画布转换为数据URL并将其保存为所需的图像格式。请注意，您提供的SVG图像具有污染渲染图像并使其无法保存的内容。

使用JS进行SVG to Canvas / Image转换

1 个答案: