如何在画布上绘制内嵌svg（在DOM中）？

一尘不染

如何在画布上绘制内嵌svg（在DOM中）？

javascript

好吧，我需要一些有关将.svg文件/图像转换为.png文件/图像的帮助…

我的页面上显示了一个.svg图像。它保存在我的服务器上（.png文件）。我需要按需将其转换为.png文件（单击按钮），然后将.png文件保存在服务器上（我将通过.ajax请求执行此操作）。

但是问题是转换。

我阅读了很多有关html5
Canvas的内容，这些内容可能可以帮助我做我现在需要做的事情，但是我找不到解决我问题的明确方法，而且，我不明白我所发现的一切…所以我需要一些明确的建议/帮助，以帮助我了解如何做。

这是“ html idea”模板：

<html>
    <body>
        <svg id="mySvg" width="300px" height="300px">
            <!-- my svg data -->
        </svg>
        <label id="button">Click to convert</label>
        <canvas id="myCanvas"></canvas>
    </body>
</html>

和一些js：

<script>
    $("body").on("click","#button",function(){
        var svgText = $("#myViewer").outerHTML;
        var myCanvas = document.getElementById("canvas");
        var ctxt = myCanvas.getContext("2d");
    });
</script>

然后，我需要将svg绘制到Canvas中，取回base64数据，并将其保存在服务器上的.png文件中…但是…如何？我读到了很多不同的解决方案，我实际上…迷路了…我正在使用jsfiddle，但是实际上我…无处…

…感谢您的阅读/帮助

阅读 588

2020-05-01

共1个答案

一尘不染

对于嵌入式SVG，您需要：

将SVG字符串转换为 Blob
获取Blob的URL
创建图像元素并将URL设置为 src
加载（onload）后，您可以将SVG绘制为画布上的图像
用于toDataURL()从画布获取PNG文件。

例如：

function drawInlineSVG(ctx, rawSVG, callback) {

    var svg = new Blob([rawSVG], {type:"image/svg+xml;charset=utf-8"}),
        domURL = self.URL || self.webkitURL || self,
        url = domURL.createObjectURL(svg),
        img = new Image;

    img.onload = function () {
        ctx.drawImage(this, 0, 0);     
        domURL.revokeObjectURL(url);
        callback(this);
    };

    img.src = url;
}

// usage:
drawInlineSVG(ctxt, svgText, function() {
    console.log(canvas.toDataURL());  // -> PNG data-uri
});

当然，此处的console.log仅作为示例。请在此处存储/传输字符串。（我也建议onerror在方法内部添加一个处理程序）。

另外，请记住使用width和height属性来设置画布大小，或者使用属性从JavaScript中设置画布大小。

2020-05-01