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

<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. WPF ComboBox SelectionChanged事件里赋值Text的解决方法

    string sCountry ; private void cbCountry_SelectionChanged(object sender, SelectionChangedEventArgs e ...

  2. 移动前端开发和 Web 前端开发的区别

    http://www.itcast.cn/news/20180125/16033584753.shtml 1,普通PC端开发与移动端开发区别. 先说背景,我大言不惭的说一下,我pc端的前端开发干了有快 ...

  3. jQuery相关用法

    #jquery中extend的用法 [1] [2] jQuery.extend( target [, object1 ] [, objectN ] ) Description: Merge the c ...

  4. C++中的const成员函数（函数声明后加const，或称常量成员函数）用法详解

    http://blog.csdn.net/gmstart/article/details/7046140 在C++的类定义里面,可以看到类似下面的定义: 01 class List { 02 priv ...

  5. MVEAN_day05 Nexus私服对的搭建

    序言:为什么要搭建私服 因为在公司中我们是以团队进行开发的,不在是在自己的本地仓库中进行,我们需要连接公司远程仓库进行jar依赖.在公司的局域网中搭建的私服,然后开发人员连接这台计算机,进行团队开发. ...

  6. @Value("${xxxx}")注解的配置及使用

    代码中的用法 Spring 通过@Value注解获取*.porperties文件code的内容,然后赋值给使用该注解的Code属性上. @Value("${code}") priv ...

  7. JAVA微信支付代码（WeChatPay.java 才是调用类）

    微信官方文档:https://pay.weixin.qq.com/wiki/doc/api/index.html MD5Util.java package weixin; import java.se ...

  8. CSS 字体效果

    text-shadow还没有出现时,大家在网页设计中阴影一般都是用photoshop做成图片,现在有了css3可以直接使用text-shadow属性来指定阴影.这个属性可以有两个作用,产生阴影和模糊主 ...

  9. 关于table的td和ul元素li隔行变色的功能实现

    table元素的td和ul元素li隔行变色的功能实现 利用css控制二者的样式轻松实现隔行换色: 例如:table的css样式控制: table tr td{   background-color:颜 ...

  10. 《CSS世界》读书笔记（八）

    <!-- <CSS世界>张鑫旭著 --> 替换元素和非替换元素的距离有多远? 观点1:替换元素和非替换元素之间只隔了一个src属性! 在Firefox浏览器下,没有src属性的 ...