浏览器端转换 SVG -> PNG 的问题答案

【问题标题】：Issue with browser-side conversion SVG -> PNG浏览器端转换 SVG -> PNG 的问题
【发布时间】：2020-10-17 09:29:59
【问题描述】：

我正在编写一个小书签，它应该截取 SVG 图表并将其保存为 PNG 图像。我正在使用最新的 Chrome 浏览器对此进行测试。

这是包含图表的页面的 URL：https://data.oecd.org/gdp/real-gdp-forecast.htm 我要捕获并保存为 PNG 的图表是页面上半部分的大图表。可以通过CSS类ddp-chart-inner来识别。

书签中的代码在这里：https://pastebin.com/raw/cduvdC6e（pastebin，因为 GitHub 设置了一些不允许将代码注入其他网站的 CSP 标头）。

(function() {
    // this library is used for the download of the generated image
    var fileSaverUrl = 'https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.2/FileSaver.min.js';

    var d = document, b = d.body, fs = d.createElement('script');
    fs.setAttribute('src', fileSaverUrl);
    fs.onload = function() {
        console.log('FileSaver loaded.');
        var canvas = d.createElement("canvas");
        canvas.height = '400';
        canvas.width = '700';
        b.appendChild(canvas);

        var image = d.createElement("div");
        image.id = 'png-container';
        b.appendChild(image);

        // this part comes from here: http://bl.ocks.org/biovisualize/8187844
        var svgString = new XMLSerializer().serializeToString(d.getElementsByClassName('ddp-chart-inner')[0]);
        var ctx = canvas.getContext("2d");
        var DOMURL = self.URL || self.webkitURL || self;
        var img = new Image();
        var svg = new Blob([svgString], {type: "image/svg+xml;charset=utf-8"});
        var url = DOMURL.createObjectURL(svg);
        img.onload = function() {
            ctx.drawImage(img, 0, 0);
            var png = canvas.toDataURL("image/png");
            document.querySelector('#png-container').innerHTML = '<img src="'+png+'"/>';
            // that's what I want... it downloads a file that doesn't look like the chart ...
            saveAs(png, 'test.png');
            DOMURL.revokeObjectURL(png);
        };
        img.src = url;
    }
    b.appendChild(fs);  
}).call(this);

此代码是通过此小书签加载的：

javascript:(function(){ var d = document, b = d.body, s = d.createElement('script');    s.setAttribute('src', 'https://pastebin.com/raw/cduvdC6e?x=' + Math.random());    b.appendChild(s);}());

我得到的结果是这样的：

几乎可以识别旋转 45 度的 X 轴标签，但除此之外......

请注意，我最初已开始使用 html2canvas 库，但结果也不令人满意。

此外，目前还没有进行清理，例如删除创建的元素。

【问题讨论】：

标签： javascript svg browser png

【解决方案1】：

在与开发人员交谈后，他们表示这些特定图表的 HTML 和 SVG 混合使得无法创建 PNG 客户端。确实有必要在服务器上使用puppeteer来实现所要求的。

【讨论】：