vision-camera-cropper

A react native vision camera frame processor for cropping

Demo video

Versions

For Vision Camera v3, use versions 0.x.

For Vision Camera v4, use versions >= 1.0.0.

Installation

1yarn add vision-camera-cropper
2cd ios && pod install

Add the plugin to your babel.config.js:

1module.exports = {
2   plugins: [['react-native-worklets-core/plugin']],
3    // ...

Note: You have to restart metro-bundler for changes in the babel.config.js file to take effect.

Usage

1. Crop a frame and return its base64 or path.

   1import { crop } from 'vision-camera-cropper';
   2
   3// ...
   4const frameProcessor = useFrameProcessor((frame) => {
   5  'worklet';
   6  //coordinates in percentage
   7  const cropRegion = {
   8    left:10,
   9    top:10,
   10    width:80,
   11    height:30
   12  }
   13  const result = crop(frame,{cropRegion:cropRegion,includeImageBase64:true,saveAsFile:false});
   14  console.log(result.base64);
   15}, []);

2. Rotate an image.

   1const rotated = await rotateImage(base64,degree);

Get Bitmap/UIImage via Reflection

If you are developing a plugin to get the camera frames, you can use reflection to get it as Bitmap or UIImage on the native side.

Java:

1Class cls = Class.forName("com.visioncameracropper.CropperFrameProcessorPlugin");
2Method m = cls.getMethod("getBitmap",null);
3Bitmap bitmap = (Bitmap) m.invoke(null, null);

Objective-C:

1- (UIImage*)getUIImage{
2    UIImage *image = ((UIImage* (*)(id, SEL))objc_msgSend)(objc_getClass("CropperFrameProcessorPlugin"), sel_registerName("getBitmap"));
3    return image;
4}

You have to pass {saveBitmap: true} for the crop function.

Blog

How to Create a React Native Vision Camera Plugin to Crop Frames

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

---

Made with create-react-native-library