留着自己看---自动截图并上传到后台

$("#htmlTopdf").click(function(){
console.log("%c开始导出....","color:red");
html2canvas(document.getElementById("contents"),{
width:1240,
height:13000,
onrendered:function(canvas){
//通过html2canvas将html渲染成canvas，然后获取图片数据
var imgData = canvas.toDataURL('image/jpeg');
var datas=imgData;
//由于生成的图形数据太多拆分成两部分
//let len= imgData.length;
//data1=imgData.substring(0,len/2+1);
// data2=imgData.substring(len/2+1,len);
// data={data:data1,data2:data2};
//发送异步请求将数据到后台处理
console.log("%c上传...","color:yellow");
//console.log(datas);
$.post(
"/statistical/upLoadImage.do",
{file:imgData},
function(data){
console.log("%c上传成功了...","color:green");
}
);
 var saveFile = function (data, filename) {
                      var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
                      save_link.href = data;
                      save_link.download = filename;
                      var event = document.createEvent('MouseEvents');
                      event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
                      save_link.dispatchEvent(event);
                  };
                  //saveFile(imgData,"test.png");
// saveFile(imgData, "图片2.png");
//初始化pdf，设置相应格式
var doc = new jsPDF("p", "mm", "a4");


//这里设置的是a4纸张尺寸
//doc.addImage(imgData, 'JPEG', 0, 0,210,297);
doc.addImage(imgData, 'JPEG', 0, 0,210,500);


//输出保存命名为content的pdf
//doc.save('content.pdf');
console.log("导出结束");
}
})
});

})

后台需要解析base64的图片格式====================

public String getImageDataUrl(HttpServletRequest request,String file){
    String serverPath = request.getSession().getServletContext()  
               .getRealPath("/");  
       Base64 base64 = new Base64();  
 System.out.println("file"+file);
//  data="16:43:35.421 data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/2wBDAQMDAwQDBAgEBAgQCwkLEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBD/wAARCDYABVYDAREAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD8qqACgAoAKACgAoA/qooAranxpt3/ANcJP/QTQBx1rp8NxAszs4LZyARjr9KAJf7Jtv78n5j/AAoAP7Jtv78n5j/CgA/sm2/vyfmP8KAD+ybb+/J+Y/woAP7Jtv78n5j/AAoAP7Jtv78n5j/Cg[…] 1 to_Statistical.do:211:9
//";
     //注意点：实际的图片数据是从 data:image/jpeg;base64, 后开始的  
       try{
        byte[] k = base64.decode(file.substring("data:image/jpeg;base64,".length()).getBytes());  
           InputStream is = new ByteArrayInputStream(k);  
           String fileName = UUID.randomUUID().toString();  
           String imgFilePath = serverPath + "\\static\\img\\" + fileName + ".jpg";
           //将图片写入文件夹
           double ratio = 1.0;  
           BufferedImage image = ImageIO.read(is);  
           int newWidth = (int) (image.getWidth() * ratio);  
           int newHeight = (int) (image.getHeight() * ratio);  
           Image newimage = image.getScaledInstance(newWidth, newHeight,  
           Image.SCALE_SMOOTH);  
           BufferedImage tag = new BufferedImage(newWidth, newHeight,  
                   BufferedImage.TYPE_INT_RGB);  
           Graphics g = tag.getGraphics();  
           g.drawImage(newimage, 0, 0, null);  
           g.dispose();  
           ImageIO.write(tag, "jpg", new File(imgFilePath));
       }catch(Exception e){
        e.printStackTrace();
       }
        return "上传成功";
     }