如何使用JS将图像制作成透明背景的轮廓
How to make image into an outline with transparent background using JS
1 -> 原始图像
2 -> 图片上传后的结果:
我正在尝试将原始图片转换为黑色轮廓透明,如下图所示。
我正在为我的项目使用 Konva JS 库,但我无法使用 Konva.js 实现此功能。
请提出一些实现以下功能的建议。
您可以使用 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
1 -> 原始图像
2 -> 图片上传后的结果:
我正在尝试将原始图片转换为黑色轮廓透明,如下图所示。
我正在为我的项目使用 Konva JS 库,但我无法使用 Konva.js 实现此功能。
请提出一些实现以下功能的建议。
您可以使用 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