Quantcast
Channel: Ionic Framework - Ionic Forum
Viewing all articles
Browse latest Browse all 48979

How to manage Compress & Resize Images with Ionic-React using "react-image-file-resizer"

$
0
0

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

Read full topic


Viewing all articles
Browse latest Browse all 48979

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>