$("#SaveImage").click(function(){
//将svg转换成canvas
var svg=$("#map_layers").html().trim();
var content=$("#map_layers").find("svg").html().trim();
$("#map_gc").find("image").each(function(){
content=content.replace($(this).prop("outerHTML"),"");
});
var regex = /<svg(S*?)[^>]*>/;
var arr = svg.match(regex);
svg=arr[0]+content+"</svg>";
canvg('canvasSvg', svg);
html2canvas($("#map"), {
onrendered: function(canvas) {
var canvas2 = $("#canvasSvg");
canvas.getContext("2d").drawImage(canvas2[0],0,0,$("#map").width(),$("#map").height());
$("#map_gc").find("image").each(function(){
var obj=$(this);
var x=$(this).attr("x");
var y=$(this).attr("y");
var width=$(this).attr("width");
var height=$(this).attr("height");
if(width==8){
canvas.getContext("2d").drawImage(obj[0],x,y,width,height);
}else{
canvas.getContext("2d").drawImage(obj[0],x,y-1-height/2,width,height);
}
});
var link = document.createElement('a');
link.href=canvas.toDataURL();
link.download="保存结果.png";
link.click();
}
});
});
通过F12看到要保存的图，map对象中包含的svg中含有image标签，对于image标签需要在canvas中重新绘制，方法如上，就可以保存成对应的图片了，找了好久，记录一下，不过使用的地图是切片，这个保存还是存在跨域问题，如果哪位前辈有方法，分享一下啊~~~~
