浏览器端转换SVG出现问题->PNG [英] Issue with browser-side conversion SVG -> PNG

问题描述

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

这是包含图表的页面的URL:

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

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

此外，例如，目前还没有清除操作，例如删除创建的元素.

解决方案

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

I'm writing a bookmarklet that is supposed to take a screenshot of an SVG chart and save it as a PNG image. I'm testing this with the latest Chrome browser.

Here is the URL of the page containing the chart: https://data.oecd.org/gdp/real-gdp-forecast.htm The chart I want to capture and save as PNG is the large one in the top half of the page. It can be identified by the CSS class ddp-chart-inner.

The code in the bookmarklet is here: https://pastebin.com/raw/cduvdC6e (pastebin because GitHub sets some CSP header that doesn't allow the code to be injected into another website).

(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);

This code is loaded via this bookmarklet:

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);}());

The result that I'm getting is this:

One can just about recognise the X axis labels rotated 45 degrees, but other than that ...

Note that I've started initially using the html2canvas library but results weren't satisfying either.

Also, right now, no clean up is done such as removing the created elements, for example.

解决方案

Having spoken to the developers, they said that the mix of HTML and SVG for these specific charts made it impossible to create the PNG client-side. It is indeed necessary to use puppeteer on the server to achieve what was asked.

这篇关于浏览器端转换SVG出现问题->PNG的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！