html div保存png图片,纯JS实现将DIV中的内容转化为PNG图片

//1.将div转成svg

var data = "data:image/svg+xml," +

"" +

"" +

"

"" +

"";

var img = new Image();

img.src = data;

document.getElementsByTagName('body')[0].appendChild(img);

//2.svg转成canvas

var canvas = document.createElement('canvas');  //准备空画布

canvas.width = img.width;

canvas.height = img.height;

var context = canvas.getContext('2d');  //取得画布的2d绘图上下文

context.drawImage(img, 0, 0);

var a = document.createElement('a');

a.href = canvas.toDataURL('image/png');  //将画布内的信息导出为png图片数据

a.download = "MapByMathArtSys";  //设定下载名称

//3. 图片导出为 png 格式

var type = 'png';

var imgData = canvas.toDataURL(type);

/**