60

私は現在、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は正常にデコードされます。ご支援ありがとうございます。

4

17 に答える 17

26

私はJavaScriptでシンプルなGPLv3qrエンコーダーを作成しました。これはローカルで、HTML5を使用し、AtmelAVRプロセッサー用に作成した組み込みCバージョンのポートであるため非常に高速です。

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

http://zdez.org/qrenc3.htmlにライブバージョン（iOSデバイスでWebアプリとして保存可能）があり ます（自宅に保存、サファリで開くので、画像をコピーしたり、Airprintを使用したりできます）

ダウンロード可能なソースコードへのリンクは次のとおりです。

于 2011-02-18T01:36:08.073 に答える
23

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

代替テキスト

于 2010-12-27T23:38:33.230 に答える
22

jquery-qrcode jQueryプラグインは、canvasがサポートされていない場合、HTML5キャンバス要素またはHTMLテーブルを使用してQRコードも生成します。

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

QRCode.jsと呼ばれる簡単なJavaScriptライブラリがあります。

QRCode.jsは、クライアント側でその場でQRCodeを生成できるクロスブラウザJavaScriptライブラリです。HTMl5キャンバスとテーブルを使用してQRコードを表示します。ライブラリ自体には依存関係はまったくありません。

QRCodeを生成するには、JavaScriptライブラリを含めてから、パラメータとしてQRCode関数に渡す必要があります。これは、QRCodeとしてエンコードするテキスト、表示するQRCodeの幅と高さ、および指定したものです。前景色と背景色。

于 2013-02-08T09:36:50.420 に答える
8

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

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

于 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

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

于 2011-03-31T12:01:34.587 に答える
4

Maksymのソリューションは、ローカルで実行されるため、Google APIを呼び出す必要がないため、Googleのライブラリよりも優れています。また、jQueryを使用しない場合は、https：//github.com/amanuel/JS-HTML5-QRCode-Generatorでこれを使用できます。

于 2012-01-26T01:31:37.267 に答える
4

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

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

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

于 2016-07-28T13:50:23.387 に答える
2

別のHTML5ソリューションは、ブラウザと互換性のあるhttp://davidshimjs.github.io/qrcodejs/です。IE6~10, Chrome, Firefox, Safari, Opera, Mobile Safari, Android, Windows Mobile

于 2015-11-15T21:51:48.097 に答える
2

Canvas/PNGとして

「古い」 jQuery.qrcodeと同じ作者からの新しいkjuaもあります。

Canvas / PNG/SVGとして

また、 @ nayukiによるQRコードジェネレーターには、SVGとしてQRコードを作成する機能もあります。

于 2017-11-26T12:43:53.000 に答える
2

Telerik Kendo-UIを使用して、qrcodeとバーコードを生成できます。使いやすいです。

次のサンプルコードを使用してみてください。

QRコード：https ：//demos.telerik.com/kendo-ui/qrcode/index

バーコード：https ：//demos.telerik.com/kendo-ui/barcode/index

于 2019-10-31T10:42:31.203 に答える
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

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

ただし、 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を 試したところ、問題ないようです。セルフクロージングは​​正しいhtmlではないため、私が行った唯一のことは、サイズを大きくしてTDを適切に閉じることでした。http://k3rmit.org/nopaste/759 3つの異なる文字列をテストし、iPhoneでQRReaderというアプリを使用してデコードしました。

アップデート2： QRCodevar qr = new QRCode(10, QRErrorCorrectLevel.L);に271文字を収めることができましたが、最も信頼できる設定ではない可能性があります。

于 2010-12-27T23:52:52.503 に答える
0

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

実装は非常に簡単で、コンテンツデータをキャプチャするテキストフィールドを持つフォームがあります。生成ボタンを押すたびに、APIへの新しいリクエストURLが生成されます。このURLには2つの主要なコンポーネント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ファイルのリンクです。プロジェクトにそれを含め、ケーキphpまたは使用したい場所のctpファイルに以下のコードを記述します。私はそれをケーキ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 に答える