小编典典

如何在画布上绘制内嵌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,但是实际上我…无处…

…感谢您的阅读/帮助


阅读 674

收藏
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在方法内部添加一个处理程序)。

另外,请记住使用widthheight属性来设置画布大小,或者使用属性从JavaScript中设置画布大小。

2020-05-01