喜欢原生的js,用到ajax的时候觉得原生的不太好用,于是引入了JQ库;
<input type="submit" id="sub" value="生成二维码">
<div id="qrcode" style="display: none;"></div>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
$("#sub").click(function(){
alert(urlcode+"00000"+qrcodename);
var img = document.getElementById('qrcode').getElementsByTagName('img')[0];
// 构建画布
var canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
canvas.getContext('2d').drawImage(img, 0, 0);
// 构造url
url = canvas.toDataURL('image/png');
$.ajax({
type:"get",
url:"/wx/qrcode.jsp",
dataType:"json",
data:{
url:url,
qrcodename:qrcodename
},
success:function(obj){
console.log(obj)
}
});
test();
});
做的是一个把前端JS插件生成的二维码的数据传到后台生成图片,当form表单提交时,页面会进行跳转,于是就想到ajax,以前做go彩票爬虫开发的时候用过,照着模板写没有太多的研究,这次大概了解了一下。
在开头引入了http://code.jquery.com/jquery-latest.js的JQ库
JQ的ajax简洁明了。url后台处理的地址,data声明成json的格式传值
后台的jsp页面只需要request.getParameter("url");就能够获取到对应的值
用的开源的js插件生成了data:image/png;base64的二维码数据,canvas.toDataURL可以把数据取出来传给后台,
JAVA有解码这种数据并生成图片的方法,需要注意的是后台取得的数据要去掉头部
byte[] b = decoder.decodeBuffer(imgStr.replace("data:image/png;base64,",""));
String imgFilePath = "/home/web/web/"+qrcodename+".jpg";//新生成的图片
OutputStream out = new FileOutputStream(imgFilePath);
out.write(b);
out.flush();
out.close();