一、使用jquery-qrcode生成二维码
先简单说一下jquery-qrcode，这个开源的三方库（可以从https://github.com/jeromeetienne/jquery-qrcode 获取），
qrcode.js 是实现二维码数据计算的核心类，
jquery.qrcode.js 是把它用jquery方式封装起来的，用它来实现图形渲染，其实就是画图（支持canvas和table两种方式）
支持的功能主要有：
- text : "https://github.com/jeromeetienne/jquery-qrcode" //设置二维码内容
- render : "canvas",//设置渲染方式
- width : 256, //设置宽度
- height : 256, //设置高度
- typeNumber : -1, //计算模式
- correctLevel : QRErrorCorrectLevel.H,//纠错等级
- background : "#ffffff",//背景颜色
- foreground : "#000000" //前景颜色
使用方式非常简单
- jQuery('#output').qrcode({width:200,height:200,correctLevel:0,text:content});
经过简单实践，
使用canvas方式渲染性能还是非常不错的，但是如果用table方式，性能不太理想，特别是IE9以下的浏览器，所以需要自行优化一下渲染table的方式，这里就不细述了。
二、JS生成中文二维码
其实上面的js有一个小小的缺点，就是默认不支持中文。
这跟js的机制有关系，jquery-qrcode这个库是采用 charCodeAt() 这个方式进行编码转换的，
而这个方法默认会获取它的 Unicode 编码，一般的解码器都是采用UTF-8, ISO-8859-1等方式，
英文是没有问题，如果是中文，一般情况下Unicode是UTF-16实现，长度2位，而UTF-8编码是3位，这样二维码的编解码就不匹配了。
解决方式当然是，在二维码编码前把字符串转换成UTF-8，具体代码如下：
- function utf16to8(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;
- }
参考：
https://github.com/jeromeetienne/jquery-qrcode
http://www.onicos.com/staff/iz/amuse/javascript/expert/utf.txt
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="js/jquery-1.8.3.js" type="text/javascript"></script>
<script src="js/qrcode.js" type="text/javascript"></script>
<script src="js/jquery.qrcode.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#bt").bind("click", function () {
text = $("#text").val();
$("#div_div").qrcode(utf16to8(text));
})
})
function utf16to8(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>
</head>
<body>
<input type="text" id="text" />
<input type="button" value="shengc" id="bt" />
<div id="div_div" style="width:400px;height:400px;border:1px solid #000;"></div>
</body>
</html>
相关推荐
总的来说，通过JavaScript生成二维码，我们可以利用`qrcode.js`这样的库轻松实现这一功能，同时保证在各种浏览器和手机端的兼容性，甚至支持中文内容。这使得JavaScript生成二维码成为网页应用和移动应用中一种实用...
总的来说，利用JavaScript生成二维码是网页交互中的一个实用技巧，通过结合各种JS库，我们可以轻松地将动态数据转化为用户可以扫描的二维码，为网页应用增加更多互动性。在进行此类开发时，确保对库的正确引用和理解...
至此，我们已经完成了C#根据字符串生成二维码的完整实例。用户可以在前端输入字符串和尺寸，点击生成按钮后，服务器将生成二维码并保存到指定位置，同时在页面上显示生成结果。这个实例对于理解和学习C#中的二维码...
本主题聚焦于如何利用HTML5和JavaScript生成二维码并将其下载到用户本地。我们将探讨涉及的技术点、代码实现以及相关库的使用。 首先，HTML5引入了一系列新的API和元素，增强了网页的交互性和离线存储能力。在这个...
这是一个简单的Windows Forms应用程序示例，它接收用户输入的字符串并生成二维码。 ```csharp public partial class Form1 : Form { public Form1() { InitializeComponent(); } private void ...
在Java开发中，生成二维码和将二维码转换为Base64字符串是常见的需求，尤其是在与前端交互时。这个项目提供了一种方便的方式，通过Maven依赖来实现这些功能，并且包括了一个工具类，使得操作更加简单易用。接下来，...
**jQuery.qrcode.js** 是一个基于JavaScript的库，专门用于在客户端生成二维码（Quick Response Code）。这个库的优势在于它不需要服务器端的支持，只需要在用户的浏览器上运行，这大大简化了生成二维码的过程，并...
总的来说，使用JavaScript生成特定字符的二维码是一个相对简单的过程，主要依赖于成熟的库，并通过其提供的API进行配置和调用。理解这些基本概念和用法，就能灵活地在项目中实现二维码功能。当然，为了提供更好的...
总结一下，使用H5和JavaScript生成二维码涉及以下步骤： 1. 引入jQuery和`jquery-qrcode`库。 2. 在HTML中创建一个元素用于显示二维码。 3. 使用jQuery选择该元素并调用`qrcode`方法，传入相应的配置和数据。 这个...
总的来说，使用jQuery生成二维码并支持中文字符，主要依赖于`jquery.qrcode.js`插件，其内部处理了中文编码的问题，使得开发者可以轻松地在网页上生成含有中文内容的二维码。在实际应用中，根据项目需求，你可能还...
在本资源中，我们讨论的是一个用于生成二维码的模块源码，这对于那些需要在易语言项目中集成二维码生成功能的开发者来说，是一个非常实用的工具。 二维码（Quick Response Code）是一种二维条形码，能够存储比传统...
总结来说，通过JavaScript生成二维码是Web开发中的一个实用功能，它简化了数据传递的过程，提高了用户体验。通过选择合适的库，配置适当参数，我们可以轻松地在HTML页面上实现二维码的生成和管理。不过，考虑到性能...
本文将详细介绍如何在微信小程序中将字符串信息生成二维码图片的操作方法。 首先，介绍下什么是二维码。二维码（2-dimensional bar code），是由许多黑白相间的方块组成的矩形图案，通过黑白图案的不同组合编码信息...
在B/S架构中，我们可以将生成二维码的功能封装成一个Web API服务，接收请求并返回二维码的Base64编码，前端通过JavaScript解码并显示。而在C/S架构中，可以直接在客户端应用中调用上述代码，生成的二维码图像可以...
总的来说，这个demo提供了一个直观的教程，帮助开发者快速理解和应用JavaScript生成二维码的功能。通过这个实例，你可以了解如何将二维码集成到自己的网页项目中，无论是为了分享链接、展示信息还是其他用途。
总结来说，通过JavaScript生成二维码是一项实用的技术，它使得网页能够实时地生成二维码，尤其是对于包含中文内容的场景，提供了便利。了解并掌握这项技术，可以帮助开发者提升用户体验，丰富网页交互功能。
**JavaScript生成二维码详解** 在数字化信息时代，二维码已经成为日常生活中数据传输的重要载体。JavaScript作为Web开发中的重要脚本语言，提供了生成二维码的功能，这使得在网页端和线上环境无需依赖服务器端处理...
生成二维码的核心库是`qrcode.js`，这是一款流行的JavaScript二维码生成库。在`wxapp-qrcode-master`压缩包中，应该包含了这个库的引用或者实现了类似功能的自定义代码。首先，你需要在项目的`json`配置文件中引入这...
使用jquery.qrcode生成二维码(支持中文) 原理：如果浏览器支持canvas，则使用canvas绘制二维码，否则使用table绘制，但是canvas效率比table高。 适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗...