Extracting images with cssgram filters + color matrix filters

[sberkeo]

I could not fully understand the documentation and achieve success. cssgram filters are running successfully and being extracted. For the color matrix, I change values such as brightness and contrast in the image with the @react-native-color-matrix-image-filters library. It was successful in the preview, but when I tried to extract the image with the @react-native-image-filter-kit library, it ignored the color matrix. I decided to completely switch back to concatcolorMatrix in @react-native-image-filter-kit, but this time I'm getting an error. [Invariant Violation: Color matrix matB should be an array with 20 elements.]. I would be very happy if anyone could show me the right way. I need to make changes to cssgram filters and color matrix and extract the image.

import {
    AdenCompat,
    _1977Compat,
    BrannanCompat,
    BrooklynCompat,
    ClarendonCompat,
    EarlybirdCompat,
    GinghamCompat,
    HudsonCompat,
    InkwellCompat,
    KelvinCompat,
    LarkCompat,
    LofiCompat,
    MavenCompat,
    MayfairCompat,
    MoonCompat,
    NashvilleCompat,
    PerpetuaCompat,
    ReyesCompat,
    RiseCompat,
    SlumberCompat,
    StinsonCompat,
    ToasterCompat,
    ValenciaCompat,
    WaldenCompat,
    WillowCompat,
    Xpro2Compat,
    OverlayBlend,
    saturate,
    tint,
    concatColorMatrices,
    ColorMatrix,
    brightness,
    contrast,
    temperature,
    hueRotate,
    grayscale,
    sepia,
} from 'react-native-image-filter-kit';

const FILTERS = [
    {
        title: 'Normal',
        filterComponent: AdenCompat,
    },
    {
        title: 'Maven',
        filterComponent: MavenCompat,
    },
    {
        title: 'Mayfair',
        filterComponent: MayfairCompat,
    },
    {
        title: 'Moon',
        filterComponent: MoonCompat,
    },
    {
        title: 'Nashville',
        filterComponent: NashvilleCompat,
    },
    {
        title: 'Perpetua',
        filterComponent: PerpetuaCompat,
    },
    {
        title: 'Reyes',
        filterComponent: ReyesCompat,
    },
    {
        title: 'Rise',
        filterComponent: RiseCompat,
    },
    {
        title: 'Slumber',
        filterComponent: SlumberCompat,
    },
    {
        title: 'Stinson',
        filterComponent: StinsonCompat,
    },
    {
        title: 'Brooklyn',
        filterComponent: BrooklynCompat,
    },
    {
        title: 'Earlybird',
        filterComponent: EarlybirdCompat,
    },
    {
        title: 'Clarendon',
        filterComponent: ClarendonCompat,
    },
    {
        title: 'Gingham',
        filterComponent: GinghamCompat,
    },
    {
        title: 'Hudson',
        filterComponent: HudsonCompat,
    },
    {
        title: 'Inkwell',
        filterComponent: InkwellCompat,
    },
    {
        title: 'Kelvin',
        filterComponent: KelvinCompat,
    },
    {
        title: 'Lark',
        filterComponent: LarkCompat,
    },
    {
        title: 'Lofi',
        filterComponent: LofiCompat,
    },
    {
        title: 'Toaster',
        filterComponent: ToasterCompat,
    },
    {
        title: 'Valencia',
        filterComponent: ValenciaCompat,
    },
    {
        title: 'Walden',
        filterComponent: WaldenCompat,
    },
    {
        title: 'Willow',
        filterComponent: WillowCompat,
    },
    {
        title: 'Xpro2',
        filterComponent: Xpro2Compat,
    },
    {
        title: 'Aden',
        filterComponent: AdenCompat,
    },
    {
        title: '_1977',
        filterComponent: _1977Compat,
    },
    {
        title: 'Brannan',
        filterComponent: BrannanCompat,
    },
];

const SelectedFilterComponent = FILTERS[selectedFilterIndex].filterComponent;

<SelectedFilterComponent
     //onExtractImage={onExtractImage}
      style={{ backgroundColor: 'transparent', width: windowWidth / 1.2, zIndex: 1122 }}
      onExtractImage={onExtractFilter}
      extractImageEnabled={filterextracter}
            image={
                <View style={{ borderRadius: 15, overflow: 'hidden', backgroundColor: 'transparent' }}>
                   <ColorMatrix matrix={concatColorMatrices(
                        brightness(CMfilterValues.brightness / 50)
                         , contrast(CMfilterValues.contrast / 50)
                         , temperature((CMfilterValues.temperature - 50) / 50)
                         , saturate((((CMfilterValues.saturation + 20) - 50) / 50))
                         , hueRotate((CMfilterValues.hueRotate - 50) / 50)
                         , grayscale(CMfilterValues.grayscale / 50)
                         , sepia(CMfilterValues.sepia / 50)
                         , tint(CMfilterValues.tint / 50)

                     )}>

                         <Image
                             ref={editPhotoRef}
                             style={{ aspectRatio: 1, backgroundColor: 'transparent' }}
                             source={{ uri: 'file://' + editPhoto.path }}
                             resizeMode={editPhotoScreenMode}
                             />

                    </ColorMatrix>
                </View>
                }
 />

@iyegoroff @xzilja @kaidoj @TrebuhD @HarshitMadhav

[shahmeer-ali]

@sberkeo hey there, the onExtractImage should be under the ColorMatrix

like this:

<ColorMatrix onExtractImage={({nativeEvent}) => { console.info('onExtractImage', nativeEvent); setFilterImageURI(nativeEvent.uri); }}

and then on event filter event, it will generate a temp file, you can log like this LOG onExtractImage {"uri": "file:///data/user/0/com.propershot/cache/tmp3659330855580970101.rnifk.png"}