cartoon effect

[devops35]

I want to make a cartoon effect. But the bilateralFilter is not working. It only works when I open the cvtColor part in the code below. But this time it's gray in color. I want to make it colorful. How can I do it?

const sourceuri = Image.resolveAssetSource( require('./girl_wide_brim_hat.png'), ).uri;

const newImagePath = RNFS.DocumentDirectoryPath + '/girl_wide_brim_hat.png';

const interMat = await new Mat().init();
const interMat2 = await new Mat().init();
const interMat3 = await new Mat().init();
const sourceFile = await downloadAssetSource(sourceuri);
const srcMat = await RNCv.imageToMat(sourceFile);
const srcMat2 = await RNCv.imageToMat(sourceFile);

RNCv.invokeMethod('cvtColor', {
  p1: srcMat,
  p2: interMat,
  p3: ColorConv.COLOR_BGR2GRAY,
});

RNCv.invokeMethod('medianBlur', {
  p1: interMat,
  p2: interMat,
  p3: 5,
});

RNCv.invokeMethod('adaptiveThreshold', {
  p1: interMat,
  p2: interMat,
  p3: 255,
  p4: Imgproc.ADAPTIVE_THRESH_MEAN_C,
  p5: Imgproc.THRESH_BINARY,
  p6: 9,
  p7: 5,
});

// RNCv.invokeMethod('cvtColor', {
//   p1: srcMat2,
//   p2: interMat2,
//   p3: ColorConv.COLOR_BGR2GRAY,
// });

RNCv.invokeMethod('bilateralFilter', {
  p1: srcMat2,
  p2: interMat2,
  p3: 9,
  p4: 200,
  p5: 200,
});

RNCv.invokeMethod('bitwise_and', {
  p1: interMat,
  p2: interMat2,
  p3: interMat3,
  // p4: srcMat2,
});

const {uri, width, height} = await RNCv.matToImage(interMat3, newImagePath);
this.setState({...this.state, destImageUri: uri});

[devops35]

i solved the problem.

[adamgf]

Hi @devops35 thanks for solving that. I was going to suggest you can do a final cvtColor back from GRAY to RGBA maybe? In the set of ops just the last op is a cvtColor back to RGBA colorspace. I am not sure what the colorspace is I do not remember off-hand I think it is RGBA. But it could be different on Android and iOS but I do not remember.

[devops35]

Hi, Thank you very much for your answer. I am currently working on getPerspectiveTransform function. But I could not find how to create the point array. When I create and use a regular javascript array there is an error.

[devops35]

I'm trying like this;

const interMat = await new Mat().init(); const interMat2 = await new Mat().init(); const interMat3 = await new Mat().init(); const sourceFile = await downloadAssetSource(sourceuri); const sourceFile2 = await downloadAssetSource(sourceuri2); const srcMat = await RNCv.imageToMat(sourceFile); const srcMat2 = await RNCv.imageToMat(sourceFile2);

let point1 = new CvPoint(100, 100);
let point2 = new CvPoint(100, 200);
let point3 = new CvPoint(200, 100);
let point4 = new CvPoint(200, 200);
let size = new CvSize(200, 200);

let arr1 = [point1, point2, point3, point4];
let arr2 = [point1, point2, point3, point4];

RNCv.invokeMethod('getPerspectiveTransform', {
  p1: arr1,
  p2: arr2,
  p3: interMat3,
});

RNCv.invokeMethod('warpPerspective', {
  p1: srcMat,
  p2: interMat3,
  p3: srcMat2,
  p4: size,
});

[nh9k]

Hi @devops35, did you solve it?