How to use base64 data in react-image-file-resizer?

Question

I am using react-signature-canvas library to capture user signature in my app. It returns data in base64 format. My requirement is to resize the captured signature into 96*96 resolution before sending it to a backend and for that I am using react-image-file-resizer library. But, props of react-image-file-resizer requires a path of image and I don't have a path but the base64 data.

I am new to react. Please help me!

Answer 1

I read the documentation for react-image-file-resized. It does not look like you could do that unless you are using node (because if you are, you can actually temporarily save it and read then delete).

My suggestion is to resize the Base64 image itself. Here are some resources that you might want to take a look into to do that:

• Resize Base 64 Gist
• Resize Without Canvas

especially this code

const resizeImage = (base64Str, maxWidth = 400, maxHeight = 350) => {
  return new Promise((resolve) => {
    let img = new Image()
    img.src = base64Str
    img.onload = () => {
      let canvas = document.createElement('canvas')
      const MAX_WIDTH = maxWidth
      const MAX_HEIGHT = maxHeight
      let width = img.width
      let height = img.height

      if (width > height) {
        if (width > MAX_WIDTH) {
          height *= MAX_WIDTH / width
          width = MAX_WIDTH
        }
      } else {
        if (height > MAX_HEIGHT) {
          width *= MAX_HEIGHT / height
          height = MAX_HEIGHT
        }
      }
      canvas.width = width
      canvas.height = height
      let ctx = canvas.getContext('2d')
      ctx.drawImage(img, 0, 0, width, height)
      resolve(canvas.toDataURL())
    }
  })
}