html2canvas实现页面截屏功能

html2canvas实现页面截屏功能

原理是将需要生成截屏的HTML结构写入Canvas里面，利用Canvas生成页面截图，在浏览器不支持Canvas的情况下，将采用Flashcanvas或ExplorerCanvas技术代替实现

			//以vue为例
			let that = this;
			//由于业务需求是进入页面就要生成截图  所以利用setTimeOut等待页面加载完成时在进行截图
            setTimeout(() => { //等待页面渲染完成
                //   event.preventDefault();
                var createCanvas = document.createElement("canvas");
                //获取需要生成截图的DOM结构
                let Nodes = document.getElementById('Node');
                //获取DOM的width，height
                var w = parseInt(window.getComputedStyle(Nodes).width);
                var h = parseInt(window.getComputedStyle(Nodes).height);
                //设置canvas画布
                createCanvas.width = w;
                createCanvas.height = h;
                createCanvas.style.width = w + "px";
                createCanvas.style.height = h + "px";
                //可以按照自己的需求，对context的参数修改,translate指的是偏移量  
                //  var context = canvas.getContext("2d");  
                //  context.translate(0,0);  
                var context = createCanvas.getContext("2d");
                context.scale(2, 2);
                html2canvas(document.getElementById('Node'), {
                	//关键配置  页面过长会出现白屏情况
                    canvas: createCanvas,
                    useCORS: true, //（图片跨域相关）
                    allowTaint: false, //允许跨域（图片跨域相关）
                    taintTest: true, //是否在渲染前测试图片
                    width:window.screen.availWidth,     //显示的canvas窗口的宽度
                    height:window.screen.availHeight,    //显示的canvas窗口的高度
                    windowWidth:document.body.scrollWidth,   // 获取X轴方向滚动条中的内容
                    windowHeight:document.body.scrollHeight,   // 获取Y轴方向滚动条中的内容
                    x:0,   // 页面在X轴上没有滚动，故设为0
                    // y:window.pageYOffset,   // 页面在垂直方向的滚动距离
                    y:80,

                }).then(function (canvas) {
                	//canvas.toDataURL 把画布上的绘制内容以一个 data URI 的格式返回
                	// 第一个个参数  图片格式  第二个参数  图片质量  取值范围是 0 ~ 1 越大质量最好
                    var imgUrl = canvas.toDataURL("image/jpeg", 1);
                    console.log(imgUrl)//生成图片的Bash64路径
                });
            },1000)

下载生成的截图

	  //浏览器  利用a标签实现下载   简单粗暴 
	  const a = document.createElement("a");
      a.href = dataImg.src;
      a.download = "imgUrl";
      download.click();
      
	  // 移动端实现下载就比较麻烦   项目是采用混合开发的模式  
	  // 所以我就偷了个懒  直接让壳子给我提供下载图片保存到相册
	  // 我只负责简单的与壳子交互就OK了
		
	  //交互方法  把生成的Base64图片路径给壳子
	  YouJueManager.getInstance().sendYouJueSaveBase64ImageMessage(imgUrl);