logo

리액트에서 이미지 마스킹하기

<Button variant="contained" component="label">
  아이콘 업로드
  <input
    accept="image/*"
    multiple
    type="file"
    hidden
    onChange={(e: ChangeEvent<HTMLInputElement>): void => handleUploadIcon(e)}
  />
</Button>

먼저, 업로드 버튼을 만들고, 모든이미지를 허용하고, file타입으로 input태그를 만든다.

const handleUploadIcon = (e: ChangeEvent<HTMLInputElement>) => {
  setImgFile(e.target.files[0])

  const imagePromise = e.target.files[0].arrayBuffer().then((buf) => {
    return makeImage(buf, figure, borderColor)
  })

  imagePromise.then((resized) => {
    const fileReader = new FileReader()
    fileReader.readAsDataURL(resized)
    fileReader.onload = (e) => {
      const image = new Image()
      image.src = e.target.result as string
      image.onload = () => {
        const base64Img = e.target.result as string
        //   //! 아이콘 해쉬 변환
        const hash = CryptoJS.SHA256(base64Img).toString()
        const file = dataURLtoFile(base64Img, 'MaskedImage.png')
        dispatch(setInfo(base64Img, 'base64Img'))
        dispatch(setInfo(hash, '아이콘 추가'))
        setFile(file)
      }
    }
  })
}

makeImage함수로 이미지를 masking 그리고, dataURLtoFile 함수로 파일객체로 만들어준다.

useEffect(() => {
  if (imgFile) {
    const imagePromise = imgFile.arrayBuffer().then((buf: ArrayBuffer) => {
      return makeImage(buf, figure, borderColor)
    })

    imagePromise.then((resized: Blob) => {
      const fileReader = new FileReader()
      fileReader.readAsDataURL(resized)
      fileReader.onload = (e) => {
        const image = new Image()
        image.src = e.target.result as string
        image.onload = () => {
          const base64Img = e.target.result as string
          const hash = CryptoJS.SHA256(base64Img).toString()
          const file = dataURLtoFile(base64Img, 'MaskedImage.png')
          dispatch(setInfo(base64Img, 'base64Img'))
          dispatch(setInfo(hash, '아이콘 추가'))
          setFile(file)
        }
      }
    })
  }
}, [borderImgState, borderColor])

useEffect(() => {
  if (icon && file) {
    dispatch(setInfo(file, 'uploadFile'))
    dispatch(setInfo(borderImg, 'borderImgState'))
    dispatch(setInfo(borderColor, 'borderColor'))
  }
}, [icon, file])

border가 바뀔때마다, 그리고 img가 바뀔때마다, masking 함수를 실행한다.

읽는 시간 4분

리덕스툴킷 찍먹하기

지금껏 프로젝트를 하면서, 리덕스를 사용하여 상태관리를 해왔다.

상태관리 라이브러리는 정말 많다. 최근에 들어본 상태관리 라이브러리는 Mobx , Recoil, Zustand 등등..

NpmTrends

다른 상태관리를 직접 프로젝트에서 적용해보진 않았지만, 통계적으로 압도적이다.

지금까지 리액트와 리덕스를 사용하면서 큰 불편함을 느낀적은 없었다.

하지만, 리덕스의 타입정의, 액션함수, 리듀서를 왔다갔다 하며 변경해줘야하는 번거로움이 있었다.

읽는 시간 4분
최신 글