使用Canvas实现截屏

截屏功能是在实现了右键自定义菜单上做的，上篇

需要用到两个js

html2canvas.js和jquery-xxx.js

右键菜单最终如下：

     	
页面派单
     	
截屏派单
     	
刷新
     	
截屏派单下载隐藏域

右键菜单的响应事件：

// 点击menu事件--因该绑定导致第一次点击菜单无效，故注释掉
	 //menu.onclick = function(e) {
		var pd = document.getElementById("pd");
		var jp = document.getElementById("jp");
		var refresh = document.getElementById("refresh");
		var jpdownload = document.getElementById("jpdownload");
		var jphidden = document.getElementById("jphidden");
		pd.onclick = function(e){
			alert("pd");
		}
		refresh.onclick = function(e){
			location.reload();
		};
		// 截屏点击事件
		jp.onclick = function(e){
			// 注意此处参数要使用Body或Div，若整个iframe的则无效
			html2canvas(document.getElementById("mainFrame").contentWindow.document.body,{ 
				allowTaint: true, //允许污染
				taintTest: true, //在渲染前测试图片
				useCORS: true, //使用跨域
			    onrendered:function(canvas){
			    	// 将整个页面图片转成Base64位
			          dataURL =canvas.toDataURL("image/png");
			          console.log(dataURL);
			          // 若要点击下载，要使用，故给截屏属性赋值
			          // 需求是用户点击截屏就开始截屏并自动下载，所以在生成图片并转码赋值后要执行一次点击事件
			          // 但再执行菜单截屏的点击事件会导致该方法进入死循环，故大佬教导，再加一个隐藏的
			          // 即每次点击后将值赋给隐藏的a标签，再执行隐藏的a标签的点击事件，完美解决
			          $('#jphidden').attr( 'href' ,  dataURL ) ;
			          $('#jphidden').attr( 'download' , 'myjobdeer.png' ) ;
			          jphidden.click();
			      },
			      width:320,
			      height:400
			  })
		}
//}

效果

点截屏派单左下角自动下载图片