javascript - Jquery:将 SVG 转换为新尺寸的 PNG

Question

我使用以下函数将 SVG 转换为 PNG 并提供下载:

<svg id="chart">
    ...some contenthere
</svg>

function() {
        var svg = $("#chart")[0],
            bBox = $('#chart')[0].getBBox();

        var width = bBox.width*2,
            height = bBox.height*2;

        var canvas = $("canvas")[0],
            serializer = new XMLSerializer(),
            svgString = serializer.serializeToString(svg);

        canvas.width = width;
        canvas.height = height;

        canvg(canvas, svgString);

        var dataURL = canvas.toDataURL('image/png'),
            data = atob(dataURL.substring('data:image/png;base64,'.length));

        asArray = new Uint8Array(data.length);

        for (var i = 0; i < data.length; ++i) {
            asArray[i] = data.charCodeAt(i); 
            } 

        var blob = new Blob([asArray.buffer], {type: 'image/png'}); 
        saveAs(blob, 'climatechart.png'); 
}

尽管输出图像与浏览器中的 SVG 大小相同，但它实际上工作得很好。如何设置图像的新尺寸？我还尝试直接从 svg 而不是 BBox 获取尺寸，但它是相同的。

Answer 1

此解决方案基于远程格式化服务器而不是本地代码。它使用 XSL FO 服务器端直接将 SVG 渲染为位图，允许您设置高质量输出的分辨率。

文档:http://www.cloudformatter.com/CSS2Pdf.APIDoc.Usage

示例:http://jsfiddle.net/g75t4oyq/

div 中 SVG 的 JPG 格式 @ 300dpi 的代码实现:

click="return xepOnline.Formatter.Format('JSFiddle', {render:'newwin', mimeType:'image/jpg', resolution:'300', srctype:'svg'})";
jQuery('#buttons').append('<button onclick="'+ click +'">JPG @300dpi</button>');