react-image-file-resizer
react-image-file-resizer copied to clipboard
FileReader': parameter 1 is not of type 'Blob'.
I was trying to get the local image and tried to resize it, but getting this error.. Unhandled Rejection (TypeError): Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'.
I have imported the file
import sample from './assets/sample.jpg';
and passed it into this method :
const resizeFile = (file) =>
new Promise((resolve) => {
Resizer.imageFileResizer(
file,
300,
300,
'JPEG',
100,
0,
(uri) => {
// resolve(uri);
},
'base64'
);
});
I have the same issue. Did u figured out how to fix it? i'd be appreciate it
I have the same issue. Did u figured out how to fix it? i'd be appreciate it
I was unable to do this in the frontend, so I moved the image processing to the backend side
same issue here. I've been using this package for long time, never had this issue:
Same here. I create an image like this
const createImage = (imageData: any) => {
const image = new Image();
image.src = `url(data:image/jpeg;base64,${imageData})`;
return image;
};
and then pass it into Resizer
const resizeFile = file =>
new Promise(resolve => {
Resizer.imageFileResizer(
file,
300,
300,
'JPEG',
100,
0,
uri => {
resolve(uri);
},
'base64'
);
});
Same here
same here 2023 :(
I did a walk around, I was getting an image URL from the camera, I got the image itself like this
async getImage(path){ const response = await fetch(path); const blob = await response.blob(); return blob; };
then I passed it to the resizer and voila
FMSService.getImage(url).then((image: any) => { onResizeImage(image).then((resizedFile: any)=>{ prepareFormData(resizedFile); //to send to the server }); });
I am also using cropperjs, so first crop, then resize.
the other functions
`const onResizeImage = async (imageFile: any) => { try { const file = imageFile; const image = await resizeFile(file); return image; } catch (err) { console.log(err); } }
const resizeFile = (file: any) =>
new Promise((resolve) => {
Resizer.imageFileResizer(
file,
700,
700,
"JPEG",
100,
0,
(uri) => {
resolve(uri);
},
"blob"
);
});`