posted: 2019/10/14

png-pongでReact HooksからPNGを直描画

png-pongでReact Hooksを通して画像を描画出来たメモ。
デモ:
https:stackblitz.com/edit/react-ts-yaiy4a
こんな感じでeffectを利用しているが、正直別にreactの機能そんなに使ってない。
const Img = styled.div<{
  size: number
  bg: string
}>(({ size, bg }) => ({
  width: `${size}px`,
  height: `${size}px`,
  backgroundImage: `url(${bg})`,
  filter: "blur(0.2px)"
}))

const NoiseImage = () => {
  const [bgurl, setBgurl] = useState<string>("")
  const width = 100
  const height = 100

  useEffect(() => {
    const bitmap = noise(width, height, 5)
    setBgurl(bitsToStr(bitmap))
  }, [])
  return <Img size={100} bg={bgurl}></Img>
}
生成したビットマップを下記のようにcreateFromRGBAArrayで渡してる。
その結果をbase64のURLとして保持し、あとはそのままbackground-imageとしてstyled-componentsに流し込んでる
このへんは完全にpng-pongのおかげだ。
const bitsToStr = (bits: number[][][]) => {
  const width = bits[0].length
  const height = bits.length
  const bit = new Uint8ClampedArray(bits.flat(2))
  const buffer = createFromRGBAArray(width, height, bit)
  const b642 = base64.fromByteArray(new Uint8Array(buffer))

  return "data:image/png;base64," + b642
}
これだけだと正直Canvasの方が良いが、pngが使えることでbackground-clip: textの背景に使うことなども出来る。
今の所Canvasに勝る利点はなさそうではあるが、bitmap部分が複雑でWASMを利用するなどでCanvasよりも素早く描画出来るなどの可能性がありそう
Edit on Github
|