html5截图及下载

1.页面引入<script src="<%=path %>/resources/js/html2canvas/html2canvas.min.js"></script>
<script type="text/javascript">
$(document).ready( function(){
// $("#example").on("click", function(event){  });写入click事件中
            //event.preventDefault();  //取消事件的默认动作   ie不支持
            html2canvas($("#scoreTanle")[0], {
            allowTaint: true,
            taintTest: false,
            onrendered: function(canvas) {
                canvas.id = "mycanvas";
                //document.body.appendChild(canvas);
                //生成base64图片数据
                //指定格式，也可不带参数;  
                var dataUrl = canvas.toDataURL('image/png');  
                //下载图片
                $.post('<%=path%>/downScoreImg',{"imgsURl":dataUrl},function(){});
                //var newImg = document.createElement("img");  
                //newImg.src =  dataUrl;
                //document.body.appendChild(newImg);  //页面拼接图片
            }
        });
});
</script>


2.下载图片后台代码：
@RequestMapping("/downScoreImg")
@ResponseBody
public String downScoreImg(String imgsURl,HttpServletRequest request){
       //对字节数组字符串进行Base64解码并生成图片
       if (imgsURl == null){
           return "fail";
       } //图像数据为空
       BASE64Decoder decoder = new BASE64Decoder();
       try{
        String[] url = imgsURl.split(",");
        String u = url[1];
        //Base64解码
        byte[] buffer = new BASE64Decoder().decodeBuffer(u);
        String path = FileUtils.getWebPath(request);
        File file = new File(path+"/resources/scoreChart/images/stuScore.png");
           //生成图片
           OutputStream out = new FileOutputStream(file);    
           out.write(buffer);
           out.flush();
           out.close();
       } 
       catch (Exception e) 
       {
           e.printStackTrace();
       }
       return "success";
   }