使用jquery qrcode生成二维码图片分享到朋友圈打印二维码
一、依赖js
1、jquery-3.3.1.min.js : jQuery
2、jquery.qrcode.min.js :生成二维码插件
3、jquery.jqprint-0.3.js:打印插件
二、html 部分代码
<input type="text" id="input" placeholder="请输入二维码内容">
<button id="btnEncode">生成二维码</button>
<button id="btnImage">生成二维码图片</button>
<button id="btnPrint" >打印</button>
<hr />
<div id="code"></div><br>
<hr />
<h2>生成的图片位置</h2>
<img id="image" src="" />
三、js 代码
<script>
$(function() {
//生成二维码
$("#btnEncode").click(function() {
$("#code").empty();
var str = $('#input').val();
str = toUtf8(str);
$("#code").qrcode({
render : "canvas", //table方式
width : 200, //宽度
height : 200, //高度
text : str // 二维码内容
});
});
// 生成二维码图片
$("#btnImage").click(function() {
var canvas = $("canvas")[0];
$("#image").attr('src',canvas.toDataURL());
});
// 打印二维码
$("#btnPrint").click(function(){
$("#image").jqprint({
debug : false,
importCSS : true,
printContainer : true,
operaSupport : false
});
});
//识别中文
function toUtf8(str) {
var out, i, len, c;
out = "";
len = str.length;
for(i = 0; i < len; i++) {
c = str.charCodeAt(i);
if ((c >= 0x0001) && (c <= 0x007F)) {
out += str.charAt(i);
} else if (c > 0x07FF) {
out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));
out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
} else {
out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));
out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
}
}
return out;
}
});
</script>
四、总结
1、该教程是前端使用js生成的二维码,若浏览器禁用js,则功能失效。
2、若要使用长按图片识别二维码,分享到xxx功能,则需要生成二维码图片。
3、java服务端生成二维码图片参考:https://github.com/zxing/zxing
五、源码下载