将页面转换为canvas导出为图片

思路

需要将dom对象在重绘，然后调用.（）将数据转换为的data url,可以直接导出图片。

但是Dom对象不能直接在中绘制，需要先将dom文本转换图片地址，然后在图片加载时将其内容绘制在上。

一种快捷的方式是将dom文本内嵌在svg对象中，再将svg对象转换为xml/svg data url,这个地址可以作为图片对象的地址直接在页面中展示。

如图所示，一个svg文本可以作为url的内容在浏览器中展示一张图片

svg内容如下：

需要注意的是，svg对象下可以直接放置svg对象，也可以放非svg对象，如div p h1等等，但是需要作为的子集，否者不会展示内容

在dom文本转换为xml/svg url过程中需要对一些特殊字符做转义，否者地址失效

svg 的第一个svg必须要有命名空间，否者以xml形式显示,当然就不能作为图片地址了

该xml/svg data url可以作为img对象的地址，在页面内展示图片，如图所示

下载这张矢量图片

只需添加一个超链接，指定为图片地址，点击超链接，即可下载该图片

需要注意的是，xml/svg data url不能作为下载地址，需要将其转换为地址

一种简单的方法是将xml/svg data url 作为地址的img对象绘制在上，然后调用.(),即可获得

data:image/png;,HGUVx/YQY+SRt//+//+EqP/ERIm/++/+//+/+/++/+i++/D+/+O//ngx9+/P2++ux+//+///LD+/+/tl/+L+a92W+//8k/+Y4t//zWt+Ju+//+++1Q///+vkg///wiV5g+///+/+//k01Tx///+//++/JOB+/yVuY/+/c++Sf5/RnXA/+/Sl/MO////

点击超链接下载为Png图像，自带透明背景