Question 32839 in React native Question posted in
The official React Native documentation can be found here.

How to compress image size without effecting image quality? – React native

How to compress image size without effecting image quality? how can i create a function that take a image permater of a imageuri and then compress that image? I am using react native cli with Nodejs

How can i get this size

image: {
width: ‘130%’,
aspectRatio: 1,
height: 600,
}

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    Well It's possible to compress the image without affecting image quality I found this package name react-native-image-resizer that I used to do that now my 3MB image is now 50kb only

    const compressedImage = await ImageResizer.createResizedImage(
    ImageUrl,
    600,
    600,
    'JPEG',
    80
);

  2. 0

    You can use npm module sharp. Try this code.

    const sharp = require('sharp');

sharp(imageuri)
  .resize({
    width: 600,
    height: 600
  })
  .png({quality: 100})
  .toFile(outputuri, (err, data) => {
    if (err) console.log(err);
    console.log(data);
  });

    Besides this, inside resize method you can use more parameters such as fit, position, background etc.
    Please take a look at this article https://www.digitalocean.com/community/tutorials/how-to-process-images-in-node-js-with-sharp

    Hope this helps you.

    Login or Signup to reply.
  3. 0

    Since you are using react native I would suggest to use react-native-compressor

    Then in the code you can do

    import { Image as imageCompressor } from 'react-native-compressor';

const compressed = await imageCompressor.compress(uri, {
    compressionMethod: 'auto',
    returnableOutputType: 'uri',
})

    Where uri is the path to your image. Here are some examples of how the auto compression method works. You can also do manual compressions and can check the NPM package documentation for more info.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search