es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Cómo recuperar imágenes PNG de la respuesta de la API de Labelary (javascript)

18 Jun, 2023 Programación

Estoy tratando de convertir una cadena ZPL a una imagen png a través de la API de labelary.com.

Puedo enviar una solicitud fetch y recibir una respuesta. Sin embargo, cuando miro la pestaña de red en las herramientas de desarrollo de Chrome, puedo ver la imagen png en la pestaña de “vista previa”, pero la pestaña de respuesta está vacía. ¿Cómo podría guardar esa imagen png que puedo ver en la ventana de vista previa?

Aquí está mi código:

const generateLabelBtn = document.getElementById('generateLabelBtn');

async function requestLabel(zplString) {

  const response = await fetch(`http://api.labelary.com/v1/printers/8dpmm/labels/4x6/0/`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
    },
    body: JSON.stringify(zplString),
  })

  console.log(response);
}

document.getElementById("generateLabelBtn").onclick = function() {
  requestLabel(test)
};


const test = `^XA

^FX Sección superior con logo, nombre y dirección.
^CF0,60
^FO50,50^GB100,100,100^FS
^FO75,75^FR^GB100,100,100^FS
^FO93,93^GB40,40,40^FS
^FO220,50^FDIntershipping, Inc.^FS
^CF0,30
^FO220,115^FD1000 Shipping Lane^FS
^FO220,155^FDShelbyville TN 38102^FS
^FO220,195^FDUnited States (USA)^FS
^FO50,250^GB700,3,3^FS

^FX Segunda sección con dirección del destinatario e información de permiso.
^CFA,30
^FO50,300^FDJohn Doe^FS
^FO50,340^FD100 Main Street^FS
^FO50,380^FDSpringfield TN 39021^FS
^FO50,420^FDUnited States (USA)^FS
^CFA,15
^FO600,300^GB150,150,3^FS
^FO638,340^FDPermit^FS
^FO638,390^FD123456^FS
^FO50,500^GB700,3,3^FS

^FX Tercera sección con código de barras.
^BY5,2,270
^FO100,550^BC^FD12345678^FS

^FX Cuarta sección (las dos cajas en la parte inferior).
^FO50,900^GB700,250,3^FS
^FO400,900^GB3,250,3^FS
^CF0,40
^FO100,960^FDCtr. X34B-1^FS
^FO100,1010^FDREF1 F00B47^FS
^FO100,1060^FDREF2 BL4H8^FS
^CF0,190
^FO470,955^FDCA^FS

^XZ`

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';">
  </head>
  <body>
    <button id="generateLabelBtn">Generate Label</button>
  </body>
</html>
Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para guardar la imagen png que se muestra en la ventana de vista previa, puedes seguir los siguientes pasos:

    1. Obtener los datos de respuesta como un objeto blob llamando al método .blob() en el objeto de respuesta.

    2. Crear una URL de objeto a partir del objeto blob utilizando la función URL.createObjectURL().

    3. Crear un nuevo objeto Image y establecer su origen en la URL del objeto.

    4. Crear un elemento de lienzo HTML y establecer su ancho y alto para que coincida con las dimensiones del objeto Image.

    5. Dibujar el objeto Image en el lienzo usando el método drawImage().

    6. Utilizar el método .toDataURL() en el lienzo para obtener los datos de la imagen como una cadena codificada en base64.

    7. Utilizar la cadena codificada en base64 para crear un nuevo archivo de imagen png utilizando las funciones atob() y Uint8Array().

    Aquí tienes un ejemplo de implementación de estos pasos:

    async function requestLabel(zplString) {

  const response = await fetch(`http://api.labelary.com/v1/printers/8dpmm/labels/4x6/0/`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
    },
    body: JSON.stringify(zplString),
  });

  const blob = await response.blob();
  const objectUrl = URL.createObjectURL(blob);
  const img = new Image();
  img.src = objectUrl;
  img.onload = function() {
    const canvas = document.createElement('canvas');
    canvas.width = img.width;
    canvas.height = img.height;
    const ctx = canvas.getContext('2d');
    ctx.drawImage(img, 0, 0);
    const dataUrl = canvas.toDataURL('image/png');
    const data = atob(dataUrl.replace(/^data:image\/(png|jpeg);base64,/, ''));
    const uint8Array = new Uint8Array(data.length);
    for (let i = 0; i < data.length; i++) {
      uint8Array[i] = data.charCodeAt(i);
    }
    const file = new File([uint8Array], 'label.png', {type: 'image/png'});
    saveAs(file);
  };
}

document.getElementById("generateLabelBtn").onclick = function() {
  requestLabel(test)
};

    En este ejemplo, usamos la función saveAs() para desencadenar la descarga de un archivo de la imagen PNG. La función saveAs() requiere la biblioteca FileSaver.js, que puedes descargar desde https://github.com/eligrey/FileSaver.js/. Alternativamente, puedes utilizar un método distinto para desencadenar la descarga de archivos, como abrir la imagen en una nueva pestaña o ventana.

Comments are closed.