Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feature: Add web support #131

Merged
merged 1 commit into from
Feb 5, 2024
Merged

feature: Add web support #131

merged 1 commit into from
Feb 5, 2024

Conversation

retyui
Copy link
Collaborator

@retyui retyui commented Feb 3, 2024

Summary

Make module cross-platform:

  • Issue: Add web support #47
  • Add Web support
  • Add a new optional prop format?: 'jpeg' | 'png' | 'webp'
  • Update README

Test plan

  1. Create a new Expo project
npx create-expo-app -t expo-template-blank-typescript
  1. Run web yarn web:

  2. Link a library yarn add /path/to/package/image-editor locally

  3. Try to crop image:

import ImageEditor from '@react-native-community/image-editor'

ImageEditor.cropImage('https://images.pexels.com/photos/842711/pexels-photo-842711.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2', {
    "resizeMode": "cover",
    "offset": {
        "x": 1125,
        "y": 750
    },
    "size": {
        "width": 1125,
        "height": 750
    },
    "quality": 0.7,
    "format": "jpeg"
})

Video:

Screen.Recording.2024-02-03.at.17.59.05.mov

@retyui retyui marked this pull request as ready for review February 3, 2024 17:09
@retyui retyui requested a review from mateusz1913 February 3, 2024 17:11
Copy link
Member

@mateusz1913 mateusz1913 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good!

| `size` | Yes | Size (dimensions) of the cropped image |
| `displaySize` | No | Size to which you want to scale the cropped image |
| `resizeMode` | No | Resizing mode to use when scaling the image (iOS only, Android resize mode is always 'cover', Web - no support) **Default value**: 'contain' |
| `quality` | No | The quality of the resulting image, expressed as a value from `0.0` to `1.0`. <br/>The value `0.0` represents the maximum compression (or lowest quality) while the value `1.0` represents the least compression (or best quality).<br/>iOS supports only `JPEG` format, while Android/Web supports both `JPEG`, `WEBP` and `PNG` formats.<br/>**Default value**: (iOS: `1`), (Android: `0.9`) |
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You can update that iOS supports PNG as well

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

PNG uses lossless compression, that's why UIImagePNGRepresentation does not accept compressionQuality parameter like UIImageJPEGRepresentation does, see:

if([extension isEqualToString:@"png"]){
imageData = UIImagePNGRepresentation(croppedImage);
path = [RNCFileSystem generatePathInDirectory:[[RNCFileSystem cacheDirectoryPath] stringByAppendingPathComponent:@"ReactNative_cropped_image_"] withExtension:@".png"];
}
else{
imageData = UIImageJPEGRepresentation(croppedImage, compressionQuality);
path = [RNCFileSystem generatePathInDirectory:[[RNCFileSystem cacheDirectoryPath] stringByAppendingPathComponent:@"ReactNative_cropped_image_"] withExtension:@".jpg"];
}

| `displaySize` | No | Size to which you want to scale the cropped image |
| `resizeMode` | No | Resizing mode to use when scaling the image (iOS only, Android resize mode is always 'cover', Web - no support) **Default value**: 'contain' |
| `quality` | No | The quality of the resulting image, expressed as a value from `0.0` to `1.0`. <br/>The value `0.0` represents the maximum compression (or lowest quality) while the value `1.0` represents the least compression (or best quality).<br/>iOS supports only `JPEG` format, while Android/Web supports both `JPEG`, `WEBP` and `PNG` formats.<br/>**Default value**: (iOS: `1`), (Android: `0.9`) |
| `format` | No | **(WEB ONLY)** The format of the resulting image, possible values are `jpeg`, `png`, `webp`, **Default value**: `jpeg` |
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would be cool to support it in Android and iOS implementation as well

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Agree, I going to add it after fixing one important issue on Android

@retyui retyui merged commit ab88861 into master Feb 5, 2024
6 checks passed
@retyui retyui deleted the feature/retyui/web-support branch February 25, 2024 12:47
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants