Descripción general de los escáneres de código de barras JavaScript

Recientemente, surgió una idea para ahorrar en TSD en un almacén y tratar de usar teléfonos móviles baratos (incluso sin protección contra el polvo). Planeo implementar la interfaz en forma de una aplicación web (páginas web normales, HTML + CSS + JS).

Para que todo funcione, debe ense√Īar a las p√°ginas web a escanear c√≥digos de barras a trav√©s de la c√°mara del tel√©fono. Obtener datos de la c√°mara es bastante simple. El trabajo principal es el procesamiento de cuadros. Debajo de Katom hay una descripci√≥n general de las soluciones llave en mano existentes y muchas im√°genes.



quaggaJS


Referencias


En los resultados de b√ļsqueda, esta es la primera opci√≥n. La biblioteca est√° equipada con un algoritmo de b√ļsqueda de c√≥digo de barras en la imagen. Admite c√≥digos de barras unidimensionales: EAN, CODE 128, CODE 39, EAN 8, UPC-A, UPC-C, I2of5, 2of5, CODE 93, CODABAR. Admite la instalaci√≥n a trav√©s de NPM o Bower. La interfaz de la biblioteca consta de un objeto Quagga que contiene 7 m√©todos, todo es bastante simple.

Hay una página en el sitio web del proyecto donde puede descargar muestras y probar la biblioteca en acción. Intentamos la muestra No. 1. Es necesario especificar algunas configuraciones, ok, no hay duda.


Como resultado del lanzamiento, no fue posible determinar el código de barras, pero la ubicación del código de barras se determinó bien.

Intentamos la muestra No. 2. De alguna manera sin alegría.



Estamos tratando de cambiar la configuraci√≥n: coloque "Tama√Īo de parche" -> "Grande". No El resultado correcto se obtiene configurando `Resoluci√≥n (lado largo) = 800px`. Sin embargo, en realidad, el lado m√°s grande es de 640 p√≠xeles.



Quizás funcione mejor con imágenes de alta resolución. Bueno, hacemos la tercera muestra (muestra No. 3).



Honestamente, no sé qué tipo de código de barras es y probé todas las configuraciones: no se determinó el cuartel general. Ok, intentemos con otra muestra de alta resolución (muestra 4):



Por alguna razón, no fue posible lograr un resultado con ninguna configuración.

Probemos una muestra "limpia" de la siguiente biblioteca (muestra No. 5):



Este fue reconocido.

javascript-barcode-reader


Referencias


Esta es la segunda biblioteca en el tema. Conoce formatos: Código 128 (UCC / EAN-128), Código 93, Código 39, Estándar / Industrial 2 de 5, Intercalado 2 de 5, Codabar, EAN-13. Es compatible con la instalación a través de NPM, o simplemente puede conectarlo así:

<script src="//unpkg.com/javascript-barcode-reader/dist/javascript-barcode-reader.min.js"></script> 

O puede descargar solo un archivo: javascript-barcode-reader.min.js de tama√Īo 10 445 bytes.

El proyecto tiene una página con ejemplos, pero las imágenes se obtuvieron generando códigos y no desde la cámara. Esto no funcionará para nosotros.

Código para probar la biblioteca
barcode-scan.html
 <html> <head> <meta http-equiv="content-language" content="ru" /> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <script src="//unpkg.com/javascript-barcode-reader/dist/javascript-barcode-reader.min.js"></script> <script type="text/javascript" src="barcode-scan.js"></script> </head> <body onload='onLoadPage()'> <img id="img1" src="scan02.png" /> </body> </html> 

barcode-scan.html

 function onLoadPage() { Image = document.getElementById('img1'); javascriptBarcodeReader( Image /* Image ID || HTML5 Image || HTML5 Canvas || HTML5 Canvas ImageData || Image URL */, { barcode: 'EAN-13', // 'Code-39' type: 'industrial', //    "Code-2of5",   "industrial"  "Interleaved" } ) .then(code => { console.log(code) }) .catch(err => { console.log(err) }); } 



Muestra no 1. La biblioteca envía a la consola "Error: ¡Error al extraer el código de barras!".
Muestra no 2. La biblioteca envía a la consola "Error: ¡Error al extraer el código de barras!".
Muestra no 3. La biblioteca envía a la consola "Error: ¡Error al extraer el código de barras!".
Muestra no 4. La biblioteca emite "601" a la consola.

Hmm ... ¬Ņtal vez la biblioteca no est√° conectada correctamente? Probemos esta muestra:



Muestra no 5. La biblioteca emite "10023" a la consola. Genial

Lector de código de barras Dynamsoft


Sitio del proyecto
El n√ļcleo de la biblioteca est√° escrito en WebAssembly (WASM) y solo envoltorios de JavaScript, lo que no es tan interesante. Conoce formatos:

1D: Código 39, Código 93, Código 128, Codabar, EAN-8, EAN-13, UPC-A, UPC-E, Intercalado 2 de 5 (ITF), Industrial 2 de 5 (Código 2 de 5 Industria, Estándar 2 de 5, Código 2 de 5), ITF-14;

2D: PDF417, Código QR, DataMatrix, Azteca.

Esta es una biblioteca paga, disponible por suscripci√≥n, todos los tipos de c√≥digos de barras cuestan $ 2199 por a√Īo , si solo son c√≥digos unidimensionales, el costo disminuye a $ 1099 por a√Īo . Hay una p√°gina1 y una p√°gina2 para experimentos.

Muestra no 1. Si! La respuesta es correcta El √°rea est√° rodeada con bastante claridad.



Muestra no 2. Si La respuesta es nuevamente correcta. El área también está rodeada con bastante claridad.



Muestra no 3. Ahora sabemos el tipo de este código de barras.



Muestra no 4. La respuesta también es correcta.



Y, aparentemente, te puede gustar esto:



Sin embargo, la primera muestra fue reconocida con un error. E intente nuevamente de esta manera (la imagen original est√° muy borrosa ):



Ahora sabemos que hay al menos una biblioteca en funcionamiento, aunque sea de pago.

tobytailor get_barcode_from_image.js


Referencias


Una peque√Īa biblioteca simple. Conoce solo un formato de c√≥digo de barras: UPC. Si primero agrega cero a un c√≥digo de este tipo, obtiene EAN-13.

Probamos la primera muestra:



Resultado: 000204892734. Se reconoce el patrón.

Tome la muestra No. 2 (EAN-13). Solo para trabajar, debe escribir la línea 32 del script de esta manera:

 ctx.drawImage(img, 0, 0, width, height); //  : ctx.drawImage(img, 0, 0); 

Resultado: XXXXXXXXXXXXX. Muestra no reconocida.

Toma lo siguiente:



Resultado: XXXXXXXXXXXXX. No reconocido

Probemos algo simple:



Resultado: no reconocido. Quizás necesite ser atendido de tal manera que, además del código de barras, no haya nada en la imagen, excepto el espacio extra.



Resultado: 022334545453.

Y otro EAN-13:



Parcialmente reconocido.

EddieLa BarcodeReader


Github
Otra biblioteca gratuita, con un peque√Īo atractivo del autor:
Si le gusta y / o usa este proyecto con fines comerciales, considere donar para apoyar mi trabajo.

Si le gusta y / o usa este proyecto con fines comerciales, considere donar para apoyar mi trabajo.
Conoce formatos: Code128, Code93, Code39, Standard / Industrial 2 de 5, Interleaved 2 of 5, Codabar y EAN-13. Tiene una página para la experimentación.

Muestra no 1. El alcance y el tipo están definidos correctamente. El código fue reconocido con un error.



Muestra no 2. Buen resultado Reconocido correctamente: área, tipo de código de barras y el propio código de barras.



Muestra no 3. Negativamente Ella no puede hacerlo en √°ngulo.



Muestra no 4. Muy bien, patrón reconocido.



Muestra no 5. Patrón reconocido.



Bueno, loable. Cambios recientes en la biblioteca ocurrieron hace 3 a√Īos.

WebCodeCamJS


Referencias


Biblioteca gratuita (licencia MIT). Conoce los siguientes tipos de códigos de barras unidimensionales: Código 128, Código 93, Código 39, Codabar, EAN-13. Capaz de reconocer los códigos QR. En la página del proyecto hay una oportunidad para probar la biblioteca.

Muestra No. 1: No reconocida.



Muestra No. 2: Reconocida correctamente.



Muestra No. 3: No reconocida.
Muestra No. 4: No reconocida.
Muestra No. 5: Reconocida correctamente.



La capacidad de reconocer códigos QR parece interesante, por lo que recolecté 6 muestras para probar esta y las bibliotecas posteriores:



Muestra No. 1: nada.
Muestra No. 2: Nada.
Muestra 3: nada.
Muestra 4: nada.
Muestra No. 5: Nada.
Muestra No. 6: Reconocida.



QR web


P√°gina del proyecto
Biblioteca libre Declarado la generación y reconocimiento de códigos QR. En la página del proyecto hay una oportunidad para probar la biblioteca.

Ninguna de las seis muestras fue reconocida. Hay un generador de códigos QR en la página, aquí se reconocen los códigos obtenidos con este generador.



UPD Juntos, en los comentarios (gracias a TiesP ), fue posible establecer que el algoritmo funciona, simplemente no sabe cómo determinar la orientación del código. Con esto en mente, los nuevos resultados son los siguientes:
Muestra No. 1 - no reconocida.
Muestra No. 2 - no reconocida.
Muestra No. 3 - no reconocida.
Muestra No. 4 - no reconocida.
Muestra No. 5 - reconocida.
Muestra No. 6 - reconocida.


Aparentemente todavía hay algunas restricciones en el fondo, ya que tanto mi muestra como la muestra proporcionada en los comentarios se determinaron en papel:


Resumen


Eso es todo lo que encontr√©. Encontramos varias implementaciones basadas en una de las anteriores, por ejemplo, esta . Repito que el criterio de b√ļsqueda principal es que todo el trabajo debe realizarse en el lado del cliente a trav√©s de un navegador y sin ninguna instalaci√≥n adicional. Es decir, la soluci√≥n debe implementarse en JavaScript y / o Wasm (por lo tanto, ZBar no es adecuado).

Si conoce una biblioteca que cumple con estos requisitos y no está en el artículo, infórmenos.

La calificación de la biblioteca resultante es la siguiente:



El artículo tuvo lugar gracias a la tienda de iluminación en línea Devine Light .

Source: https://habr.com/ru/post/442770/


All Articles