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

<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. JavaScript基础知识（字符串的方法）

    字符串的方法 1.字符串: 在js中被单引号或双引号包起来的内容都是字符串: var t = "true"; console.log(typeof t);// "stri ...

  2. 2018-2019-2 20175320实验一《Java开发环境的熟悉》实验报告

    2018-2019-2 20175320实验一<Java开发环境的熟悉>实验报告 一.实验步骤及内容 (一)带包程序的编译运行 1.使用mkdir命令创建如图所示目录 2.进入exp1下的 ...

  3. Codeforces 584E - Anton and Ira - [贪心]

    题目链接:https://codeforces.com/contest/584/problem/E 题意: 给两个 $1 \sim n$ 的排列 $p,s$,交换 $p_i,p_j$ 两个元素需要花费 ...

  4. android studio/Intellij IDEA（MAC OSX）中android模拟器无法启动的一种原因

    翻了stackoverflow上好多方式,各种重装重启清理缓存,都没有效果. 后来发现,用IDEA创建的模拟器的路径是 /Users/xirtam/.android/avd 而IDE使用的路径是 AN ...

  5. POI导入excel时读取excel数据的真实行数

    有很多时候会出现空的数据导致行数被识别多的情况 // 获取Excel表的真实行数 int getExcelRealRow(Sheet sheet) { boolean flag = false; fo ...

  6. keras实现textcnn

    https://github.com/MoyanZitto/keras-cn/blob/master/docs/legacy/blog/word_embedding.md 这个链接将带有embedin ...

  7. 1、js比较日期的大小

    ① html <div class="ptb10"><span>共享开始时间:</span><input type="text& ...

  8. 使用scrapy入门教程

    创建项目 scrapy startprogect demo 创建爬虫 scrapy genspider myDomain madomian.com 直接创建文件也可以 运行爬虫 scrapy craw ...

  9. Redis入门到高可用（十六）—— 持久化

    一.持久化概念 二.持久化方式 三.redis持久化方式之——RDB 1.什么是RDB 在 Redis 运行时, RDB 程序将当前内存中的数据库快照保存到磁盘文件中, 在 Redis 重启动时, R ...

  10. python中使用os.path.join()

    os.path.join的详细解释请移步os.path模块在使用的过程中,我使用如下代码: import ospath = "F:/gts/gtsdate/"b = os.path ...