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

原创于 2019-06-12 15:13:17 发布 · 2.7k 阅读

1 ·

CC 4.0 BY-SA版权

玩转可视化专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一种将SVG格式图像转换为PNG图片的方法，利用HTML5的Canvas和Blob API，适用于多种现代浏览器，包括Chrome、Firefox以及IE9以上版本。通过示例代码展示了如何实现这一转换过程。

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

source = '<?xml version="1.0" standalone="no"?>\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);
}
}

啥也不说直接上代码咯~