BlendColor. How to ignore transparent pixels with hue blend mode?

[Glazzes]

Hi and thanks for this place to ask questions. I wanted to replicate a simple example of flutter's ColorFiltered widget by using BlendColor component. It woks fine, but in contrast to ColorFiltered widget, it also turns the transparent pixels of my png image into the value passed to BlendColor's color property, comparing hue to other blend modes like modulate, modulate applies the color (not in the same way), but it leaves the transparent pixels untouched. Here is the code and a screenshot of it.

const {width, height} = Dimensions.get('window');

const Example = () => {
  const image = useImage(
    'https://raw.githubusercontent.com/vijayinyoutube/colorfilterapp/master/assets/Images/product.png',
  );

  if (!image) {
    return null;
  }

  return (
    <View style={{flex: 1}}>
      <Canvas style={{flex: 1}}>
        <Fill color={'#000'} />
        <Image
          image={image}
          x={0}
          y={0}
          fit={'contain'}
          width={width}
          height={width}>
          <BlendColor color={'lightgreen'} mode={'hue'} />
        </Image>
      </Canvas>
    </View>
  );
};

[wcandillon]

This looks interesting. What seems to be the issue with the example? Sorry I didn't get it 🙈

[Glazzes]

Thanks for replying. Imagine some sort of e commerce platform, instead of uploading an image for each color a product has, you could upload a single picture and then apply BlendColor to it, so you can change the color in a single click.

That shoe is a png image which background is transparent, the background could be any color with no opacity, lets say rgba(0, 0, 0, 0), BlendColor when using hue blend mode will not affect any pixels that are white, black or any color within the grey scale, but as opposite as one would think pixels that have no opacity will be affected by the filter regardless of which color they are, even those that are not supposed to be affected such as the previously mentioned.

The light green background is actually the filter being applied to the transparent pixels in the image, I'd expect pixels with no opacity to remain as they are, in this case a light green shoe on a transparent background, otherwise you'd need the same picture with different background colors to match all the color themes on your app.

[wcandillon]

I manage to get to it work by doing the following (but I'm cheating here):

const { width } = Dimensions.get("window");

const Example = () => {
  const image = useImage(
    "https://raw.githubusercontent.com/vijayinyoutube/colorfilterapp/master/assets/Images/product.png"
  );

  if (!image) {
    return null;
  }

  return (
    <View style={{ flex: 1 }}>
      <Canvas style={{ flex: 1 }}>
        <Fill color={"#000"} />
        <Group>
          <Image
            image={image}
            x={0}
            y={0}
            fit={"contain"}
            width={width}
            height={width}
          />
          <Group blendMode="hue">
            <Fill color="lightgreen" />
          </Group>
        </Group>
      </Canvas>
    </View>
  );
};

It works because it is black, but if you switch the background color you will see the hue is changed. I'm think you should just clip the result using the original image (blendmode="dstATop" ?). I'm not super famillar with blend modes yet. But this is a super cool example and I will add this example to the test suite.

Also you might be interested into to use a shader with the image as an input programatically update the image as you want: https://shopify.github.io/react-native-skia/docs/shaders/overview#nested-shaders

I hope this helps.

[wcandillon]

I added examples here I think you will be please about: https://github.com/Shopify/react-native-skia/blob/c029cdcf8403f2869c4c3cc560ef126fb2b1ed9f/package/src/renderer/__tests__/examples/BlendModes.spec.tsx
I think the shader approach would be the recommended approach.

[Glazzes]

I tried clipping the image, but no luck at least with actual colors, both of your solutions work pretty well. Thank you! It will also be useful to have some sort of visual representation of blend modes within skia docs, maybe forwarding readers to android docs would help https://developer.android.com/reference/android/graphics/BlendMode