Hello Community,
I am here to ask for help.
I am using an API to get images that have high resolutions & sizes, but when loading the images in the <IonList />
component it took time to load and even the CPU & HDD are used with high percentage when scrolling the list.
So I tried to the use the package react-image-file-resizer to resize dimensions & reduce size of images and the problem is when i want to get result as String to send it back to the <IonImg src={image}/>
component, I always get this Promise<void>
in the method imageFileResizeCompression below.
This is my code snippet:
File [./utils.ts]:
/** Convert an "Image URL" to a "Blob" type.
* Tutorials links:
* https://newbedev.com/javascript-image-url-to-blob-javascript-code-example
* https://www.tutorialspoint.com/how-to-convert-an-image-to-blob-using-javascript
*/
const convertImageURLToBlob = async (imageInputURL: string) => {
const blobImage =
fetch(imageInputURL)
.then(res => res.blob()) // Gets the response and returns it as a blob
.then(blob => {
// Here's where you get access to the blob
// And you can use it for whatever you want
// Like calling ref().put(blob)
return blob;
});
return blobImage;
};
const resizeCompressAndReturnNewURL = /* async */ (imageFileBlobInput: Blob) => {
//let u = '';
const resizedImage = Compress.imageFileResizer(
//new Promise((resolve: any) => {
//Compress.imageFileResizer(
imageFileBlobInput, // the file from input of 'Blob' type
480, // width
480, // height
"JPEG", // compress format WEBP, JPEG, PNG
70, // quality
0, // rotation
(uri) => {
//u = uri.toString();
//resolve(uri.toString());
console.log(uri);
// You upload logic goes here
},
"base64" // blob or base64 default base64
);
// });
return resizedImage;
//return u;
};
/** Compress images to downgrade their "Size, Dimension (Width & Height) & Quality"
* using "ReactJS Image File Resize" library (react-image-file-resizer).
* Tutorials links:
* https://dev.to/wchr/compress-images-in-react-react-image-file-resize-4oni
* https://www.npmjs.com/package/react-image-file-resizer
* https://pretagteam.com/question/reactjs-resize-image-before-upload
*/
export const imageFileResizeCompression = async (imageInputURL: string) => {
const imageFileBlob = await convertImageURLToBlob(imageInputURL); // e.target.files[0];
console.log('imageFile Size: ', imageFileBlob.size, 'imageFile Type: ', imageFileBlob.type);
const img = /* await */ resizeCompressAndReturnNewURL(imageFileBlob); /* .then(x => x); */
return img;
}
File [./Home.tsx]:
import { imageFileResizeCompression } from '../utils/utils';
<IonList style={{ marginTop: '100px' }}>
<IonThumbnail slot='start'>
<IonImg src={imageFileResizeCompression(inputURLImageAPI).then(res => res)}/>
</IonThumbnail>
</IonList>
Thanks in advance.
1 post - 1 participant