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!
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:
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())
}
})
}
