客户需求: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示例图: