Zenn
Open12

プロフィールアイコンのリサイズ機能を実装したい

myttymytty


Zenn のようにプロフィールアイコンのリサイズ機能を実装したい。

myttymytty

インストール

npm i --save react-avatar-editor
myttymytty

とりあえず、README の Usage に書いてあった以下を表示してみる

import React from 'react'
import AvatarEditor from 'react-avatar-editor'

const MyEditor = () => {
  return (
    <AvatarEditor
      image="/fighit.jpg"
      width={250}
      height={250}
      border={50}
      color={[255, 255, 255, 0.6]} // RGBA
      scale={1.2}
      rotate={0}
    />
  )
}

export default MyEditor
myttymytty

react-avatar-editor の型定義がないため怒られたので、以下を実行し@types/react-avatar-editorをインストールする

npm i -D @types/react-avatar-editor
myttymytty

よく使いそうな props

border
例: border={10}

borderRadius
例: borderRadius={999}

rotate
例: roate={90}

scale
例: scale={2.0}

slider を利用して、値を書き換えれば、リサイズが可能そう。