下载canvas里面的图片

一、手动下载

1.浏览器  ---->  F12进入开发者模式  ----> 进入控制台（Console）

2.写入js代码

var canvas = document.getElementById("pdf-1");//获取canvas 对象
var img = canvas.toDataURL("image/png");//转换城图片的流
console.log(img)//控制台输出

3.将控制台输出的数据，复制，粘贴到浏览器，回车，即可出现图片。右键保存即可。

 

二、自动下载

1.单张下载

var canvas = document.getElementById("pdf-64");
var img    = canvas.toDataURL("image/png");
var url = img;   // 获取图片地址                           
var a = document.createElement('a');    // 创建一个a节点插入的document       
var event = new MouseEvent('click') ;      // 模拟鼠标click点击事件
a.download = 'beautifulGirl'          // 设置a节点的download属性值
a.href = url;                   // 将图片的src赋值给a节点的href
a.dispatchEvent(event);    // 触发鼠标点击事件

2.循环下载

for (var i=1;i<=6;i++)//设置循环的次数
	{ 
		var x;
		var r=confirm("确认下载第"+i+"张");
		if (r==true){
			var canid = "pdf-"+i//动态的id
			var canvas = document.getElementById(canid);
			var img    = canvas.toDataURL("image/png");
			var url = img;   // 获取图片地址                           
			var a = document.createElement('a');    // 创建一个a节点插入的document       
			var event = new MouseEvent('click') ;      // 模拟鼠标click点击事件
			a.download = 'ppt'+i          // 设置a节点的download属性值(文件名)
			a.href = url;                   // 将图片的src赋值给a节点的href
			a.dispatchEvent(event);    // 触发鼠标点击事件
		}
	}

三、注意

toDataURL('image/png')//默认参数
png不行就使用jpeg

四、下载canvas图片后，生成pdf或者ppt

https://blog.csdn.net/tscaxx/article/details/103315453