d3.js图谱canvas导出为图片保存本地--兼容Chrome、火狐、IE

downloadImg() { // 将当前canvas转换为png图片
var serializer = new XMLSerializer();
var source = serializer.serializeToString(this.svg.node());

source = '\r\n' + source;
var url = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(source);
var image = new Image;
if (this.canvas.msToBlob) {// 兼容IE9+浏览器
image.src = url;
var blob = this.canvas.msToBlob();
window.navigator.msSaveBlob(blob, "graph.jpg");
} else { // chrome、火狐等
image.onload = function() {
this.context.drawImage(image, 0, 0); // 图片要完全loaded后才能draw,否则火狐下的报错'Component is not available'
}
image.src = url;
var a = document.createElement("a");
document.body.appendChild(a);
a.download = "graph.jpg";
a.href = this.canvas.toDataURL("image/jpg");
var evt = new MouseEvent('click', {view: window, bubbles: true, cancelable: true});
a.dispatchEvent(evt);
document.body.removeChild(a);
}
}

啥也不说直接上代码咯~

你可能感兴趣的:(玩转D3)