瀏覽器端轉換問題 SVG -> PNG

Question

我正在編寫一個小書簽，它應該截取 SVG 圖表並將其保存為 PNG 圖像。 我正在使用最新的 Chrome 瀏覽器對此進行測試。

這是包含圖表的頁面的URL：頁。 可以通過 CSS class ddp-chart-inner來識別。

小書簽中的代碼在這里： https://pastebin.com/raw/cduvdC6e （pastebin 因為 GitHub 設置了一些 CSP header 允許將代碼注入另一個網站）。

(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庫，但結果也不令人滿意。

此外，目前還沒有進行清理，例如刪除創建的元素。

Answer 1

在與開發人員交談后，他們說這些特定圖表的 HTML 和 SVG 的混合使得無法創建 PNG 客戶端。 確實有必要在服務器上使用 puppeteer 來實現所要求的。