使用qrcode输入信息生成二维码包含二维码说明信息，点击转化为图片并下载
说明：输入汉字和数字都可以识别并展示
<body>
<h2 id="h2">二维码生成</h2>
<br>
<span id="span"></span>
<p id="p"></p>
<br><br><br>
<div style="margin:20px 0;width: 90%;height: 400px;margin: auto">
<div class="easyui-panel" style="margin-top: 5px; height: 100%;border:hidden">
名称：<input type="text" name="textbox1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; height: 22px; line-height: 22px; width: 140.4px;"> 功能位号：
<input type="text" name="textbox2" placeholder="普通输入框"> 资产号：
<input type="text" name="textbox3" placeholder="普通输入框">
<!-- 设备号：<input type="text" name="textbox4" placeholder="普通输入框"> -->
<button type="button" onclick="print()">点击生成</button>
</div>
</div>
</body>
<script>
function print() {
var textbox1 = $('input[name="textbox1"]').val();
var textbox2 = $('input[name="textbox2"]').val();
var textbox3 = $('input[name="textbox3"]').val();
if(!textbox1) {
alert("待生成的页面不能为空");
} else {
var symHref = 'final.html?id=' + textbox1 + "?nsme=" + textbox2 + '?ns=' + textbox3;
window.open(symHref);
}
}
</script>
//获取参数，生成二维码
$(document).ready(function() {
var str = window.location.href; //取得整个地址栏
var num = str.indexOf("?")
str = str.substr(num + 1);
console.log(str); //id=1?nsme=2?ns=3
str = str.split('?');
console.log(str);
var e = str[0].split('=');
console.log(e);
var e1 = str[1].split('=');
var e2 = str[2].split('=');
//var qwe = e[1];
var qwe = decodeURI(e[1]);
var qwe1 = decodeURI(e1[1]);
var qwe2 = decodeURI(e2[1]);
$("#code1").html(qwe);
$("#code2").html(qwe1);
$("#code3").html(qwe2);
$("#qrcodeCanvas").qrcode({
render: "canvas", //设置渲染方式，有table和canvas，使用canvas方式渲染性能相对来说比较好
text: "编码1：" + qwe + "\n" + "编码2：" + qwe1 + "\n" + "编码3：" + qwe2, //扫描二维码后显示的内容,可以直接填一个网址，扫描二维码后自动跳向该链接
width: "400", //二维码的宽度
height: "400", //二维码的高度
background: "#ffffff", //二维码的后景色
foreground: "#000000", //二维码的前景色
src: 'img/3.png' //二维码中间的图片
});
});
//将二维码及说明信息生成图片并保存
function printPhoto() {
html2canvas(document.getElementById("imgBox"),{
onrendered: function(canvas) {
var imgURL = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
var saveFile = function(data, filename){
var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
save_link.href = data;
save_link.download = filename;
var event = document.createEvent('MouseEvents');
event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
save_link.dispatchEvent(event);
}
saveFile(imgURL,'filename.png');
}
});
}
最后生成的图片就是这样的啦！！！
源码下载地址：https://github.com/MrBaiYinL/qrcode
如果觉得能帮助到你，麻烦动动手点一个star。
下面是我的公众号，大家可以关注一下，可以一起学习，一起进步：
