CODEWITHSUNDEEP
javascripthtml5-canvaskonvajs
Muhammad Ikram UL Mustafa
Muhammad Ikram UL Mustafa

Reputation: 370

How to make image into an outline with transparent background using JS

Original Image Result

1 -> Original Image

2 -> Result After Image Upload:

I am trying to convert the original picture in black outline transparent as shown in the below images.

I am using the Konva JS library for my project, but I cannot achieve this functionality using Konva.js.

Please suggest something to achieve the following functionality.

Upvotes: 0

Views: 1296

Answers (1)

lavrton
lavrton

Reputation: 20308

You can use Konva Custom Filter to manipulate the image as you want.

Here is example of replacing white color with transparent pixels:


// lets define a custom filter:
var MyFilter = function (imageData) {
  const tol = 10;
  // make all pixels opaque 100%
  var nPixels = imageData.data.length;
  const { data } = imageData;
  for (var i = 0; i < nPixels - 4; i += 4) {
    const isWhite =
      data[i] > 255 - tol &&
      data[i + 1] > 255 - tol &&
      data[i + 2] > 255 - tol;
    if (isWhite) {
      imageData.data[i + 3] = 0;
    } else {
      // you can replace black with another color
    }
  }
};

Konva.Image.fromURL("./lion.jpeg", function (image) {
  layer.add(image);
  image.setAttrs({
    x: 80,
    y: 30,
    draggable: true
  });

  image.filters([MyFilter]);
  image.cache();

  layer.draw();
});

Demo: https://codesandbox.io/s/konva-remove-white-example-fw6fz?file=/index.html

Upvotes: 2

Related Questions