Question

我正在寻找一个可以在qr代码中编码文本的js库。 The only one我发现到目前为止看起来很糟糕，尽管其他人声称正在使用它。示例页面不起作用。通过播放它，我设法生成代码，但它们不会被手机软件解码。

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

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

更新

嗯，你们是对的，那个库工作。我的问题是我尝试将它包含在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 :)

由于我不再使用我的图像转换:)，现在qr解码很好。感谢您的支持。

Answer 1

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

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

有一个实时版本（可以在iOS设备上保存为webapp） http://zdez.org/qrenc3.html（保存到主页，在Safari中打开，以便您可以复制图像或使用空气打印）

以下是downloadable source code的链接。

Answer 2

您发布的脚本是WORKING，sample.html未被解析为HTML。

alt text

Answer 3

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

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

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

Answer 4

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

关于这一点的好处在于它重量轻，并且不会呼叫任何远程服务或网站。

Answer 5

初始帖子中的QR码仅支持最多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

Answer 6

我使用的是ShieldUI Lite QR码，可在此处找到：

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

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

Answer 7

As Canvas / PNG

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

As Canvas / PNG / SVG

QR-Code-generator @nayuki也可以将QR码创建为SVG。

Answer 8

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.

Answer 9

~~我找不到javascript qr代码生成器。~~

~~但你可以~~考虑使用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的App进行解码。

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

Answer 10

我知道这是一个老问题，但是我认为没有必要从文本生成QR码的库。您只需要使用the QR code 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>

Answer 11

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

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

javascript中的QR码生成库

11 个答案:

As Canvas / PNG

As Canvas / PNG / SVG