web-dev-qa-db-fra.com

Bibliothèque de génération de code QR en javascript

Je suis actuellement à la recherche d'une bibliothèque js qui peut encoder du texte en codes qr. Le seul que j'ai pu trouver jusqu'à présent semble cassé, bien que d'autres personnes prétendent l'utiliser. La page d'exemple ne fonctionne pas. En jouant un peu avec, j'ai réussi à générer des codes mais ils ne sont pas décodés par le logiciel du téléphone.

Existe-t-il une autre bibliothèque js pour cela? Quelqu'un a-t-il réussi à le faire fonctionner?

Je ne suis pas intéressé par une solution qui tire le code d'un service en ligne (kaywa, google etc.).

Mise à jour:

Eh bien, vous avez raison, cette bibliothèque fonctionne fonctionne. Mon problème est que j'ai essayé de l'inclure dans une page HTML5 Boilerplate, et document.write ne semble pas y fonctionner. J'ai quand même modifié l'exemple de code pour que le navigateur dessine dans un canevas et non un tableau et j'ai obtenu l'ordre de la fonction fillRect à l'envers. Ci-dessous, l'appel de fonction corrigé.

context.fillRect(c * UNIT_SIZE, r * UNIT_SIZE, UNIT_SIZE, UNIT_SIZE);
// it's column-row, not row-column; don't ask why :)

Puisque je ne transpose plus mon image :), maintenant le qr décode bien. Merci pour le soutien.

javascriptqr-code
57
Alex Ciminian

Le script que vous avez publié fonctionne, sample.html n'est pas analysé en HTML.

alt text

23
Dejan Marjanovic

J'ai écrit un simple encodeur qr GPLv3 en javascript qui est local, utilise HTML5 et est vraiment rapide car c'est un port d'une version C embarquée que j'ai écrite pour les processeurs Atmel AVR.

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

Il existe une version en direct (qui peut être enregistrée en tant qu'application Web sur les appareils iOS) sur http://zdez.org/qrenc3.html (enregistrer à la maison, s'ouvre en safari pour que vous puissiez copier l'image ou utiliser airprint)

Voici le lien vers le code source téléchargeable .

26
tz1

Il existe une bibliothèque JavaScript simple que j'ai trouvée quelquefois appelée QRCode.js .

QRCode.js est une bibliothèque JavaScript multi-navigateur qui vous permet de générer des QRCodes à la volée, côté client. QRCode.js utilise le canevas et les tableaux HTMl5 pour afficher le QRCode. La bibliothèque elle-même n'a aucune dépendance.

Pour générer un QRCode, il vous suffit d'inclure la bibliothèque JavaScript, puis de passer en tant que paramètres à la fonction QRCode, le texte que vous souhaitez encoder en QRCode, la largeur et la hauteur du QRCode que vous souhaitez afficher, ainsi que votre spécification couleur de premier plan et couleur d'arrière-plan.

18
Hirvesh

J'ai trouvé un générateur de qrcode basé sur javascript-jquery qui pourrait vous intéresser. Son open source et ça marche vraiment. Voici le lien: https://github.com/jeromeetienne/jquery-qrcode

La bonne chose à propos de celui-ci est que son poids léger et qu'il n'appelle aucun service à distance ou site Web.

8
Randy D. Binondo

Le code QR dans le message initial ne prend en charge que 271 octets (version 10, taille = 57x57, niveau EC L).

Pour qu'il prenne en charge toutes les spécifications du code QR (version 40, 177x177, 2953 octets), vous devez ajouter plus de valeurs dans son RS_BLOCK_TABLE.

Voir les matrices restantes (version 11-40) ici: http://two.pairlist.net/pipermail/reportlab-users/2010-September/009707.html

4
Enzo Tran

J'utilise le code QR ShieldUI Lite, qui se trouve ici:

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

Contient toutes les versions du QR Code, tous les niveaux d'erreur.

3
Yavor Angelov

Comme toile/PNG

Il y a aussi le nouveau kjua du même auteur que le "vieux" jQuery.qrcode .

Comme toile/PNG/SVG

Et générateur de code QR par @ nayuki a également la possibilité de créer des codes QR en tant que SVG.

2
rugk

Je sais que c'est une vieille question, mais je pense qu'il n'est pas nécessaire qu'une bibliothèque génère un QR Code à partir d'un texte. Il vous suffit d'utiliser l'API QR code .

La mise en œuvre est très simple, nous avons un formulaire avec un champ de texte qui capture les données de contenu. Chaque fois que nous appuyons sur le bouton Générer, nous générons une nouvelle URL de demande vers l'API. Cette URL a deux composants principaux data et size. Le premier nécessite le contenu texte encodé et le second définira la taille de l'image. Voici le 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>
1
Teocci

npm en a quelques-uns. Je ne sais pas lesquels sont bons.

$ 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

Je n'ai pas pu trouver de générateur de code javascript qr.

Mais tu pourrais Pensez à utiliser l'API de Google:

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

Mise à jour: Je viens d'essayer http://d-project.googlecode.com/svn/trunk/misc/qrcode/js/qrcode .js et me semble bien. La seule chose que j'ai faite a été d'augmenter la taille et de fermer correctement les TD, car la fermeture automatique n'est pas correcte en html. http://k3rmit.org/nopaste/759 J'ai testé 3 chaînes différentes et utilisé une application appelée QRReader sur mon iPhone pour décoder.

Mise à jour 2: Avec var qr = new QRCode(10, QRErrorCorrectLevel.L); J'ai pu insérer 271 caractères dans le QRCode mais ce n'est peut-être pas le paramètre le plus fiable.

0
Thomas