说明：输入汉字和数字都可以识别并展示

<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。

使用qrcode输入信息生成二维码包含二维码说明信息，点击转化为图片并下载的更多相关文章

  1. Android之扫描二维码和根据输入信息生成名片二维码

    开发中常常遇到二维码扫码操作,前段时间做项目要实现该功能,于是网上查找资料实现了,现在把他做出来给各位分享一下,主要包含了二维码扫描和生成二维码名片. 先来看看效果图:   生成的二维码,打开微信扫一 ...

  2. jquery.qrcode.min.js生成二维码 通过前端实现二维码生成

    主体代码: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <tit ...

  3. qrcode.js 动态生成二维码

    用qrcode.js动态生成二维码图片非常简单,只需要引入qrcode.js即可使用,而且可以自定义图片大小.背景色等信息. 1.jsp代码---页面头部引入qrcode.js,jquery文件可选 ...

  4. 如何使用jquery.qrcode.js插件生成二维码

    1.首先需要准备 jquery.qrcode.js 和 jquery.js github地址:https://github.com/lrsjng/jquery-qrcode 官方文档地址:http:/ ...

  5. jQuery.qrcode.js客户端生成二维码，支持中文并且可以生成LOGO

    描述: jquery.qrcode.js 是一个能够在客户端生成矩阵二维码QRCode 的jquery插件 ,使用它可以很方便的在页面上生成二维条码.此插件是能够独立使用的,体积也比较         ...

  6. jquery.qrcode.min.js生成二维码

    jquery.qrcode.min.js是一款可以生成二维码的插件,使用前提是先引入jquery,因为jquery.qrcode.min.js依赖jquery. 基本用法 1.引入js <scr ...

  7. asp.net 生成、解析条形码和二维码

    原文 asp.net 生成.解析条形码和二维码 一.条形码 一维码,俗称条形码,广泛的用于电子工业等行业.比如我们常见的书籍背面就会有条形码,通过扫描枪等设备扫描就可以获得书籍的ISBN(Intern ...

  8. 使用javascript生成当前博文地址的二维码图片

    前面的话 在电脑端发现一篇好的博文,想在手机上访问.这时,就必须打开手机浏览器输入长长的URL地址才行,非常不方便.如果在博客标题的后面跟一张小的图片,点击该图片后,出现一张二维码的大图,然后再通过手 ...

  9. 免费在线生成彩色带logo的个性二维码

          码工具网站提供免费的在线二维码生成服务,可以把网址.文本.电子邮件.短信.电话号码.电子名片.wifi网络等信息生成对应的二维码图片.你可以设置二维码图片的格式(png,jpg,gif). ...

随机推荐

  1. xargs实例

    1. 当你使用rm命令去删除很多的文件时,你可能会得到错误信息:“/bin/rm Argument list too long – Linux”.这时可以用xargs来避免这个问题 find ~ -n ...

  2. ssl证书

    个人理解: 客户端第一次连接服务端的时候,服务端就把证书(中的公钥)给了客户端,客户端验证证书中的公钥是否和本地的公钥一致(客户端一般都会内置类似AC的具有公信力的证书颁发机构), 之后的请求每次请求 ...

  3. Django之Cookie、Session、CSRF、Admin

    Django之Cookie.Session.CSRF.Admin   Cookie 1.获取Cookie: 1 2 3 4 5 6 request.COOKIES['key'] request.get ...

  4. .net core 获取不到session 和cookies的值

    在启动类的configure services()方法中,设置选项.checkconsent必需=context=false;如下: services.Configure<CookiePolic ...

  5. 关于maven-resources-plugin配置的隐藏的坑

    昨天发现一个问题, 一个第三方证书的文件存放于resources文件夹下,在本地环境使用该证书进行加密调用第三方接口,没有任何问题,但是发布到测试环境和生产环境(linux)报错,提示证书工厂无法初始 ...

  6. python使用MySQLdb实现连接数据库Mysql

    python实现连接数据库mysql的步骤: 一.引入MySQLdb 二.获取与数据库的连接 三.执行SQL语句和存储过程 四.关闭数据库连接 1.什么是MySQLdb? MySQLdb是用于pyth ...

  7. MATLAB变量

    序言 在Matlab中,变量名由A~Z.a~z.数字和下划线组成,且变量的第一个字符必须是字母. 尽管变量名可以是任意长度, 但是Matlab只识别名称的前N=namelengthmax个字符, 这里 ...

  8. 深入理解Java虚拟机6-chap8-9-斗者3星

    一.虚拟机字节码执行引擎 1.虚拟机执行引擎由自己实现,所以可以自行制定指令集与执行引擎的体系结构,并且可以执行那些不被硬件直接支持的指令集格式. 2.执行引擎 编译执行:通过JIT编译器产生本地代码 ...

  9. python 爬虫-2

    小白新手完全不懂的什么,还有一个robots.txt限制文件,稀里糊涂的    还是百度   可以看一下:http://www.baidu.com/robots.txt 里面会有一些限制,常见的一些配 ...

  10. How do you explain Machine Learning and Data Mining to non Computer Science people?

    How do you explain Machine Learning and Data Mining to non Computer Science people?   Pararth Shah, ...