Javascript javascript中的二维码生成库
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4542632/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
QR code generation library in javascript
提问by Alex Ciminian
I'm currently looking for a js library that can encode text in qr codes. The only oneI've been able to find so far seems broken, although other people claim to be using it. The sample page doesn't work. By playing a bit with it I managed to generate codes but they don't get decoded by the phone software.
我目前正在寻找一个可以在 qr 代码中编码文本的 js 库。到目前为止我能找到的唯一一个似乎坏了，尽管其他人声称正在使用它。示例页面不起作用。通过使用它，我设法生成了代码，但它们没有被手机软件解码。
Is there another library is js for this? Has anyone managed to get it to work?
是否有另一个库是 js？有没有人设法让它工作？
I'm not interested in a solution that pulls the code from an online service (kaywa, google etc.).
我对从在线服务（kaywa、google 等）中提取代码的解决方案不感兴趣。
Update:
更新：
Well, you guys are right, that library doeswork. My problem was that I tried including it in a HTML5 Boilerplate page, and document.write doesn't seem to work in that. I modified the sample code anyway to make the browser draw in a canvas not a table and I got the order of the fillRect function backwards. Below is the corrected function call.
好吧，你们是对的，那个库确实有效。我的问题是我尝试将它包含在 HTML5 Boilerplate 页面中，而 document.write 似乎不起作用。无论如何，我修改了示例代码以使浏览器在画布而不是表格中绘制，并且我得到了 fillRect 函数的顺序。下面是更正后的函数调用。
context.fillRect(c * UNIT_SIZE, r * UNIT_SIZE, UNIT_SIZE, UNIT_SIZE);
// it's column-row, not row-column; don't ask why :)
Since I don't get my image transposed anymore :), now the qr decodes fine. Thanks for the support.
由于我不再转置图像了 :)，现在 qr 解码正常。感谢您的支持。
采纳答案by Dejan Marjanovic
Script you posted is WORKING, sample.html is not parsed as HTML.
您发布的脚本有效，sample.html 未解析为 HTML。
回答by tz1
I wrote a simple GPLv3 qr encoder in javascript that is local, uses HTML5 and is really fast as it is a port of an embedded C version I wrote for Atmel AVR processors.
我在 javascript 中编写了一个简单的 GPLv3 qr 编码器，它是本地的，使用 HTML5 并且速度非常快，因为它是我为 Atmel AVR 处理器编写的嵌入式 C 版本的端口。
http://code.google.com/p/jsqrencode/downloads/list
http://code.google.com/p/jsqrencode/downloads/list
There is a live version (which is saveable as a webapp on iOS devices) at http://zdez.org/qrenc3.html(save to home, opens in safari so you can copy the image or use airprint)
http://zdez.org/qrenc3.html上有一个实时版本（可保存为 iOS 设备上的网络应用程序） （保存到主页，在 safari 中打开，以便您可以复制图像或使用打印）
Here is the link to the downloadable source code.
这是可下载源代码的链接。
回答by Hirvesh
There is a simple JavaScript library which I found sometime back called QRCode.js.
有一个简单的 JavaScript 库，我曾经发现它叫做QRCode.js。
QRCode.js is a cross-browser JavaScript library which allows you to generate QRCodes on the fly, on the client-side. QRCode.js makes use of HTMl5 Canvas and Tables to display the QRCode. The library itself has no dependencies whatsoever.
QRCode.js 是一个跨浏览器的 JavaScript 库，它允许您在客户端动态生成 QRCode。QRCode.js 使用 HTMl5 Canvas 和 Tables 来显示 QRCode。库本身没有任何依赖项。
To generate a QRCode, you just need to include the JavaScript library and then pass as parameters to the QRCode function, the text you want to encode as the QRCode, the width & height of the QRCode you want to display, as well as your specified foreground color and background color.
要生成二维码，您只需要包含 JavaScript 库，然后作为参数传递给二维码函数、要编码为二维码的文本、要显示的二维码的宽度和高度，以及您指定的前景色和背景色。
回答by Randy D. Binondo
I've found a working javascript-jquery based qrcode generator that you might be interested. Its opensource and it's really working. Here is the link: https://github.com/jeromeetienne/jquery-qrcode
我找到了一个你可能感兴趣的基于 javascript-jquery 的二维码生成器。它是开源的，而且确实有效。这是链接：https: //github.com/jeromeetienne/jquery-qrcode
The good thing about this one is that its light weight and it does not call any remote service or website.
这个的好处是它重量轻，它不调用任何远程服务或网站。
回答by Enzo Tran
The QR code in the initial post only supports up to 271 bytes (version 10, Size = 57x57, EC level L).
初始帖子中的二维码仅支持最多 271 个字节（版本 10，大小 = 57x57，EC 级别 L）。
To make it support the full specs of QR code (version 40, 177x177, 2953 bytes), you have to add more values into its RS_BLOCK_TABLE.
为了使其支持 QR 码的完整规范（版本 40、177x177、2953 字节），您必须在其 RS_BLOCK_TABLE 中添加更多值。
See the remaining matrices (version 11-40) here: http://two.pairlist.net/pipermail/reportlab-users/2010-September/009707.html
在此处查看其余矩阵（版本 11-40）：http://two.pairlist.net/pipermail/reportlab-users/2010-September/009707.html
回答by Yavor Angelov
I am using the ShieldUI Lite QR Code, which can be found here:
我正在使用 ShieldUI Lite 二维码，可在此处找到：
https://github.com/shieldui/shieldui-lite
https://github.com/shieldui/shieldui-lite
Contains all versions of the QR Code, all Error levels.
包含所有版本的二维码，所有错误级别。
回答by rugk
As Canvas/PNG
作为画布/PNG
There is also the new kjuafrom the same author as the "old" jQuery.qrcode.
还有新kjua同一作者的“老” jQuery.qrcode。
As Canvas/PNG/SVG
作为画布/PNG/SVG
And QR-Code-generatorby @nayukialso has the ability to create QR codes as SVGs.
回答by Teocci
I know this is an old question, but I think it is not necessary a library to generate a QR Code from a text. You just need to use the QR code API.
我知道这是一个老问题，但我认为没有必要使用库来从文本生成二维码。您只需要使用二维码 API。
The implementation is very simple, we have a form with a text field that captures the content data. Whenever we press the generate button we generate a new request URL to the API this URL has two main components dataand size. The former requires the text content encoded and the latter will define the size of the image. Here is the code:
实现非常简单，我们有一个带有文本字段的表单，用于捕获内容数据。每当我们按下生成按钮时，我们都会为 API 生成一个新的请求 URL，该 URL 有两个主要组件data和size. 前者需要对文本内容进行编码，后者将定义图像的大小。这是代码：
let baseURL = 'https://api.qrserver.com/v1/create-qr-code/?data='
let config = '&size=120x120'
let btn, qrCode, content;
function htmlEncode(value) {
return $('<div/>').text(value).html();
}
$(function() {
btn = $('#generate');
qrCode = $('.qr-code');
content = $('#content');
btn.click(function() {
qrCode.attr('src', baseURL + encodeURIComponent(htmlEncode(content.val())) + config);
});
});.qr-code {
max-width: 160px;
margin: 10px;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container-fluid">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<div class="text-center">
<img src="https://api.qrserver.com/v1/create-qr-code/?data=http%3A%2F%2Fwww.google.com&size=120x120" class="qr-code img-thumbnail img-responsive">
</div>
<div class="form-horizontal">
<div class="form-group">
<label class="control-label col-sm-4" for="content">Enter content:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="content" placeholder="i.e. www.google.com">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="button" class="btn btn-default" id="generate">Generate</button>
</div>
</div>
</div>
</div>回答by chovy
npm has a few. I have no idea which ones are good.
npm 有几个。我不知道哪些是好的。
$ npm search qrcode
npm http GET https://registry.npmjs.org/-/all/since?stale=update_after&startkey=1379059929305
npm http 200 https://registry.npmjs.org/-/all/since?stale=update_after&startkey=1379059929305
NAME DESCRIPTION A
jsqrcode a node port of Lazar Laszlo's `jsqrcode` qr code decoder =
jsqrcode-lite Simplified version of Lazar Laszlo's `jsqrcode` for node. =
node-zxing ZXing Wrapper =
qr A small library to generate QR codes with libqrencode. =
qr-element qrcode dom element =
qr.js qrcode encoding in javascript =
qrcode QRCode / 2d Barcode api with both server side and client side s
qrcode-emitter Emits QR codes found in an image stream. =
qrcode-npm QRCode Generator for JavaScript =
qrcode-terminal QRCodes, in the terminal =
qrcode.js QR Code Detection / Decoding / Generation =
qread QRcode detector & decoder =
qruri NodeJS port of Kang Seonghoon's qr.js =
rescode Generate Codes (EAN13, QRCODE ..) =
zbar node-zbar is a NodeJS binding to the ZBar QR Code library.
回答by Thomas
I couldn't find a javascript qr code generator.
我找不到 javascript qr 代码生成器。
But you could Consider using Google's API:
但是您可以考虑使用 Google 的 API：
http://code.google.com/apis/chart/docs/gallery/qr_codes.htmlhttp://togosoft.com/web/qrcode/qrcode.js
http://code.google.com/apis/chart/docs/gallery/qr_codes.html http://togosoft.com/web/qrcode/qrcode.js
Update:I just tried http://d-project.googlecode.com/svn/trunk/misc/qrcode/js/qrcode.jsand seems fine to me. The only thing I did was increase the size and made it close the TDs properly, since self closing is not correct html. http://k3rmit.org/nopaste/759I tested 3 different strings and used a App called QRReader on my iPhone to decode.
更新：我刚刚尝试过http://d-project.googlecode.com/svn/trunk/misc/qrcode/js/qrcode.js对我来说似乎很好。我所做的唯一一件事就是增加大小并使其正确关闭 TD，因为自关闭不是正确的 html。http://k3rmit.org/nopaste/759我测试了 3 个不同的字符串，并在我的 iPhone 上使用了一个名为 QRReader 的应用程序进行解码。
Update 2:With var qr = new QRCode(10, QRErrorCorrectLevel.L);I was able to fit 271 chars in the QRCode however might not be the most reliable setting.
更新2：随着var qr = new QRCode(10, QRErrorCorrectLevel.L);我能够适应271个字符的QR码但可能不是最可靠的设置。
