原文：http://techslides原创内容，盗版必究。转载请注明出处：www.tangshuang.net.com/save-svg-as-an-【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.netimage

SVG超赞，但是有的时候你想把它转换为其【转载请注明来源】【未经授权禁止转载】他的图片格式，比如jpg或png。如果你【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。用d3.js创建了一些图表，你可以提供把著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】这些图表保存为图片格式的选项。网上晃了一【作者：唐霜】【原创不易，请尊重版权】圈，我最后找到了这篇文章《Save SVG as PNG本文版权归作者所有，未经授权不得转载。》。虽然它提供了一种解决问题的还不错的方【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。案，但我还是想把它扩展一下，以提供更多的【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。可选方案。

最开始，我想举个栗子，你用D3创建了一些著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。图，然后想用一个button和一个js函未经授权，禁止复制转载。原创内容，盗版必究。数来实现svg到图片的格式转换。我想你有原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。三种选择来实现这个展示图片的需求：一，直原创内容，盗版必究。未经授权，禁止复制转载。接用svg作为dataurl的img标签【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】，这当然还是一个技术上的svg，没啥区别本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。；二，用html5 canvas把svg【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。转换为png，然后插入一个base64 【原创内容，转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】data到一个img标签；三，把svg转著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】换为png的二进制数据形式，把数据加载到著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。一个blob url，这样你可以在一个i本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.netmg标签内提供一个真实的图片文件。

让我们从一个原创内容，盗版必究。d3的例子转载请注明出处：www.tangshuang.net开始。我稍微改了一下代码，把svg的内容【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】放到一个div而不是body里面，我还加【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。了“保存图片”的按钮，以及前面提到的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，把它转换为ba未经授权，禁止复制转载。【作者：唐霜】se64的dataurl形式，把它黏贴到【本文首发于唐霜的博客】未经授权，禁止复制转载。一个img标签。这个时候它还是一个svg【原创内容，转载请注明出处】【本文首发于唐霜的博客】，我们把它加载到一个真实的图片里面，再把【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。这个图片加载到canvas对象中。这个时【关注微信公众号：wwwtangshuangnet】【转载请注明来源】候，我们可以从canvas抓取png的d【未经授权禁止转载】转载请注明出处：www.tangshuang.netataurl，并且把它插入到页面中的im本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.netg标签上。

现在我们有了一个带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();
 };
});

现在，这个方案已经够酷了，特别是你能通过【原创不易，请尊重版权】【作者：唐霜】编程的形式强制下载图片文件。但是，怎么实【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。现在客户端创建一个真实的图片呢？（译者按【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。：意思是说不需要经过服务端，用户提供一个转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。svg，直接导出一个png。）我们可以用本文作者：唐霜，转载请注明出处。【作者：唐霜】一个blob来保存图片数据，然后把它丢到【原创内容，转载请注明出处】【未经授权禁止转载】一个blob url。我以前在我的文章Drag and Drop Image 本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】Upload to Imgur和未经授权，禁止复制转载。Making Video Screens【本文受版权保护】本文作者：唐霜，转载请注明出处。hots with HTML5中搞定过blobs转换，但是那段代码必须著作权归作者所有，禁止商业用途转载。【作者：唐霜】使用html5的FileReader的相【本文受版权保护】【版权所有】唐霜 www.tangshuang.net关功能，但现在我们只需要把图片数据转换到转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。一个atob【关注微信公众号：wwwtangshuangnet】和本文版权归作者所有，未经授权不得转载。DataView【原创不易，请尊重版权】的二进制格式中。本文作者：唐霜，转载请注明出处。这里【本文首发于唐霜的博客】是我实现的最终效果。本文作者：唐霜，转载请注明出处。

最后，让我们完成一个原创内容，盗版必究。拖拽放入SVG生成PNG图片转换器未经授权，禁止复制转载。，你可以查看这个页面的源代码来查看它是怎【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net样实现的。
【转载请注明来源】【作者：唐霜】 其他参考：【作者：唐霜】

• Save SVG as PNG原创内容，盗版必究。
【原创不易，请尊重版权】未经授权，禁止复制转载。【原创内容，转载请注明出处】【本文受版权保护】
• Canvg本文作者：唐霜，转载请注明出处。
原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。
• SVG Crowbar本文版权归作者所有，未经授权不得转载。 – Chrome特殊标签栏，它能够从h【作者：唐霜】【版权所有】唐霜 www.tangshuang.nettml文档中提取svg元素并且包含它的所著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】有样式，然后下载它们保存为一个svg图片转载请注明出处：www.tangshuang.net原创内容，盗版必究。。
未经授权，禁止复制转载。【本文受版权保护】转载请注明出处：www.tangshuang.net

注：a标签的download属性支持情况【未经授权禁止转载】【原创内容，转载请注明出处】（来自MDN）：

另外，这是我第一次完整的翻译一篇文章，不著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】求翻译精准，但求读者能够准确读懂。如果你【本文首发于唐霜的博客】【版权所有，侵权必究】觉得这篇文章有用，请为你的收获打赏，让我【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。坚持翻译更多好文章。

2017-05-17 18241