web-dev-qa-db-ja.com

JavaScriptのQRコード生成ライブラリ

現在、qrコードでテキストをエンコードできる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はうまくデコードします。手助けありがとう。

javascriptqr-code
57
Alex Ciminian

投稿したスクリプトは機能しています。sample.htmlはHTMLとして解析されません。

alt text

23
Dejan Marjanovic

ローカルで、HTML5を使用し、Atmel AVRプロセッサー用に作成した組み込みCバージョンのポートであるため、非常に高速なjavascriptで単純なGPLv3 qrエンコーダーを作成しました。

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

http://zdez.org/qrenc3.html にライブバージョン（iOSデバイスでwebappとして保存可能）があります（ホームに保存、safariで開くので、画像をコピーしたり、エアプリントを使用）

ダウンロード可能なソースコード へのリンクです。

26
tz1

QRCode.js と呼ばれるシンプルなJavaScriptライブラリがあります。

QRCode.jsは、クライアントサイドでオンザフライでQRCodeを生成できるクロスブラウザJavaScriptライブラリです。 QRCode.jsは、HTMl5 CanvasとTablesを使用してQRCodeを表示します。ライブラリ自体にはまったく依存関係がありません。

QRCodeを生成するには、JavaScriptライブラリをインクルードし、QRCode関数、QRCodeとしてエンコードするテキスト、表示するQRCodeの幅と高さ、および指定したパラメーターとしてパラメーターを渡すだけです。前景色と背景色。

18
Hirvesh

興味のあるかもしれないjavascript-jqueryベースのqrcodeジェネレーターを見つけました。そのオープンソースとそれは本当に働いています。リンクは次のとおりです。 https://github.com/jeromeetienne/jquery-qrcode

これの良いところは、軽量であり、リモートサービスやウェブサイトを呼び出さないことです。

8
Randy D. Binondo

最初の投稿の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

4
Enzo Tran

ShieldUI Lite QRコードを使用しています。これは次の場所にあります。

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

QRコードのすべてのバージョン、すべてのエラーレベルが含まれます。

3
Yavor Angelov

Canvas/PNGとして

「古い」と同じ作者による新しい kjua もあります jQuery.qrcode 。

Canvas/PNG/SVGとして

QR-Code-generator by @ nayuki には、SVGとしてQRコードを作成する機能もあります。

2
rugk

私はこれが古い質問であることを知っていますが、テキストからQRコードを生成するためにライブラリが必要ではないと思います。 QRコードAPI を使用するだけです。

実装は非常に簡単です。コンテンツデータをキャプチャするテキストフィールドを持つフォームがあります。生成ボタンを押すたびに、APIへの新しいリクエストURLを生成します。このURLには、dataとsizeの2つの主要コンポーネントがあります。前者はエンコードされたテキストコンテンツを必要とし、後者は画像のサイズを定義します。コードは次のとおりです。

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>
1
Teocci

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.
1
chovy

Javascript qrコードジェネレーターが見つかりませんでした。

しかし、あなたはできる GoogleのAPIの使用を検討してください。

http://code.google.com/apis/chart/docs/gallery/qr_codes.htmlhttp://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文字を収めることができましたが、最も信頼できる設定ではないかもしれません。

0
Thomas