Is there any way to transform Image to Black and White mode, but not grey mode

[tylerrrkd]

Hi, friend, I am trying to make Image as B/ W dualization. And Color Matrix does not meet my requirement.

const BLACK_AND_WHITE = [
  // r-rbgam
  0, 1, 0, 0, 0,
  // g-rbgam
  0, 1, 0, 0, 0,
  // b-rbgam
  0, 1, 0, 0, 0,
  // a-rbgam
  0, 0, 0, 1, 0,
]

<Image {...{ ...props }}>
  <ColorMatrix matrix={BLACK_AND_WHITE} />
</Image>

it looks like gray mode, but not Black and White mode(I mean only two color mode, 0 or 255).

is there any suggestion, thanks a lot.

[wcandillon]

It might be possible via a matrix but just in case you can use a custom shader for this as an image filter: https://shopify.github.io/react-native-skia/docs/image-filters/runtime-shader

[bennyli519]

facing the same issue, could u please share the demo with custom shader or matrix to transform the Image to Black and White mode? @wcandillon

[tylerrrkd]

@bennyli519 Hi friend, you could use my code.

import { Skia, Image, RuntimeShader } from '@shopify/react-native-skia'
import type { ImageProps, SkiaProps } from '@shopify/react-native-skia'

const BLACK_AND_WHITE_SHADER = Skia.RuntimeEffect.Make(`
uniform shader image;

vec4 main(vec2 xy)
{
    // Normalized pixel coordinates (from 0 to 1)
    vec4 texColor= image.eval(xy).rgba;
    
    // get gray scale or luminescence
    float gray = 0.33 * (texColor.r + texColor.g + texColor.b);
    
    // mix white and black by the value of step(threshold, gray)
    // you could adjust the threshold value
    float threshold = 0.5;
    if(gray > threshold) {
      // white
      texColor.rgb = vec3(1.0);   
    } else {
      // black
      texColor.rgb = vec3(0.0);
    }
    
    // Output to screen
    return texColor;
}
`)!

export type ImageLayerProps = {
} & SkiaProps<ImageProps>


const ImageLayer: React.FC<ImageLayerProps> = props => {
  return (
    <Image x={0} y={0} {...props}>
      <RuntimeShader source={BLACK_AND_WHITE_SHADER} />
    </Image>
  )
}

export default ImageLayer

[tylerrrkd]

@bennyli519 and gray mode code is here if you need.

import { Skia } from '@shopify/react-native-skia'

const GRAY_SHADER = Skia.RuntimeEffect.Make(`
uniform shader image;

half4 main(in vec2 xy)
{
  //Grabbing the texture color at the current pixel.
  vec4 texColor = image.eval(xy).rgba;
  
  vec3 gray_scale = vec3(dot(vec3(0.5, 0.5, 0.5), texColor.rgb));
      
  // Output to screen
  return vec4(gray_scale, texColor.a) ;
}
`)!

[bennyli519]

thanks, will try it now.

[AleVeron]

@bennyli519 and gray mode code is here if you need.

import { Skia } from '@shopify/react-native-skia'

const GRAY_SHADER = Skia.RuntimeEffect.Make(`
uniform shader image;

half4 main(in vec2 xy)
{
  //Grabbing the texture color at the current pixel.
  vec4 texColor = image.eval(xy).rgba;
  
  vec3 gray_scale = vec3(dot(vec3(0.5, 0.5, 0.5), texColor.rgb));
      
  // Output to screen
  return vec4(gray_scale, texColor.a) ;
}
`)!

Hi tyler, can I send the path of a photo to this code and have it return another path with the photo in grayscale?