无法将具有viewbox属性的svg转换为canvas

时间:2015-04-08 10:47:50

标签: javascript canvas svg

大家好我正在尝试将svg转换为canvas并下载它。这是我的代码: -

    var h=$("#"+chartId).find('svg').height();
    var w=$("#"+chartId).find('svg').width();
    var canvas1 = document.createElement('canvas');
    canvas1.id     = "canvas1";
    canvas1.width  = w;
    canvas1.height = h;
    document.getElementById('pngcon').appendChild(canvas1);

    var html = new XMLSerializer().serializeToString(document.getElementById(chartId).querySelector('svg'));

    var imgsrc = 'data:image/svg+xml;base64,'+ btoa(html);

    var canvas = document.getElementById("canvas1");
    var context = canvas.getContext("2d");
    var canvasdata;
    var image = new Image;
    image.src = imgsrc;
    window.open(imgsrc);
    image.onload = function() {
        context.drawImage(image, 0, 0);
        var data = context.getImageData(0, 0,w , h);
        var compositeOperation = context.globalCompositeOperation;
        context.globalCompositeOperation = "destination-over";
        context.fillStyle = "#FFFFFF";
        context.fillRect(0,0,w,h);
        data = canvas.toDataURL("image/png",1.0);
        canvasdata = data;

        var a = document.createElement("a");
        a.id="imagepng"
        a.download = chartname+".png";
        a.href = canvasdata;
        document.body.appendChild(a);
        document.getElementById("imagepng").click();
        $("#pngcon").html('');

        $("#imagepng").remove();

    };

当svg没有设置viewbox属性时,一切正常,

<svg  id="svg_chart2">
......
......
</svg>

但是当我在svg中添加viewbox属性时,程序停止工作,如下所示:

<svg viewBox="0 0 651 348 " id="svg_chart2">
......
......
</svg>

请帮忙......

0 个答案:

没有答案