如何使用JS将图像制作成具有透明背景的轮廓答案

【问题标题】：How to make image into an outline with transparent background using JS如何使用JS将图像制作成具有透明背景的轮廓
【发布时间】：2021-07-11 21:18:47
【问题描述】：

1 -> 原始图像

2 -> 图片上传后的结果：

我正在尝试将原始图片转换为黑色轮廓透明，如下图所示。

我正在为我的项目使用 Konva JS 库，但我无法使用 Konva.js 实现此功能。

请提出一些建议来实现以下功能。

【问题讨论】：

标签： javascript html5-canvas konvajs

【解决方案1】：

您可以使用Konva Custom Filter 随意操作图像。

以下是用透明像素替换白色的示例：


// 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();
});

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

【讨论】：

嗨已经以这种方式进行了更改codesandbox.io/s/konva-remove-white-example-forked-kn7hx 它没有将完全黑色转换为灰色我已经将其更改为 else 也像它留下的橙色一样你能不能再看视频..drive.google.com/file/d/1X6_d9FuQ5FgoRWBSSxuyp8pu5mrCRk-k/view
如上图所示，将黑色轮廓转换为灰色轮廓
imageData.data[i + 0] = 189; imageData.data[i + 1] = 189; imageData.data[i + 2] = 189;
感谢它的工作，我们怎样才能使它更清晰和锐利，就像视频中的一些点一样分散，我们该怎么做？
我的意思是如何使它更清晰和干净的图像转换成这个。