1

Estoy imprimiendo un código de barras con jsBarcode, lo imprimo un archivo pdf, pero al momento de agregarlo al pdf se de menos calidad que si fuera en la web, de momento solo sucede con el código de barras, con otras imágenes no parece haber problemas.

Para insertarlo en un pdf utilizo canvas, el código que utilizo para crear el código de barras y agregarlo al pdf

const canvas = createCanvas();
JsBarcode(canvas, ref); // lenar
const barcode =  canvas.toDataURL();
const width = canvas.width * 0.264583;
const height = canvas.height * 0.264583;
doc.addImage(barcode, 'PNG', initial, 185, width, height, 'barcode', 'NONE');

utilizo esta parte para cambiar el tamaño que ocupara en el PDF ya que su tamaño normal esta en pixeles al parecer y el pdf utiliza mm. Por lo que ocupa mucho espacio si lo dejo con pixeles.

const width = canvas.width * 0.264583;
const height = canvas.height * 0.264583;

uno de los parametros de addImage es la compression en el cual esta en NONE, pero tambien probé todas las opciones posibles: 'NONE', 'FAST', 'MEDIUM' and 'SLOW'

pero el resultado sigue siendo el mismo. Aquí dejo imagenes de como se muestra en el navegador y como se muestra en el PDF.

  1. Navegador introducir la descripción de la imagen aquí
  2. PDF introducir la descripción de la imagen aquí

Intentando establecer el tamaño de JsBarcode

JsBarcode(canvas, 'hello', {width:0.4, height: 4, fontSize:5});

Resultado obtenido

introducir la descripción de la imagen aquí

4
  • Parece que estás escalando la imagen y eso puede ser lo que genera diferencias en la calidad, ¿y si intentas crear el canvas desde un principio con el tamaño objetivo y evitas escalar el width y el height? Commented el 3 jun. 2021 a las 17:47
  • @DanielRodríguezMeza ya trate de escalar el canvas, pero no respecta las medidas que yo coloco, toma las medidas de jsBarcode y al cambiar el width y height lo que ocasiona que tenga mucho peor calidad que antes.
    – Richard
    Commented el 3 jun. 2021 a las 18:00
  • @Richard debes ampliar el tamaño de tu canvas, si no respeta las medidas entonces amplia las medidas de jsBarcode o establecelas a lo que desees, ya que aparentemente el canvas que creas se encuentra ligado a jsBarcode por ende la solucion no es intentar expandir ni mucho menos escalar el canvas si no configurar jsBarcode para generar el output con medidas distintas.
    – Layer
    Commented el 3 jun. 2021 a las 18:49
  • @Riven edite mi pregunta para mostrar el resultado al modificar directamente el tamaño en JsBarcode
    – Richard
    Commented el 4 jun. 2021 a las 16:34

1 respuesta 1

1

Esto puede mejorar un poco la calidad de la imagen que te avienta canvas.toDataURL, pero no es mucha la diferencia... realmente por lo que te debes preocupar es que el output de tu jsBarcode te devuelva una imagen un poco mas grande, ya que es este el que te genera al final los pixeles del codigo de barras.

Muy bien, si nos fijamos un momento en esta pagina de aqui:

HTMLCanvasElement toDataURL

Podemos observar que la calidad por defecto que se genera como output al usar un toDataURL es del 92%, que igual es bastante decente, sin embargo podemos modificarla al 100%, pasandole ciertos parametros al metodo:

const barcode =  canvas.toDataURL('image/png', 1.0);

Sin embargo ten cuidado con ese metodo, puesto que puede que en algunos navegadores un tipo que sea diferente de image/webp no esta soportado.

En caso de no ser soportado la bajada de calidad puede deberse entonces a que el output final esta intentando usar una codificacion diferente, como lo puede ser .webp pero esta siendo guardada como una imagen jpeg o png, el formato webp, no resulta ser un formato de muy alta calidad...

2
  • En algunos casos la imagen puede verse corrompida tambien si el tipo difiere, a mi por ejemplo ya me paso, pero no recuerdo si fue en firefox de linux o en edge chromium en windows.
    – Layer
    Commented el 3 jun. 2021 a las 19:12
  • he intentado cambiar el tamaño de jsBarcode, si realiza el cambio establecido en px, pero el pdf dibuja con medidas mm, para que quepa en el pdf, tengo que establecer width:0.4, height: 4 lo cual da muy mala calidad.
    – Richard
    Commented el 4 jun. 2021 a las 16:29

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.