如何在FabricJS中编写用于边缘检测的卷积滤波器
问题描述 投票：0回答：1
我想在Fabricjs中编写一个用于边缘检测的卷积滤波器，但是矩阵不起作用。
这是矩阵（想法取自http://homepages.inf.ed.ac.uk/rbf/HIPR2/sobel.htm）：
new fabric.Image.filters.Convolute({ // edge detect
matrix: [[ -1, 0, 1,
-2, 0, 2,
-1, 0, 1 ],
[1, 2, 1,
0 ,0 ,0,
-1, -2, 1 ]]
})
这是小提琴
注意：- 您需要单击图像才能获得图像处理的复选框。
1个回答
4
投票
投票
由于原生 html5 canvas 元素可以是 Fabric.Image 的图像，因此您可以找到 原生画布的边缘检测解决方案，然后在 Fabric.Image 上使用该原生画布，如下所示
image:myNativeCanvas[补充：添加了演示]
这里是示例代码和演示，展示如何：
- 使用本机画布将 Sobel 边缘检测应用到图像，并且
- 使用本机画布作为 Fabric.Image 的图像源
// Attribution: http://www.html5rocks.com/en/tutorials/canvas/imagefilters/
//---------------- Script 'filters.js' ----------------
Filters = {};
Filters.getPixels = function(img) {
var c,ctx;
if (img.getContext) {
c = img;
try { ctx = c.getContext('2d'); } catch(e) {}
}
if (!ctx) {
c = this.getCanvas(img.width, img.height);
ctx = c.getContext('2d');
ctx.drawImage(img, 0, 0);
}
return ctx.getImageData(0,0,c.width,c.height);
};
Filters.getCanvas = function(w,h) {
var c = document.createElement('canvas');
c.width = w;
c.height = h;
return c;
};
Filters.filterImage = function(filter, image, var_args) {
var args = [this.getPixels(image)];
for (var i=2; i<arguments.length; i++) {
args.push(arguments[i]);
}
return filter.apply(null, args);
};
Filters.grayscale = function(pixels, args) {
var d = pixels.data;
for (var i=0; i<d.length; i+=4) {
var r = d[i];
var g = d[i+1];
var b = d[i+2];
// CIE luminance for the RGB
var v = 0.2126*r + 0.7152*g + 0.0722*b;
d[i] = d[i+1] = d[i+2] = v
}
return pixels;
};
Filters.brightness = function(pixels, adjustment) {
var d = pixels.data;
for (var i=0; i<d.length; i+=4) {
d[i] += adjustment;
d[i+1] += adjustment;
d[i+2] += adjustment;
}
return pixels;
};
Filters.threshold = function(pixels, threshold) {
var d = pixels.data;
for (var i=0; i<d.length; i+=4) {
var r = d[i];
var g = d[i+1];
var b = d[i+2];
var v = (0.2126*r + 0.7152*g + 0.0722*b >= threshold) ? 255 : 0;
d[i] = d[i+1] = d[i+2] = v
}
return pixels;
};
Filters.tmpCanvas = document.createElement('canvas');
Filters.tmpCtx = Filters.tmpCanvas.getContext('2d');
Filters.createImageData = function(w,h) {
return this.tmpCtx.createImageData(w,h);
};
Filters.convolute = function(pixels, weights, opaque) {
var side = Math.round(Math.sqrt(weights.length));
var halfSide = Math.floor(side/2);
var src = pixels.data;
var sw = pixels.width;
var sh = pixels.height;
var w = sw;
var h = sh;
var output = Filters.createImageData(w, h);
var dst = output.data;
var alphaFac = opaque ? 1 : 0;
for (var y=0; y<h; y++) {
for (var x=0; x<w; x++) {
var sy = y;
var sx = x;
var dstOff = (y*w+x)*4;
var r=0, g=0, b=0, a=0;
for (var cy=0; cy<side; cy++) {
for (var cx=0; cx<side; cx++) {
var scy = Math.min(sh-1, Math.max(0, sy + cy - halfSide));
var scx = Math.min(sw-1, Math.max(0, sx + cx - halfSide));
var srcOff = (scy*sw+scx)*4;
var wt = weights[cy*side+cx];
r += src[srcOff] * wt;
g += src[srcOff+1] * wt;
b += src[srcOff+2] * wt;
a += src[srcOff+3] * wt;
}
}
dst[dstOff] = r;
dst[dstOff+1] = g;
dst[dstOff+2] = b;
dst[dstOff+3] = a + alphaFac*(255-a);
}
}
return output;
};
if (!window.Float32Array)
Float32Array = Array;
Filters.convoluteFloat32 = function(pixels, weights, opaque) {
var side = Math.round(Math.sqrt(weights.length));
var halfSide = Math.floor(side/2);
var src = pixels.data;
var sw = pixels.width;
var sh = pixels.height;
var w = sw;
var h = sh;
var output = {
width: w, height: h, data: new Float32Array(w*h*4)
};
var dst = output.data;
var alphaFac = opaque ? 1 : 0;
for (var y=0; y<h; y++) {
for (var x=0; x<w; x++) {
var sy = y;
var sx = x;
var dstOff = (y*w+x)*4;
var r=0, g=0, b=0, a=0;
for (var cy=0; cy<side; cy++) {
for (var cx=0; cx<side; cx++) {
var scy = Math.min(sh-1, Math.max(0, sy + cy - halfSide));
var scx = Math.min(sw-1, Math.max(0, sx + cx - halfSide));
var srcOff = (scy*sw+scx)*4;
var wt = weights[cy*side+cx];
r += src[srcOff] * wt;
g += src[srcOff+1] * wt;
b += src[srcOff+2] * wt;
a += src[srcOff+3] * wt;
}
}
dst[dstOff] = r;
dst[dstOff+1] = g;
dst[dstOff+2] = b;
dst[dstOff+3] = a + alphaFac*(255-a);
}
}
return output;
};
//
function runFilter(id, filter, arg1, arg2, arg3) {
var c = document.getElementById(id);
var s = c.previousSibling.style;
var b = c.parentNode.getElementsByTagName('button')[0];
if (b.originalText == null) {
b.originalText = b.textContent;
}
if (s.display == 'none') {
s.display = 'inline';
c.style.display = 'none';
b.textContent = b.originalText;
} else {
var idata = Filters.filterImage(filter, img, arg1, arg2, arg3);
c.width = idata.width;
c.height = idata.height;
var ctx = c.getContext('2d');
ctx.putImageData(idata, 0, 0);
s.display = 'none';
c.style.display = 'inline';
b.textContent = 'Restore original image';
}
}
//
sobel = function() {
runFilter('sobel', function(px){
px = Filters.grayscale(px);
var vertical = Filters.convoluteFloat32(px,
[-1,-2,-1,
0, 0, 0,
1, 2, 1]);
var horizontal = Filters.convoluteFloat32(px,
[-1,0,1,
-2,0,2,
-1,0,1]);
var id = Filters.createImageData(vertical.width, vertical.height);
for (var i=0; i<id.data.length; i+=4) {
var v = Math.abs(vertical.data[i]);
id.data[i] = v;
var h = Math.abs(horizontal.data[i]);
id.data[i+1] = h
id.data[i+2] = (v+h)/4;
id.data[i+3] = 255;
}
return id;
});
}
//---------------- Calling script ----------------
// load an image
var image=new Image();
image.crossOrigin='anonymous';
image.onload=start;
image.src="https://upload.wikimedia.org/wikipedia/commons/7/74/Boy_and_Turtle.png";
function start(){
// apply Sobel Edge Detection
// return ImageData of the filtered canvas
var grayscale = Filters.filterImage(Filters.grayscale, image);
var vertical = Filters.convoluteFloat32(grayscale,
[ -1, 0, 1,
-2, 0, 2,
-1, 0, 1 ]);
var horizontal = Filters.convoluteFloat32(grayscale,
[ -1, -2, -1,
0, 0, 0,
1, 2, 1 ]);
var final_image = Filters.createImageData(vertical.width, vertical.height);
for (var i=0; i<final_image.data.length; i+=4){
// make the vertical gradient red
var v = Math.abs(vertical.data[i]);
final_image.data[i] = v;
// make the horizontal gradient green
var h = Math.abs(horizontal.data[i]);
final_image.data[i+1] = h;
// and mix in some blue for aesthetics
final_image.data[i+2] = (v+h)/4;
final_image.data[i+3] = 255; // opaque alpha
}
// put the filtered imageData on an in-memory canvas
var memCanvas = document.createElement('canvas');
memCanvas.width=image.width;
memCanvas.height=image.height;
memCanvas.getContext('2d').putImageData(final_image,0,0);
// use the in-memory canvas as an image source for a Fabric.Image
var canvas = new fabric.Canvas('canvas');
var imgElement = document.getElementById('my-image');
var imgInstance = new fabric.Image(memCanvas,{left:0,top:0});
canvas.add(imgInstance);
}body{ background-color: ivory; }
canvas, img {border:1px solid red; margin:0 auto; }<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>
<h4>Original Image</h4>
<img src='https://upload.wikimedia.org/wikipedia/commons/7/74/Boy_and_Turtle.png' width="250px" height="232px">
<h4>FabricJS image with Sobel filter applied</h4>
<canvas id="canvas" width="798px" height="746px"></canvas>这是演示中使用的
Filters.js// Attribution: http://www.html5rocks.com/en/tutorials/canvas/imagefilters/
Filters = {};
Filters.getPixels = function(img) {
var c,ctx;
if (img.getContext) {
c = img;
try { ctx = c.getContext('2d'); } catch(e) {}
}
if (!ctx) {
c = this.getCanvas(img.width, img.height);
ctx = c.getContext('2d');
ctx.drawImage(img, 0, 0);
}
return ctx.getImageData(0,0,c.width,c.height);
};
Filters.getCanvas = function(w,h) {
var c = document.createElement('canvas');
c.width = w;
c.height = h;
return c;
};
Filters.filterImage = function(filter, image, var_args) {
var args = [this.getPixels(image)];
for (var i=2; i<arguments.length; i++) {
args.push(arguments[i]);
}
return filter.apply(null, args);
};
Filters.grayscale = function(pixels, args) {
var d = pixels.data;
for (var i=0; i<d.length; i+=4) {
var r = d[i];
var g = d[i+1];
var b = d[i+2];
// CIE luminance for the RGB
var v = 0.2126*r + 0.7152*g + 0.0722*b;
d[i] = d[i+1] = d[i+2] = v
}
return pixels;
};
Filters.brightness = function(pixels, adjustment) {
var d = pixels.data;
for (var i=0; i<d.length; i+=4) {
d[i] += adjustment;
d[i+1] += adjustment;
d[i+2] += adjustment;
}
return pixels;
};
Filters.threshold = function(pixels, threshold) {
var d = pixels.data;
for (var i=0; i<d.length; i+=4) {
var r = d[i];
var g = d[i+1];
var b = d[i+2];
var v = (0.2126*r + 0.7152*g + 0.0722*b >= threshold) ? 255 : 0;
d[i] = d[i+1] = d[i+2] = v
}
return pixels;
};
Filters.tmpCanvas = document.createElement('canvas');
Filters.tmpCtx = Filters.tmpCanvas.getContext('2d');
Filters.createImageData = function(w,h) {
return this.tmpCtx.createImageData(w,h);
};
Filters.convolute = function(pixels, weights, opaque) {
var side = Math.round(Math.sqrt(weights.length));
var halfSide = Math.floor(side/2);
var src = pixels.data;
var sw = pixels.width;
var sh = pixels.height;
var w = sw;
var h = sh;
var output = Filters.createImageData(w, h);
var dst = output.data;
var alphaFac = opaque ? 1 : 0;
for (var y=0; y<h; y++) {
for (var x=0; x<w; x++) {
var sy = y;
var sx = x;
var dstOff = (y*w+x)*4;
var r=0, g=0, b=0, a=0;
for (var cy=0; cy<side; cy++) {
for (var cx=0; cx<side; cx++) {
var scy = Math.min(sh-1, Math.max(0, sy + cy - halfSide));
var scx = Math.min(sw-1, Math.max(0, sx + cx - halfSide));
var srcOff = (scy*sw+scx)*4;
var wt = weights[cy*side+cx];
r += src[srcOff] * wt;
g += src[srcOff+1] * wt;
b += src[srcOff+2] * wt;
a += src[srcOff+3] * wt;
}
}
dst[dstOff] = r;
dst[dstOff+1] = g;
dst[dstOff+2] = b;
dst[dstOff+3] = a + alphaFac*(255-a);
}
}
return output;
};
if (!window.Float32Array)
Float32Array = Array;
Filters.convoluteFloat32 = function(pixels, weights, opaque) {
var side = Math.round(Math.sqrt(weights.length));
var halfSide = Math.floor(side/2);
var src = pixels.data;
var sw = pixels.width;
var sh = pixels.height;
var w = sw;
var h = sh;
var output = {
width: w, height: h, data: new Float32Array(w*h*4)
};
var dst = output.data;
var alphaFac = opaque ? 1 : 0;
for (var y=0; y<h; y++) {
for (var x=0; x<w; x++) {
var sy = y;
var sx = x;
var dstOff = (y*w+x)*4;
var r=0, g=0, b=0, a=0;
for (var cy=0; cy<side; cy++) {
for (var cx=0; cx<side; cx++) {
var scy = Math.min(sh-1, Math.max(0, sy + cy - halfSide));
var scx = Math.min(sw-1, Math.max(0, sx + cx - halfSide));
var srcOff = (scy*sw+scx)*4;
var wt = weights[cy*side+cx];
r += src[srcOff] * wt;
g += src[srcOff+1] * wt;
b += src[srcOff+2] * wt;
a += src[srcOff+3] * wt;
}
}
dst[dstOff] = r;
dst[dstOff+1] = g;
dst[dstOff+2] = b;
dst[dstOff+3] = a + alphaFac*(255-a);
}
}
return output;
};
//
function runFilter(id, filter, arg1, arg2, arg3) {
var c = document.getElementById(id);
var s = c.previousSibling.style;
var b = c.parentNode.getElementsByTagName('button')[0];
if (b.originalText == null) {
b.originalText = b.textContent;
}
if (s.display == 'none') {
s.display = 'inline';
c.style.display = 'none';
b.textContent = b.originalText;
} else {
var idata = Filters.filterImage(filter, img, arg1, arg2, arg3);
c.width = idata.width;
c.height = idata.height;
var ctx = c.getContext('2d');
ctx.putImageData(idata, 0, 0);
s.display = 'none';
c.style.display = 'inline';
b.textContent = 'Restore original image';
}
}
//
sobel = function() {
runFilter('sobel', function(px){
px = Filters.grayscale(px);
var vertical = Filters.convoluteFloat32(px,
[-1,-2,-1,
0, 0, 0,
1, 2, 1]);
var horizontal = Filters.convoluteFloat32(px,
[-1,0,1,
-2,0,2,
-1,0,1]);
var id = Filters.createImageData(vertical.width, vertical.height);
for (var i=0; i<id.data.length; i+=4) {
var v = Math.abs(vertical.data[i]);
id.data[i] = v;
var h = Math.abs(horizontal.data[i]);
id.data[i+1] = h
id.data[i+2] = (v+h)/4;
id.data[i+3] = 255;
}
return id;
});
}
最新问题
- 循环 JSON 但解析函数给出未定义的返回[重复]
- 在 AWS 中连接 HTTPS 和 HTTP
- 循环 JSON 但解析函数没有返回[重复]
- RNMapbox 库未在“长按”事件上显示自定义标记图像
- jQuery 函数参数中的动态变量
- `use` 和 `pub use` 有什么区别？
- 从最新的 Debian 12 ami (ami-04d8e65bd49d048bd) 开始，sudo: 无法解析主机 ip-x-x-x-x: 名称或服务未知
- 为什么下面的简单并行化代码比 Python 中的简单循环慢得多？
- ValueError：Q-learning 中以 10 为基数的 int() 的文字无效：''
- Python 异常处理程序不起作用，我不明白为什么
- 创建一个标准的 try-catch-块以通过应用程序使用
- 如何通过Web3.js提示连接另一个钱包
- UNION 仅从第一个 SELECT 返回结果
- 蓝牙 LE - 多种特征行为
- H@lp 与 OpenCV python
- 宽度 50% 和边距 0 px 未对齐
- 为什么我的不和谐机器人两次请求同一个文件夹？
- Vue Quill css仅应用于我的第一个Quill Editor组件+如何自定义工具栏
- PHP - usort() 部分区分大小写
- tfjs 错误：传递到堆栈的参数张量必须是 `Tensor[]` 或 `TensorLike[]`
© www.soinside.com 2019 - 2024. All rights reserved.