Блог

Главная - Вопросы по программированию - Как получить png из ответа labelary api (javascript)

Как получить png из ответа labelary api (javascript)

javascript #png #zpl

#javascript #png #zpl

Вопрос:

Я пытаюсь преобразовать строку ZPL в изображение png с помощью labelary.com API.

Я могу отправить запрос на выборку и получить ответ. Однако, когда я смотрю на вкладку «Сеть» в Chrome dev tools, я вижу изображение в формате png на вкладке «предварительный просмотр», но вкладка «Ответ» пуста, как мне сохранить изображение в формате png, которое я вижу в окне предварительного просмотра?

Вот мой код:

 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 Top section with logo, name and address.
^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 Second section with recipient address and permit information.
^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 Third section with bar code.
^BY5,2,270
^FO100,550^BC^FD12345678^FS

^FX Fourth section (the two boxes on the bottom).
^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>

Ответ №1:

Проблема в том, что вы пытаетесь распечатать ответ на консоли, а не добавлять изображение ответа в тело. Чтобы получить изображение из ответа, вам нужно преобразовать его в Blob, а затем получить URL-адрес изображения из it.To узнайте больше о больших двоичных объектах

В html-коде просто добавьте контейнер div, в котором вы хотите отобразить свое изображение

 <div id="container"></div>

JS-код

  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);

        const responseBlob = await response.blob(); 
        const img = document.createElement('img');
        img.src = URL.createObjectURL(responseBlob);
        document.querySelector(`#container`).append(img);
    }

    generateLabelBtn.addEventListener("click", (e) => {
      requestLabel(test);
    });

    const test = `^XA

                ^FX Top section with logo, name and address.
                ^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 Second section with recipient address and permit information.
                ^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 Third section with bar code.
                ^BY5,2,270
                ^FO100,550^BC^FD12345678^FS

                ^FX Fourth section (the two boxes on the bottom).
                ^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`;

Комментарии:

1. Большое вам спасибо, это именно то, что мне было нужно, я знал, что есть что-то, связанное с объектом blob, но я не мог понять, что именно.

2. Добро пожаловать @Komakino_1251

Метки: