截图/粘贴剪切版图片并自动上传Java版(Servlet/Spring)

客户需求：QQ截图工具等截图后直接粘贴在网页上传，省去另存后再上传的步骤。

google搜索之发现一js库可支持访问剪切版粘贴图片：https://github.com/layerssss/paste.js

在此基础上写Java Servlet版Demo.

paste.js的使用参照github的demo即可。

  $('.demo').on('pasteImage', function(ev, data){
        var blobUrl = URL.createObjectURL(data.blob);
        var name = data.name != null ? ', name: ' + data.name : '';
        $('<div >图片大小: ' + data.width + ' x ' + data.height + name + '<img src="' + data.dataURL +'" width="'+ data.width +'" height="'+ data.height +'">'  + '</div>').insertAfter(this);
           
      }).on('pasteImageError', function(ev, data){
        alert('Oops: ' + data.message);
        if(data.url){
          alert('But we got its url anyway:' + data.url)
        }
      }).on('pasteText', function(ev, data){
        $('<div class="result"></div>').text('text: "' + data.text + '"').insertAfter(this);
      }).on('pasteTextRich', function(ev, data){
        $('<div class="result"></div>').text('rtf: "' + data.text + '"').insertAfter(this);
      }).on('pasteTextHtml', function(ev, data){
        $('<div class="result"></div>').text('html: "' + data.text + '"').insertAfter(this);
      });
    });

有两种数据可传入后台写入图片，一是data.dataURL 二是data.blob。

其中data.dataURL返回的是base64编码的数据，如图。

将此数据传入台后解码后，写入文件就是截图的图片文件了。

而data.blob返回是的二进制流，用此数据也可进行保存图片。

对于自动保存可用HTML5的FormData进行提交。

var form = new FormData();
form.append("imgdata",data.dataURL);
form.append("imageupload", data.blob);
form.append("type","1");
var xhr = new XMLHttpRequest(); 
xhr.open("POST", "${pageContext.request.contextPath}/servlet/imgsave",true);
xhr.send(form); 

由于HTML5 FormData发送的是一个multipart/form-data请求。而Servlet的 request.getParameter()默认识别的是pplication/x-www-form-urlencoded 请求。所以Servlet类一定要加上注解@MultipartConfig,这样通过request.getParameter()就可以拿到值。

如果用第一种方式也可用XMLHttpRequest发送数据

var xhr = new XMLHttpRequest(); 
var data = "imgdata="+data.dataURL+"&type=2";
xhr.open("POST", "${pageContext.request.contextPath}/servlet/imgsave",true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send(data)

针对不同的提交方式后台可进行不同处理

if(Integer.parseInt(request.getParameter("type")) == 1)
{
  //1.字符方式
  String imgdata = request.getParameter("imgdata");
  String base64 = imgdata.split("base64,")[1];
  byte data[] =  Base64.decodeBase64(base64);
  imageProcess(data,"c:/a.png");
}
//2.处理文件流方式
Part part = request.getPart("imageupload");
InputStream is = part.getInputStream();
imageProcess(is,"c:/b.png"); 	

对于Spring可以直接用

@RequestParam("imageupload") MultipartFile imageupload

接收文件流。

至此，截图粘贴剪切版图片自动上传就实现了。Demo示例图:

Servlet版Demo下载