将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")
 .node().parentNode.innerHTML;

 //console.log(html);
 var imgsrc = 'data:image/svg+xml;base64,'+ btoa(html);
 var img = '<img src="'+imgsrc+'">'; 
 d3.select("#svgdataurl").html(img);
});

我们抓取d3生成的svg,把它转换为base64的dataurl形式,把它黏贴到一个img标签。这个时候它还是一个svg,我们把它加载到一个真实的图片里面,再把这个图片加载到canvas对象中。这个时候,我们可以从canvas抓取png的dataurl,并且把它插入到页面中的img标签上。

现在我们有了一个带base64加密的图片数据资源的真实的png图片了。再用HTML5 link download attribute,我们就可以以编程的方式强制浏览器下载这个图片。这里就是最终的实现。来看看核心代码:

d3.select("#save").on("click", function(){
 var html = d3.select("svg")
 .attr("version", 1.1)
 .attr("xmlns", "http://www.w3.org/2000/svg")
 .node().parentNode.innerHTML;

 var imgsrc = 'data:image/svg+xml;base64,'+ btoa(html);
 var img = '<img src="'+imgsrc+'">'; 
 d3.select("#svgdataurl").html(img);

 // 上面和前面的实现是一样的
 var canvas = document.querySelector("canvas"),
 context = canvas.getContext("2d");

 var image = new Image;
 image.src = imgsrc;
 image.onload = function() {
   context.drawImage(image, 0, 0);

   var canvasdata = canvas.toDataURL("image/png");

   var pngimg = '<img src="'+canvasdata+'">'; 
   d3.select("#pngdataurl").html(pngimg);

   var a = document.createElement("a");
   a.download = "sample.png";
   a.href = canvasdata;
   document.body.appendChild(a);
   a.click();
 };

});

现在,这个方案已经够酷了,特别是你能通过编程的形式强制下载图片文件。但是,怎么实现在客户端创建一个真实的图片呢?(译者按:意思是说不需要经过服务端,用户提供一个svg,直接导出一个png。)我们可以用一个blob来保存图片数据,然后把它丢到一个blob url。我以前在我的文章Drag and Drop Image Upload to ImgurMaking Video Screenshots with HTML5中搞定过blobs转换,但是那段代码必须使用html5的FileReader的相关功能,但现在我们只需要把图片数据转换到一个atobDataView的二进制格式中。这里是我实现的最终效果。

最后,让我们完成一个拖拽放入SVG生成PNG图片转换器,你可以查看这个页面的源代码来查看它是怎样实现的。

其他参考:

  • Save SVG as PNG
  • Canvg
  • SVG Crowbar – Chrome特殊标签栏,它能够从html文档中提取svg元素并且包含它的所有样式,然后下载它们保存为一个svg图片。

注:a标签的download属性支持情况(来自MDN):

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
download 14 (Yes) 20.0 (20.0) Edge 13 15 10.1

另外,这是我第一次完整的翻译一篇文章,不求翻译精准,但求读者能够准确读懂。如果你觉得这篇文章有用,请为你的收获打赏,让我坚持翻译更多好文章。

2017-05-17

已有1条评论
  1. […] 在《将SVG保存为图片[译]》一文中介绍了一种将svg保存为图片保存到本地的一种方案。但是这篇文章里面,还存在一个问题,它使用了a标签的download属性。这个属性并不能支持版本较低(9)的IE。本文更进一层,不仅导出svg,连html也可以导出保存的方案。 […]