大家好我正在尝试将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>
请帮忙......