JSFiddle - React, Tailwind, and code Playground

by Sebastian Kay

HTML

<div id="demo"></div>
<input type="number"/>

JavaScript

const storeKey = "fileName"

async function downloadImage(imageUrl) {
  // Fetching the image from the URL
  //const response = await fetch(imageUrl)
  await fetch(imageUrl, {
    credentials: "include",
    headers: {
      "User-Agent":
        "Mozilla/5.0 (X11; Linux x86_64; rv:128.0) Gecko/20100101 Firefox/128.0",
      Accept: "text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8",
      "Accept-Language": "de,en-US;q=0.7,en;q=0.3",
      "Sec-GPC": "1",
      "Alt-Used": "api.airforce",
      "Upgrade-Insecure-Requests": "1",
      "Sec-Fetch-Dest": "document",
      "Sec-Fetch-Mode": "navigate",
      "Sec-Fetch-Site": "cross-site",
      "If-Modified-Since": "Thu, 27 Feb 2025 03:16:48 GMT",
      Priority: "u=0, i",
    },
    method: "GET",
    mode: "cors",
  })
  // Reading the response as a buffer
  const buffer = await response.buffer()
  // Writing the buffer to a file named 'image.png'

  const reader = new FileReader()
  reader.onload = (event) => {
    console.log(event.target.result)
  }
  reader.onerror = (event) => {
    console.log(event.target.error)
  }
  reader.readAsArrayBuffer(buffer)
}

const imageUrl =
  "https://api.airforce/v1/imagine?prompt=A+beautiful+landscape&size=1:1&seed=123456&model=flux-realism"

downloadImage(imageUrl)