callstack / react-native-image-editor

A library providing an API for cropping images from the web and the local file system.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Cropped Image filesize is 10 times larger than original image - iOS

augustosamame opened this issue · comments

Bug

I am using this library to crop a local image.
Image size in Iphone is 1.7MB in size.
After cropping the image to a smaller size, the resulting image is now 16.8MB in size.
I have confirmed this by uploading both images to my PC and getting image info, which I attach.

Environment info

React native info output:

React Native Environment Info:
System:
OS: macOS 10.14.6
CPU: (8) x64 Intel(R) Core(TM) i7-4870HQ CPU @ 2.50GHz
Memory: 1.26 GB / 16.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 12.9.0 - /usr/local/bin/node
Yarn: 1.17.3 - /usr/local/bin/yarn
npm: 6.12.0 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 12.4, macOS 10.14, tvOS 12.4, watchOS 5.3
Android SDK:
API Levels: 23, 27, 28, 29
Build Tools: 28.0.3, 29.0.2
System Images: android-23 | Google APIs Intel x86 Atom_64
IDEs:
Android Studio: 3.5 AI-191.8026.42.35.5791312
Xcode: 10.3/10G8 - /usr/bin/xcodebuild
npmPackages:
react: ^16.0.0 => 16.11.0
react-native: ^0.57.1 => 0.57.8
npmGlobalPackages:
react-native-cli: 2.0.1

Library version: 2.1.0

Steps To Reproduce

Code to achieve cropped image is simple:

const cropData = {
      offset: { x: image_x, y: image_y },
      size: { width: newCroperImage_Width, height: newCroperImage_Height },
      displaySize: { width: newCroperImage_Width, height: newCroperImage_Height },
      resizeMode: 'contain',
    };

    return ImageEditor.cropImage(imagePath, cropData).then(url => {
      console.log('Cropped image uri', url);
      return url;

Describe what you expected to happen:

Cropped image filesize should be smaller than original image size.

image compare

Image on the right is cropped image of original on the left

Turns out generate file is not a jpg at all. It's a PNG with a jpg extension. So the solution would be to use something like react-native-image-resizer to compress it back to jpg?

@augustosamame For now, you can downgrade version to 2.0.2 which will work fine for you. This issue will be addressed in #44

@Trancever is this issue resolved?
I see #44 is merged and released in 2.2.0 version

@olegmilan Yes, jpg images will still be jpg after cropping. Should be resolved in v2.2.0. Let us know if it doesn't work for you.