60

我目前正在寻找一个可以在二维码中编码文本的 js 库。到目前为止，我能找到的唯一一个似乎坏了，尽管其他人声称正在使用它。示例页面不起作用。通过使用它，我设法生成了代码，但它们没有被手机软件解码。

是否有另一个库是 js 呢？有没有人设法让它工作？

我对从在线服务（kaywa、google 等）中提取代码的解决方案不感兴趣。

更新：

好吧，你们是对的，那个图书馆确实有效。我的问题是我尝试将它包含在 HTML5 样板页面中，而 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 :)

由于我不再对图像进行转置 :)，现在 qr 可以正常解码。感谢您的支持。

4

17 回答 17

26

我用本地的 javascript 编写了一个简单的 GPLv3 qr 编码器，使用 HTML5 并且速度非常快，因为它是我为 Atmel AVR 处理器编写的嵌入式 C 版本的一个端口。

http://code.google.com/p/jsqrencode/downloads/list

在http://zdez.org/qrenc3.html有一个实时版本（可保存为 iOS 设备上的 web 应用程序） （保存到主页，在 safari 中打开，因此您可以复制图像或使用打印）

这是可下载源代码的链接。

于 2011-02-18T01:36:08.073 回答
23

您发布的脚本正在运行，sample.html 未解析为 HTML。

替代文字

于 2010-12-27T23:38:33.230 回答
22

jquery-qrcode 如果不支持画布，jQuery 插件还可以使用 HTML5 画布元素或 HTML 表格生成二维码。

https://github.com/jeromeetienne/jquery-qrcode

$('#test').qrcode({
    width: 120,
    height: 120, 
    text: "https://github.com/jeromeetienne/jquery-qrcode"});

在此处输入图像描述

工作 jsFiddle 演示：

http://jsfiddle.net/maxim75/YwN8p/4/

于 2011-12-23T02:38:22.370 回答
19

有一个简单的 JavaScript 库，我有时发现它叫做QRCode.js。

QRCode.js 是一个跨浏览器的 JavaScript 库，它允许您在客户端动态生成 QRCode。它利用 HTMl5 Canvas 和 Tables 来显示 QRCode。库本身没有任何依赖关系。

要生成 QRCode，您只需要包含 JavaScript 库，然后作为参数传递给 QRCode 函数、要编码为 QRCode 的文本、要显示的 QRCode 的宽度和高度，以及您指定的前景色和背景色。

于 2013-02-08T09:36:50.420 回答
8

我找到了一个您可能感兴趣的基于 javascript-jquery 的 qrcode 生成器。它是开源的，并且确实有效。这是链接：https ://github.com/jeromeetienne/jquery-qrcode

这个的好处是它重量轻，它不调用任何远程服务或网站。

于 2011-08-12T08:29:08.250 回答
6

Google 有一个 QR 码生成器作为其图表工具的一部分，您可以在此处使用。

http://code.google.com/apis/chart/infographics/docs/qr_codes.html

于 2011-08-25T20:35:03.350 回答
4

Maksym 的解决方案比 Google 的库更好，因为它在本地运行不需要调用 Google API。如果你不使用 jQuery，你可以在https://github.com/amanuel/JS-HTML5-QRCode-Generator使用这个

于 2012-01-26T01:31:37.267 回答
4

首帖中的二维码最多仅支持 271 字节（版本 10，大小 = 57x57，EC 级别 L）。

要使其支持 QR 码的完整规格（版本 40、177x177、2953 字节），您必须在其 RS_BLOCK_TABLE 中添加更多值。

在此处查看剩余的矩阵（版本 11-40）：http: //two.pairlist.net/pipermail/reportlab-users/2010-September/009707.html

于 2011-03-31T12:01:34.587 回答
4

我正在使用 ShieldUI Lite 二维码，可以在这里找到：

https://github.com/shieldui/shieldui-lite

包含所有版本的 QR 码，所有错误级别。

于 2016-07-28T13:50:23.387 回答
2

作为画布/PNG

还有与“旧” jQuery.qrcode来自同一作者的新kjua。

作为画布/PNG/SVG

@nayuki的QR-Code-generator还能够将 QR 码创建为 SVG 。

于 2017-11-26T12:43:53.000 回答
2

您可以使用 Telerik Kendo-UI 生成二维码和条形码。它很容易使用。

尝试使用此示例代码：

二维码：https ://demos.telerik.com/kendo-ui/qrcode/index

条码：https ://demos.telerik.com/kendo-ui/barcode/index

于 2019-10-31T10:42:31.203 回答
2

另一个 HTML5 解决方案是http://davidshimjs.github.io/qrcodejs/与IE6~10, Chrome, Firefox, Safari, Opera, Mobile Safari, Android, Windows Mobile浏览器兼容

于 2015-11-15T21:51:48.097 回答
1

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.
于 2013-10-11T05:36:35.673 回答
0

我找不到 javascript 二维码生成器。

但您可以考虑使用 Google 的 API：

http://code.google.com/apis/chart/docs/gallery/qr_codes.html http://togosoft.com/web/qrcode/qrcode.js

更新： 我刚试过http://d-project.googlecode.com/svn/trunk/misc/qrcode/js/qrcode.js对我来说似乎很好。我唯一做的就是增加大小并使其正确关闭 TD，因为自关闭不是正确的 html。http://k3rmit.org/nopaste/759 我测试了 3 个不同的字符串，并在我的 iPhone 上使用了一个名为 QRReader 的应用程序进行解码。

更新 2：我能够 在var qr = new QRCode(10, QRErrorCorrectLevel.L);QRCode 中放入 271 个字符，但可能不是最可靠的设置。

于 2010-12-27T23:52:52.503 回答
0

我知道这是一个老问题，但我认为图书馆不需要从文本中生成二维码。您只需要使用二维码 API即可。

实现非常简单，我们有一个带有捕获内容数据的文本字段的表单。每当我们按下生成按钮时，我们都会为 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>

于 2019-05-20T02:00:53.707 回答
-1

如果您找不到本机 JavaScript 实现，您始终可以自己从服务器 AJAX 图像。

http://www.swetake.com/qr/qr_cgi_e.html

于 2010-12-27T23:45:20.483 回答
-1

https://drive.google.com/open?id=0B3TWIbBcUUTwcE1vV24wQnRxNGs

以上是js文件的链接，将其包含在您的项目中，并将以下代码写入Cake php中的ctp文件或您要使用的任何地方。我在cake php中对其进行了测试...

<-- including the file....
<?php echo $this->Html->script('jquery.qrcode.min.js')?>
<div style='padding:100px''><img id="demo" style='width: 100px,height: 100px'></div>
<script type="text/javascript">jQuery("#demo").qrcode({text: "HEllo World!"});</script>
于 2017-05-06T12:21:05.507 回答