Generați coduri de bare qr și datamatrix pe paginile web folosind javascript

Peste tot în lume, a fost mult timp folosit de așa-numitele coduri de bare, da, acestea sunt imagini cu dungi de diferite lungimi și grosimi, care sunt lipite la mărfurile la supermarket local, ^ _ ^ In general, coduri de bare sunt diferite, cel mai interesant pentru noi este așa-numitul cod QR (de la răspuns rapid - răspuns rapid), cel mai răspândit pe Internet. Acesta este un cod bidimensional, spre deosebire de benzi pe bunuri, de aici proprietatea foarte importantă: capacitatea de informare. În general, nu voi cita Wikipedia, oricine interesat va citi singur. Există un număr destul de moduri de reprezentare a QR-codurilor de pe Web, cele mai frecvente sunt bazate pe generarea de imagini de pe partea de server. Cu toate acestea, cititorii mei știu cum nu-mi plac aceste soluții.







Pe scurt despre codurile de bare

Există 4 clase de bază pentru prezentarea informațiilor prin codul QR. diferite tipuri de date stocate și volum maxim:

  • Numai informații digitale - până la 7089 cifre
  • Informații alfanumerice - până la 4296 de caractere
  • Date binare (octeți pe 8 biți) - până la 2953 octeți
  • Kanji / Kana - până la 1817 de caractere

Codul QR are următoarele niveluri de corectare a erorilor, caracterizat prin cantitatea de informații de restaurat (de la cea mai mare la cea mai mică):

Algoritmul de corectare a erorilor se bazează pe codul Reed-Solomon.

În plus, există mai multe versiuni ale reprezentării datelor (1-40), care diferențiază cantitatea maximă de informații stocate și, în consecință, mărimea matricei.

Codul DataMatrix

Acesta este un alt tip de cod 2D, mai puțin obișnuit pe Internet, dar mai compact. Codul prevede, de asemenea, stocarea informațiilor pentru recuperare de până la 30%. Spre deosebire de QR, zona de aplicare nu trebuie să fie pătrată.

punerea în aplicare

Așadar, sa decis implementarea diferitelor motoare de randare pentru codurile de bare, în funcție de suportul de la client sau de alte caracteristici, precum și suport pentru diferite tipuri de codificatoare:







După cum sa dovedit, în multe browsere curbe, cum ar fi toate la Internet ură Exploder-o, și Opera nu este întreg pixelii sunt de lucru foarte foarte ciudat, prin urmare, să fie dimensiunile elementika compatibile ale fiecărei matrice a trebuit să fie rotunjită la numărul întreg inferior, pentru a evita ieșirea matricei în afara zonei. Din acest motiv, matricea a trebuit să fie separată prin indentări din recipient.

Acum implementăm motoarele renderer. Deoarece prioritatea pentru noi va fi folosirea canvasului, vom începe cu aceasta:

Dacă Canvas-ul nu este disponibil, vom genera în mod proastă matricea elementelor HTML, este mai lent, dar funcționează:

După testarea în IE, ca de obicei, sa dovedit că nu funcționează acolo așa cum a fost intenționat, așa că, din lipsă de înțelegere, vom scrie un motor tabular:

După cum puteți vedea, totul sa dovedit a fi destul de banal. Rămâne doar să scrieți o foaie de stil:

Iată că renunț la unele proprietăți doar în cazul în care nu puteți face acest lucru dacă ar părea grozav.

După cum am menționat deja mai sus, implementăm generarea de coduri QR. folosind codificatorul de la Kazuhiko Arase. De asemenea, la mormânt și de dragul unui exemplu vom adăuga generatorul DataMatrix de coduri, este o alternativă la codurile QR, cu toate acestea mai puțin răspândită pe spațiile de pe Internet și susținută de un număr mai mic de scanere. În script, vom verifica dacă codificatorul este disponibil și numai inițializați motorul.

Encoder din Kazuhiko necesită cod de tip indicație obligatorie, adică un număr de la 0 la 10, care, împreună cu nivelul de corectare a erorilor este versiune a codului, dar diferite tipuri de cod poate stoca diferite cantități de informații, așa că am decis să pună în aplicare selectarea automată a tipului corespunzător datelor, în cazul în care nu este specificat. Deci, codificatorul QR va arăta astfel:

Pentru a codifica tipul DataMatrix, vom împrumuta algoritmul de la HOUREZ Jonathan din proiectul jQuery BarCode. Scenariul codificatorului cu modificări minore va fi în atașament, nu o voi cita aici, dar voi da codul codificatorului:

Închidere, cu mai multă exactitate

Și acum despre utilizarea pluginului rezultat. Creați un fișier numit test.html cu următorul conținut:

Am arătat trei matrice cu cod: dimensiunea obișnuită, mare și mică. Noi încercăm, scanăm, bucurăm: -]

Și, în cele din urmă vreau să spun că, dacă dispozitivul de mână cu aparatul de fotografiat și nu codurile de carte de text, puteți utiliza th zbar. Pachetul este în orice distribuție, și există două utilități: zbarimg și zbarcam, numirea pe care, cred eu, nu este atât de greu de ghicit.

Iată ce am primit:

Generați coduri de bare qr și datamatrix pe paginile web folosind javascript

Aceasta este în esență totul.

De asemenea, puteți citi codul QR de pe site-ul producătorului: -]







Articole similare

Trimiteți-le prietenilor: