html svg导出图片,将SVG保存为图片_唐霜的博客

原文：http://techslides.com/save-svg-as-an-image

SVG超赞，但是有的时候你想把它转换为其他的图片格式，比如jpg或png。如果你用d3.js创建了一些图表，你可以提供把这些图表保存为图片格式的选项。网上晃了一圈，我最后找到了这篇文章《Save SVG as PNG》。虽然它提供了一种解决问题的还不错的方案，但我还是想把它扩展一下，以提供更多的可选方案。

最开始，我想举个栗子，你用D3创建了一些图，然后想用一个button和一个js函数来实现svg到图片的格式转换。我想你有三种选择来实现这个展示图片的需求：一，直接用svg作为dataurl的img标签，这当然还是一个技术上的svg，没啥区别；二，用html5 canvas把svg转换为png，然后插入一个base64 data到一个img标签；三，把svg转换为png的二进制数据形式，把数据加载到一个blob url，这样你可以在一个img标签内提供一个真实的图片文件。

让我们从一个d3的例子开始。我稍微改了一下代码，把svg的内容放到一个div而不是body里面，我还加了“保存图片”的按钮，以及前面提到的js函数。你可以看这里演示。下面是这个实现的关键代码：

d3.select("#save").on("click", function(){

var html = d3.select("svg")

.attr("version", 1.1)

.attr("xmlns", "http://www.w3.org/2000/svg&