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/

来自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 2

如果svg元素根据其大小定义viewBox属性，则可以通过height和width属性调整SVG文档的大小;例如

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

一旦设置了viewBox，画布中svg的缩放就会在您编码时起作用。

Answer 3

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

＆＃13;

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

＆＃13;

之后，您可以使用这个新画布继续该过程。

Answer 4

好的，感谢您的建议，我终于找到了一个完全适合的解决方案（根据CédricHartlands提示）。 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：使用新大小

4 个答案: