javascript - 如何将 SVG 节点转换为 PNG 并将其下载给用户？

Question

我有一个使用 svg 构建条形图的应用程序，我想为用户下载 PNG 图像。我正在使用 FileSaver.js 和 canvas-to-blob.min.js polyfill 来获得对 canvas.toBlob() 和 window.saveAs() 的支持。

这是下载按钮附带的代码片段:

$('#download-button').on('click', function(e) {
    e.preventDefault();
    var chart = $('#bar-chart')
        .attr('xmlns', 'http://www.w3.org/2000/svg');
    var width = chart.width();
    var height = chart.height();
    var data = new XMLSerializer().serializeToString(chart.get(0));
    var svg = new Blob([data], { type: "image/svg+xml;charset=utf-8" });
    var url = URL.createObjectURL(svg);

    var img = $('<img />')
        .width(width)
        .height(height)
        .on('load', function() {
            var canvas = document.createElement('canvas');
            canvas.width = width;
            canvas.height = height;
            var ctx = canvas.getContext('2d');
            ctx.drawImage(img.get(0), 0, 0);
            canvas.toBlob(function(blob) {
                saveAs(blob, "test.png");
            });
        });
    img.attr('src', url);
});

它提取出 SVG 图像的 XML，将其包装在一个 blob 中，并为该 blob 创建对象 URL。然后它创建一个图像对象并将其 src 设置为对象 URL。然后加载事件处理程序创建一个 Canvas 并使用 drawImage() 将图像渲染到 Canvas 上。最后，它将图像数据提取到第二个 blob，并使用 saveAs() 将其下载为“test.png”。

一切似乎都正常，但下载的 PNG 文件没有完整的图像——只有左上角的一部分。浏览器能否在 SVG 完全呈现之前触发“加载”事件？或者我只是在这里遗漏了什么？

Here is a jsFiddle demonstrating the problem.

Answer 1

(移动评论回答问题可以关闭:)

SVG 元素的 100% 宽度被解释为 100 像素。如果您控制台记录宽度/高度，您可以看到这一点。

设置绝对宽度是解决问题的一种方式。