【签名】点击按钮弹出签名框,保存成图片,并显示出来

js实现点击按钮弹出签名框(不一定在最下面弹出！)

使用app.js和signature_pad.js生成签名框和保存成图片，此处都是在body的最底部生成img标签：

function download2(dataURL, filename) {
	 // var blob = dataURLToBlob(dataURL);
	 // var url = window.URL.createObjectURL(blob);
	  var img = document.createElement("img");
	  img.src = dataURL;
	  img.id = "imgid";

	  var v = document.getElementById("imgid");
      if(v != null){
 		document.body.removeChild(v);
 	  }
      document.body.appendChild(img);	
 	  //document.getElementById("imgid").src="dataURL";
	  // document.body.removeChild(img);
	  document.getElementById('signature-pad').style.display='none';
  
	}

使用Ajax formdata传送数据，转成了blob格式，后台blob转byte[]存储进数据库

后台存储：

@RequestMapping("jpgsave")		
	public @ResponseBody Map<String,Object> jpgsave(@RequestParam("blob") MultipartFile[] submissions,UUser user) throws IOException{
		
		Map<String, Object> resultMap = new LinkedHashMap<String, Object>();
	       
		if(submissions.length > 0)
		{
			MultipartFile file = submissions[0];
			if (file != null) {  
                file.transferTo(new File("C://aaa.jpeg"));// 
                //
                byte[] images = file.getBytes();                     
                Imgsave imgsave = new Imgsave();
                imgsave.setUsername(user.getNickname());
                imgsave.setLongblob(images);
                imgsaveMapper.insert(imgsave);
            }  
		}
	        return resultMap;
	}

前台显示：

<img id="img" th:src="@{showimg?nickname={nickname}(nickname=${user.nickname})}  "  alt="">

现使用base64转码方式，存储进数据库之后，存储其他数据的时候进行转换

@RequestMapping("editsave")		
	public String editsave(UUser user,Model model){
		
		String password = String.valueOf(user.getPswd());	
		String pawDES = MyDES.encryptBasedDes(password);
		user.setPswd(pawDES);
		UUserExample emailexa = new UUserExample();
		emailexa.createCriteria().andIdEqualTo(user.getId());
		umaper.updateByExampleSelective(user, emailexa);
		
		//session
		model.addAttribute("user", SecurityUtils.getSubject().getPrincipal());
		
		Imgsave imgsave = imgsaveMapper.selectByPrimaryKey(user.getNickname());
        
        byte[] databyte = imgsave.getLongblob();
		
        String data = Base64.encodeBase64String(databyte); 
        System.out.println("@@"+data);
        model.addAttribute("data",data);
		
		return "editsuccess";
	}

不需要再次调用后台方法请求图片，利用返回过来的data数据直接显示：

<img th:src="@{data:image/jpeg|png|gif;base64,{data}(data=${data})}"/>

或者字符串拼接方式：

<img th:src="@{'data:image/jpeg|png|gif;base64,'+${data}}"/>

生成img标签应该是任意位置，于js略做修整

function download2(dataURL, filename) {
	 // var blob = dataURLToBlob(dataURL);
	 // var url = window.URL.createObjectURL(blob);
	  var img = document.createElement("img");
	  img.src = dataURL;
	  img.id = "imgid";
	  var div1=document.getElementById('div1');

	  while(div1.hasChildNodes())
	    {
	        div1.removeChild(div1.firstChild);
	    } 
      div1.appendChild(img);
	  document.getElementById('signature-pad').style.display='none';
  
	}