使用原生JavaScript代码将HTML保存为图片

背景

有朋友了解了我上篇svg绘制中国象棋棋盘后，想要将其使用代码保存下来，正好今天有时间，顺便给大家介绍一下我的解决方案。

代码

	

		
My first SVG

		
		

		Svg保存
		Jpeg保存
		Png保存
	

解析

svg标签内代码从菜鸟教程第一课中拷贝而来。

svg直接下载方案：将其转为base64码，自建a标签并模拟点击进行下载

svg转jpeg或png再下载方案：将其转为base64码后，自建img标签并设置src为base64码，为img标签加载事件添加处理函数，函数内容为：将img图片绘制到一个自建canvas标签中，并转为jpeg或png的base64码，再自建a标签并模拟点击进行下载

有兴趣深入了解的小伙伴请重点学习 encodeURIComponent、unescape、btoa这三个函数，其使用方法和细节这里不展开赘述。