Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://developer.mozilla.org/en-US/docs/Web/API/Response/bytes below:

Response: bytes() method - Web APIs

Baseline 2025

Newly available

Note: This feature is available in Web Workers.

The bytes() method of the Response interface takes a Response stream and reads it to completion. It returns a promise that resolves with a Uint8Array.

None.

A promise that resolves with an Uint8Array.

DOMException AbortError

The request was aborted.

TypeError

Thrown for one of the following reasons:

• The response body is disturbed or locked.
• There was an error decoding the body content (for example, because the Content-Encoding header is incorrect).

RangeError

There was a problem creating the associated ArrayBuffer. For example, if the data size is more than Number.MAX_SAFE_INTEGER.

The code below shows how you might fetch a text file, return the body as a Uint8Array, and then decode this into a string.

const response = await fetch("https://www.example.com/textfile.txt");
const textFile = await response.bytes();
const string = new TextDecoder().decode(textFile);
console.log(string);

This example demonstrates how you can use bytes() to read the signature bytes of a number of image files, and identify the type.

First we define a <select> element for choosing the file type, with corresponding values that indicate the specific file on WikiMedia commons to fetch.

<label for="file-select">Choose a file:</label>

<select name="Files" id="file-select">
  <option value="">--Select an image type--</option>
  <option
    value="https://upload.wikimedia.org/wikipedia/commons/7/70/Example.png">
    PNG
  </option>
  <option
    value="https://upload.wikimedia.org/wikipedia/commons/a/a9/Example.jpg">
    JPG
  </option>
  <option
    value="https://upload.wikimedia.org/wikipedia/commons/8/8f/Example.gif">
    GIF89a
  </option>
</select>

#log {
  height: 100px;
  overflow: scroll;
  padding: 0.5rem;
  border: 1px solid black;
}

const logElement = document.querySelector("#log");
function log(text) {
  logElement.innerText = `${logElement.innerText}${text}\n`;
  logElement.scrollTop = logElement.scrollHeight;
}

The code first checks if the bytes() method is supported. If the method is supported it adds an event handler for the change event on the <select> element. When the value changes, it passes the value of the selection (a URL for an image file) to the checkSignature() method defined below. If the method is not supported it logs this information.

if ("bytes" in Response.prototype) {
  const selectFileElement = document.getElementById("file-select");
  selectFileElement.addEventListener("change", (event) => {
    try {
      checkSignature(event.target.value);
    } catch (e) {
      log(e);
    }
  });
} else {
  log("Response.bytes() not supported");
}

The checkSignature() method is defined below. This fetches a file at the given url, and uses response.bytes() to get its contents as a byte array. The initial bytes are then compared to the initial signature bytes of a number of common file types. The file name and the file type are then logged.

async function checkSignature(url) {
  if (url == "") return;
  log(`File: ${url}`);
  const response = await fetch(url);
  const image = await response.bytes();

  // File signatures from: https://en.wikipedia.org/wiki/List_of_file_signatures
  const jpgSignature = [0xff, 0xd8, 0xff, 0xe0];
  const pngSignature = [0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a];
  const gif89aSignature = [0x47, 0x49, 0x46, 0x38, 0x39, 0x61];

  if (
    image
      .slice(0, jpgSignature.length)
      .every((byte, index) => byte === jpgSignature[index])
  ) {
    log(`JPG signature: FF D8 FF E0`);
  } else if (
    image
      .slice(0, pngSignature.length)
      .every((byte, index) => byte === pngSignature[index])
  ) {
    log(`PNG signature: 89 50 4E 47 0D 0A 1A 0A`);
  } else if (
    image
      .slice(0, gif89aSignature.length)
      .every((byte, index) => byte === gif89aSignature[index])
  ) {
    log(`GIF (GIF89a) signature: 47 49 46 38 39 61`);
  } else {
    log("Unknown format");
  }
}

Choose an image type using the selection list. The log should then display the file name, along with the file type that was determined from the file's signature.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.3