JSFiddle - React, Tailwind, and code Playground

by Sebastian Kay

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<div class="container"></div>

JavaScript

const head = document.head
const body = document.body
const container = document.querySelector(".container")

body.setAttribute("data-bs-theme", "dark")

function createImage() {
  const oldCanvas = container.querySelector("canvas")
  if (oldCanvas) oldCanvas.remove

  const img = new Image()
  // img.src = 'https://api.airforce/v1/imagine?prompt=A+beautiful+landscape&size=1:1&seed=123456&model=flux-realism'
  img.src = 'https://api.airforce/v1/imagine?prompt=A+cute+cat&size=1:1&seed=42&model=flux-realism'

  img.onload = () => {
    const canvas = document.createElement('canvas')
    canvas.width = img.width
    canvas.height = img.height
    canvas.style.width = "100%"
    const ctx = canvas.getContext('2d')
    ctx.drawImage(img, 0, 0)

    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height)
    // imageData kann jetzt in eine IndexedDB geschrieben werden

    container.append(canvas)
  }
}

createImage()