callstack / react-native-image-editor

A library providing an API for cropping images from the web and the local file system.
MIT License
376 stars 118 forks source link

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

Closed augustosamame closed 4 years ago

augustosamame commented 4 years ago

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.

augustosamame commented 4 years ago

image compare

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

augustosamame commented 4 years ago

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?

Trancever commented 4 years ago

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

olegmilan commented 4 years ago

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

Trancever commented 4 years ago

@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.