如何使用JS将图像制作成具有透明背景的轮廓
Posted
技术标签:
【中文标题】如何使用JS将图像制作成具有透明背景的轮廓【英文标题】:How to make image into an outline with transparent background using JS 【发布时间】:2021-07-11 21:18:47 【问题描述】:
1 -> 原始图像
2 -> 图片上传后的结果:
我正在尝试将原始图片转换为黑色轮廓透明,如下图所示。
我正在为我的项目使用 Konva JS 库,但我无法使用 Konva.js 实现此功能。
请提出一些建议来实现以下功能。
【问题讨论】:
【参考方案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;
感谢它的工作,我们怎样才能使它更清晰和锐利,就像视频中的一些点一样分散,我们该怎么做?
我的意思是如何使它更清晰和干净的图像转换成这个。以上是关于如何使用JS将图像制作成具有透明背景的轮廓的主要内容,如果未能解决你的问题,请参考以下文章