saveSvgAsPng 将svg转换为图片

曾经有很多次萌发这样的想法，如果有这么一个功能，可以通过调用某个标签里代码，将这些代码在网页中展现的效果保存为图片，那将是多么酷的事。这篇文章介绍一个将页面svg转换为图片的js库—saveSvgAsPng，这个库只有4kb大小，另外通过此库保存的图片不仅仅局限于png格式，你可以通过调用它的函数来设置其他的图片格式。

首先来看下具体的demo吧： saveSvgAsPng应用实例

如何使用它

首先我们需要引入saveSvgAsPng.js，如果只是想下载图片的话，你可以在页面里调用以下函数，它包含三个参数：svg元素、下载的文件名以及下载图片的尺寸比例。

saveSvgAsPng(document.getElementById("diagram"), "diagram.png", 3);

当然，你也可以通过获取做处理后svg的dataURI，它也有三个参数：svg元素、下载图片的尺寸比例以及一个回调函数，回调函数的参数即为图片的地址：

svgAsDataUri(document.getElementById("diagram"), 1, function(uri) {
　　　//...
});

核心代码及原理

其实说来，svg是不能直接转化为图片，必须经过canvas做中间处理，而令人兴奋是canvas是可以直接转换为图片。于是我们可以先将svg的代码转换为字符串，再作为 URI 组件进行编码，然后把编码结果作为图片的src，再加载图片，然后使用canvas渲染这个图片，最后把canvas转换为图片。

var mySvg = document.querySelector(".mysvg");
    svgCon = mySvg.outerHTML,
    uri = 'data:image/svg+xml;base64,' + window.btoa(unescape(encodeURIComponent(svgCon))),
    image = new Image();
image.src = uri ;

把canvas转换为图片

如你所知，canvas是可以直接渲染图片，建立2d环境，然后使用drawImage传入图片对象即可。而得到图片的data URI只是它的一个反过程而已，这里借助了toDataURL(‘image/png’)函数，它是canvas的一个方法，目的是将当前canvas的内容转化为图片数据。两种过程分别如下：

将图片渲染到canvas中：

image.onload=function(){
　　var canvas = document.createElement('canvas');
　　canvas.width = image.width;
　　canvas.height = image.height;
　　var context = canvas.getContext('2d');
　　context.drawImage(image, 0, 0);
}

从canvas中获取图片的data URI

需要说明的是，这样一个地址不是.jpeg、.gif或者png格式的，而是base64格式。我们把这个地址作为一个a标签的链接，并给a标签加入download属性，这是一个html5属性，属性值为下载文件名，这样它就具有被下载的特性。最后将a标签插入到页面，触发点击事件，完成图片下载！

mage.onload=function(){

　　...// 图片渲染到canvas

　　var imgDataUri = canvas.toDataURL('image/png');
　　var a = document.createElement('a');
　　a.download = "image.png";
　　a.href = imgDataUri;
　　document.body.appendChild(a);
　　a.click();
}

因为函数中用到的大部分内容都是一些html5属性和方法，因此saveSvgAsPng这个库不能支持低版本的IE浏览器。

saveSvgAsPng 将svg转换为图片

如何使用它

核心代码及原理

参考