利用html2canvas.js截取当前HTML为图片并保存下载

html2canvas.js官网：http://html2canvas.hertzen.com/

1.前期准备

利用 html2canvas.js文件，如果没有则可点击下载：https://download.csdn.net/download/mufeng633/11159717

实现原理：
利用html2canvas.js文件，将渲染的html进行局部截图生成图片的Base64码，之后，可以在后台通过解析Base64 获取到图片。

实现方法有如下两种：
第一种.

  语法如下：
        html2canvas(document.getElementById('id'))
            .then(function(canvas){
                document.body.appendChild(canvas);
            });
            
   实现如下         
      html2canvas($("#CCCCC"), {
             width: 400,   //这是我写死的 宽 高 度
             height: 220,
             useCORS:true,
             onrendered: function(canvas) {
                 gdzherf = canvas.toDataURL();
                 gdzherf = gdzherf.replace(/\s/g,"+");
                 console.log(gdzherf);
             },
         }).then(function(){
             //下载文件
             $.ajax({
                 type:'post',
                 url: $.contextPath+'/signet-management!downloadGdz.json',
                 data:{"gdzherf":encodeURI(encodeURI(gdzherf)),"id":id},
                 dataType : 'json',
                 success:function(data){
                 }
             });
         });

第二种.

html2canvas(document.getElementById("id"), {
  useCORS: true, //是否跨域
  background: "red", //背景
  height: $("#id").outerHeight() + 20,
  width: $("#id").outerWidth() + 20  ,
  onrendered: function (canvas) {
    url = canvas.toDataURL('image/jpeg', 1.0); //将图片转为base64, 0-1 表示清晰度。默认为 image/png 
  }
});

---

前端代码：

1.先创建一个待截图的HTML。

    <div id="container2"  style="color: #FF0000;display: inline-block; width: 300px;height: 120px" >
        <div class="text">&nbsp;&nbsp;&nbsp;此<span  class="sp">&nbsp;</span>页复印于我馆 </div>
        <div class="text">
            <div class="qq"> 全宗<span id="FONDS_CODE" class="sp" style="display:block"></span>
                目录<span id="CATALOGUE_NO" class="sp"></span>
                &nbsp;案卷 <span id="FOLDER_NO" class="sp"></span>
                第<span id="PAGE_NO" class="sp"></span>页
            </div>
        </div>
        <div class="text date">
            上海市xxxx档案证明专用章
        </div>
        <div class="date">
            <span id="year"></span>年<span id="month"></span>月<span id="day"></span>日
        </div>
    </div>

2.当点击时，获取到div的id，利用html2canvas.js中的 html2canvas 方法进行截图

    function turnExcel() {
        var gdzherf = '';
        html2canvas(document.getElementById("container2"),{
            useCORS:true, //是否跨域
            height: $("#container2").outerHeight() + 20,
            width: $("#container2").outerWidth() + 20  ,
            onrendered : function (canvas) {
				//获取Base64码 默认为 image/png 格式
                gdzherf  = canvas.toDataURL();
                //防止后台获取到空格
                gdzherf = gdzherf.replace(/\s/g,"+");
                $.ajax({
                    type    :   "post",
                    url     :   "${basePath}moduleFile/downloadCanvas?gdzherf="+encodeURIComponent(encodeURIComponent(gdzherf)),
                    dataType    :   "json",
                    success     :   function (data) {
						alert("保存完成");
                    }
                })
            }
        })
    };

后端实现

    @RequestMapping(value = "downloadCanvas")
    public void download(HttpServletRequest request) throws IOException {
    	String gdzherf = request.getParameter("gdzherf");   // Base64码
	    gdzherf = java.net.URLDecoder.decode(gdzherf);   //解码
	    gdzherf=gdzherf.replace("data:image/png;base64,","");//替换生成的前缀
	    BASE64Decoder decoder = new BASE64Decoder();
	    byte[] bs = decoder.decodeBuffer(gdzherf);//解密
	    //生成到目标路径
	    for(int k=0;k<bs.length;++k){
		    if(bs[k]<0){
			    bs[k]+=256;
		     }
	    }
	    String path = "C:\\Users\\Cc\\Desktop\\对比gc\\我的.png";
	    OutputStream out = out = new FileOutputStream(path);
	    out.write(bs);
	    out.flush();
	    out.close();

		//等比例缩小。  可以不看
	    BufferedInputStream in = new BufferedInputStream(new FileInputStream("C:\\Users\\Cc\\Desktop\\对比gc\\妮妮2.png"));
	    Image bi = ImageIO.read(in);
	    int height=bi.getHeight(null);
	    int width =bi.getWidth(null);
	    BufferedImage tag = new BufferedImage(width / 3, height / 3, BufferedImage.TYPE_4BYTE_ABGR_PRE);
	    tag.getGraphics().drawImage(bi, 0, 0,width / 3, height / 3, null);
	    BufferedOutputStream out2 = new BufferedOutputStream(new FileOutputStream("C:\\Users\\Cc\\Desktop\\对比gc\\333.png"));
	    ImageIO.write(tag, "PNG",out2);
	    in.close();
	    out2.close();
	    
    }

补充：

1.因为使用该工具不能截图css属性为 display:none 的div. 所以将css设置属性为 z-index:-1；层级下沉，完美解决。
2.如果，前端生成的图片Base64码，通过在线Base64转图片是我们预期想要的结果，但是通过咱们的代码进行转换，图片不是我们预期的结果，猜测是因为在传递参数中，参数不一致导致的。解决方式如下几种：

1.在前端通过替换空格。直接传递该参数。如
gdzherf = gdzherf.replace(/\s/g,"+");

2.在前端处理参数，将处理过的参数，传递到后端：如：

data:{"gdzherf":encodeURI(encodeURI(gdzherf))},   
或  
encodeURIComponent(encodeURIComponent(gdzherf)),

3.通过传递处理过的参数，在后台需进行解码：

gdzherf = java.net.URLDecoder.decode(gdzherf);

到此，完成。