react-image-file-resizerで画像のリサイズを行う

公開日時
更新日時

Next.jsアプリで画像アップロード機能を作成する際に、クライアント側で画像のリサイズ(縮小)を行ったものをプレビュー画像として表示したかったので「react-image-file-resizer」を使用した。

READMEのExampleを参考に組み込めば手軽にリサイズを実現できた。

import React, { useState } from 'react'

export const InputImage = () => {
  const [name, setName] = useState('')
  const [thumbnail, setThumbnail] = useState<string | null>(null)

  const resizeFile = (file: Blob): Promise<string> => {
    return new Promise((resolve) => {
      Resizer.imageFileResizer(
        file,
        300,
        300,
        'JPEG',
        100,
        0,
        (uri) => {
          resolve(uri as string)
        },
        'base64'
      )
    })
  }

  const onChange = async (event) => {
    try {
      const file = event.target.files[0]
      const image = await resizeFile(file)
      setThumbnail(image)
      setName(file.name)
    } catch (err) {
      console.error(err)
    }
  }

  return (
    <>
      <input type="file" onChange={onChange} />
      {thumbnail && <img src={thumbnail} alt={name} />}
    </>
  )
}

Related #next.js

Next.js 11

手軽にアップグレードできた

FigmaでSVG Octocatを作る その3

アウトライン化大事

_this.auth.addAuthTokenListener is not a function

8.6.5にダウングレードした

Next.jsのPreview Mode時はAnalyticsを無効化する

cookieの__next_preview_dataキーで判定