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

如果 svg 元素根据其大小定义了 viewBox 属性，则可以通过高度和宽度属性调整 SVG 文档的大小；例如

<svg width="500" height="200" viewBox="0 0 50 20" >

设置 viewBox 后，canvas 中的 svg 缩放将按照您编写的代码进行。

Answer 2

您可以轻松地调整 canvas 的大小，就像您可以将其绘制为和 canvas 一样。以下示例忽略了任何 SVG 渲染，根据您的问题它工作正常，但它确实显示了如何使用另一个 canvas:

轻松调整 canvas 的大小

var myCanvas = document.createElement('canvas');
var myCtx    = myCanvas.getContext('2d');
    myCanvas.width = 200;
    myCanvas.height = 200;
    myCtx.arc(100, 100, 100, 0, Math.PI * 2, true);
    myCtx.fill();

var seCanvas = document.createElement('canvas');
var seCtx    = seCanvas.getContext('2d');
    seCanvas.width = 200;
    seCanvas.height = 200;
    seCtx.drawImage(myCanvas, 0, 0, 100, 100);

document.body.appendChild(myCanvas);
document.body.appendChild(seCanvas);

之后，您可以简单地使用这个新的 canvas.

继续该过程

Answer 3

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

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

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

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

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

Answer 4

好的，感谢您的建议，我终于找到了一个非常适合的解决方案（根据 Cédric Hartlands 的提示）。 viewbox 属性是我的代码中完全缺失的部分。 viewbox 定义如下：

viewbox = "x y width height"

所以要放大 <svg> 和其中的所有元素，有必要确保视图框的 width 和 height 与新的宽度和高度完全匹配<svg> 元素的：

//original version
<svg> width="100" height="100" viewbox="0 0 100 100" preserveAspectRatio="xMinYMin meet"</svg>

//scaled up version
<svg> width="200" height="200" viewbox="0 0 200 200" preserveAspectRatio="xMinYMin meet"</svg>

如果我将放大的 svg 转换为 canvas，它适合整个图像而不会损失任何质量（无论如何这是矢量图形的最大好处）。不敢相信我花了这么长时间才得到它。

Jquery：将 SVG 转换为具有新尺寸的 PNG

Jquery: convert SVG to PNG with new size

javascript

jquery

svg

canvg