programing

자바 스크립트의 QR 코드 생성 라이브러리

nasanasas 2020. 12. 25. 10:07
반응형

자바 스크립트의 QR 코드 생성 라이브러리


현재 qr 코드로 텍스트를 인코딩 할 수있는 js 라이브러리를 찾고 있습니다. 지금까지 내가 찾은 유일한 것은 다른 사람들이 그것을 사용하고 있다고 주장하지만 깨진 것처럼 보입니다. 샘플 페이지가 작동하지 않습니다. 그것으로 조금 놀아서 코드를 생성했지만 전화 소프트웨어에 의해 디코딩되지는 않습니다.

이것에 대한 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이 잘 디코딩됩니다. 도와 주셔서 감사합니다.


게시 한 스크립트는 WORKING이며 sample.html은 HTML로 구문 분석되지 않습니다.

대체 텍스트


나는 로컬이고 HTML5를 사용하며 Atmel AVR 프로세서 용으로 작성한 임베디드 C 버전의 포트이므로 정말 빠른 자바 스크립트로 간단한 GPLv3 qr 인코더를 작성했습니다.

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

http://zdez.org/qrenc3.html 에 라이브 버전 (iOS 기기에서 웹앱으로 저장 가능)이 있습니다 (집에 저장, safari에서 열리므로 이미지를 복사하거나 airprint를 사용할 수 있음).

다음은 다운로드 가능한 소스 코드에 대한 링크 입니다.


QRCode.js 라는 간단한 JavaScript 라이브러리가 있습니다.

QRCode.js는 클라이언트 측에서 즉석에서 QRCode를 생성 할 수있는 브라우저 간 JavaScript 라이브러리입니다. QRCode.js는 HTMl5 캔버스 및 테이블을 사용하여 QRCode를 표시합니다. 라이브러리 자체에는 종속성이 전혀 없습니다.

QRCode를 생성하려면 JavaScript 라이브러리를 포함시킨 다음 QRCode 함수, QRCode로 인코딩 할 텍스트, 표시하려는 QRCode의 너비 및 높이, 지정된 매개 변수에 전달하기 만하면됩니다. 전경색과 배경색.


관심을 가질만한 작동하는 javascript-jquery 기반 qrcode 생성기를 찾았습니다. 그것의 오픈 소스와 그것은 정말로 작동하고 있습니다. 링크 : https://github.com/jeromeetienne/jquery-qrcode

이것의 좋은 점은 가볍고 원격 서비스 또는 웹 사이트를 호출하지 않는다는 것입니다.


초기 게시물의 QR 코드는 최대 271 바이트 (버전 10, 크기 = 57x57, EC 수준 L) 만 지원합니다.

QR 코드의 전체 사양 (버전 40, 177x177, 2953 바이트)을 지원하려면 RS_BLOCK_TABLE에 더 많은 값을 추가해야합니다.

http://two.pairlist.net/pipermail/reportlab-users/2010-September/009707.html 에서 나머지 매트릭스 (버전 11-40)를 참조하십시오.


여기에서 찾을 수있는 ShieldUI Lite QR 코드를 사용하고 있습니다.

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

모든 버전의 QR 코드, 모든 오류 수준을 포함합니다.


Canvas / PNG로

"이전" jQuery.qrcode 와 동일한 작성자 의 새로운 kjua 도 있습니다 .

Canvas / PNG / SVG로

그리고 QR 코드 발전기 에 의해 @nayuki는 또한 SVGs으로 QR 코드를 생성 할 수있는 기능이 있습니다.


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.   

나는 이것이 오래된 질문이라는 것을 알고 있지만 텍스트에서 QR 코드를 생성하는 데 라이브러리가 필요하지 않다고 생각합니다. QR 코드 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 data and size. The former requires the text content encoded and the latter will define the size of the image. Here is the code:

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>


I couldn't find a javascript qr code generator.

But you could Consider using Google's API:

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.js and 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/759 I tested 3 different strings and used a App called QRReader on my iPhone to decode.

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.


If you can't find a native JavaScript implementation, you can always AJAX the image yourself from your server.

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

ReferenceURL : https://stackoverflow.com/questions/4542632/qr-code-generation-library-in-javascript

반응형