我正在尝试使用 JavaScript 使用 prewitt 方法转换图像。当我运行它时，我收到此错误:
BindingError {name: 'BindingError', message: 'Cannot pass "array([[ 1, 1, 1],\n [ 0, 0, 0],\n [-1,-1,-1]])" as a Mat', stack: 'BindingError: Cannot pass "array([[ 1, 1, 1],\n …p://localhost:3000/static/js/1.chunk.js:103232:9)'}
Filter2D 错误
const prewitt=new cv.Mat()
const KERNEL_X=np.array([[1,1,1],[0,0,0],[-1,-1,-1]])
const KERNEL_Y=np.array([[-1,0,1],[-1,0,1],[-1,0,1]])
let img_prewittx=cv.filter2D(img,prewitt,-1,KERNEL_X)
let img_prewitty=cv.filter2D(img,prewitt,-1,KERNEL_Y)
cv.imshow(this.prewittRef.current,img_prewittx,img_prewitty)
最佳答案
这是一个good example用于通过 OpenCV.js 使用 cv.filter2D。
- 内核参数的类型应该是
cv.Mat()而不是np.array(这不是我们可以使用 np.array 作为 OpenCV Mat 的 Python) . - 目标矩阵存储在
cv.filter2D的第二个参数中(它不会像 Python 中那样返回)。 - 建议在灰度输入上应用滤镜(尤其不要在 BGRA 输入上应用滤镜，因为输出 Alpha channel 可能是完全透明的)。
假设输入图像为灰色。
按如下方式应用cv.filter2D:
const KERNEL_X = cv.matFromArray(3, 3, cv.CV_32FC1, [1,1,1, 0,0,0, -1,-1,-1]);
cv.filter2D(gray, img_prewittx, -1, KERNEL_X)
完整代码示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello OpenCV.js</title>
</head>
<body>
<p id="status">OpenCV.js is loading...</p>
<div>
<div class="inputoutput">
<img id="imageSrc" alt="No Image" />
<div class="caption">imageSrc <input type="file" id="fileInput" name="file" /></div>
</div>
<div class="inputoutput">
<canvas id="canvasOutput" ></canvas>
<div class="caption">canvasOutput</div>
</div>
</div>
<script async src="opencv.js" type="text/javascript"></script>
<script type="text/javascript">
let imgElement = document.getElementById('imageSrc');
let inputElement = document.getElementById('fileInput');
inputElement.addEventListener('change', (e) => {
imgElement.src = URL.createObjectURL(e.target.files[0]);
}, false);
//Read image and execute the OpenCV code sample.
imgElement.onload = function () {
let img = cv.imread(imgElement);
let gray = new cv.Mat()
let img_prewittx = new cv.Mat();
let img_prewitty = new cv.Mat();
if (img.channels() == 4)
{
cv.cvtColor(img, gray, cv.COLOR_BGRA2GRAY); //Convert from BGRA to Grayscale.
}
else if (img.channels() == 3)
{
cv.cvtColor(img, gray, cv.COLOR_BGR2GRAY); //Convert from BGR to Grayscale.
}
else
{
gray = img.clone();
}
//const prewitt = new cv.Mat()
//const KERNEL_X = np.array([[1,1,1],[0,0,0],[-1,-1,-1]])
//const KERNEL_Y = np.array([[-1,0,1],[-1,0,1],[-1,0,1]])
const KERNEL_X = cv.matFromArray(3, 3, cv.CV_32FC1, [1,1,1, 0,0,0, -1,-1,-1]);
const KERNEL_Y = cv.matFromArray(3, 3, cv.CV_32FC1, [-1,0,1, -1,0,1, -1,0,1]);
//https://answers.opencv.org/question/224848/how-do-i-create-and-use-a-custom-kernel-with-cvfilter2d/
cv.filter2D(gray, img_prewittx, -1, KERNEL_X)
cv.filter2D(gray, img_prewitty, -1, KERNEL_Y)
cv.imshow('canvasOutput', img_prewittx); //Show img_prewittx for testing
img.delete();
gray.delete();
img_prewittx.delete();
img_prewitty.delete();
};
//check openCV
var Module = {
// https://emscripten.org/docs/api_reference/module.html#Module.onRuntimeInitialized
onRuntimeInitialized() {
document.getElementById('status').innerHTML = 'OpenCV.js is ready.';
}
};
</script>
</body>
</html>
关于javascript - Opencvjs 图像处理，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/74530636/