java 将页面指定区域截图并上传到服务器

2018-07-17 03:58:05来源：博客园阅读 ()

controller层：

　　/**
     * 上传获取到的收据图片
     * @param request
     * @param data 获取到的图片
     * @return
　　　*/
    @RequestMapping(value = "/saveImg", method = { RequestMethod.POST })
    @ResponseBody
    public String saveImg(HttpServletRequest request, String data) {
        String serverPath = request.getSession().getServletContext().getRealPath("/");  
        Base64 base64 = new Base64();
        try {
            byte[] k = base64.decode(data.substring("data:image/png;base64,".length()));  
            InputStream is = new ByteArrayInputStream(k);  
            String fileName = UUID.randomUUID().toString();//保存的图片名称
            String date = new SimpleDateFormat("yyyyMM").format(new Date());
            String imgFilePath = serverPath + "服务器图片地址"+date+"/"+ fileName + ".jpg";  
            BufferedImage image = ImageIO.read(is);  
            BufferedImage tag = new BufferedImage(image.getWidth(), image.getHeight(), BufferedImage.TYPE_INT_RGB);  
            Graphics g = tag.getGraphics();  
            g.drawImage(image, 0, 0, null);  
            g.dispose();  
            ImageIO.write(tag, "jpg", new File(imgFilePath)); 
            return fileName;
        } catch (Exception e) {
            e.printStackTrace(); 
        }
        return null;
    }

JavaScript代码：

function save(){
  html2canvas($("#div1"),{ // 要截图生成图片的区域
        onrendered:function(canvas){
             var  myImage =canvas.toDataURL("image/png");
             $.ajax({  
                type : "POST",  
                url : 'saveImg.jhtml',  
                data : {data:myImage},  
                timeout : 60000,  
                success : function(data){
                    alert("操作成功");
                }  
             });  
          },
          width:1000,
          height:530
      })
 }