问题：
javascript - opencv.js投影变换结果是空白的透明图片?
百里飞捷
opencv.js投影变换结果是空白的透明图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>OpenCV.js Example</title>
</head>
<body>
<script async src="https://docs.opencv.org/4.5.5/opencv.js" onload="onOpenCvReady();"></script>
<canvas id="canvasOutput"></canvas>
<script>
function onOpenCvReady() {
console.log("OpenCV.js加载完成.");
processImage();
}
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
async function processImage() {
await sleep(3000); // 等待 3 秒
let imageUrl = "../archives/111.jpg";
let imgElement = new Image();
imgElement.src = imageUrl;
var img;
// 加载图像
imgElement.onload = function() {
try {
img = cv.imread(imgElement);
if (img.empty()) {
console.error("Image could not be read.");
return;
}
// 获取 canvas 元素
let canvas = document.getElementById('canvasOutput');
// 重置图像大小
let dsize = new cv.Size(img.cols, img.rows);
let dst = new cv.Mat();
cv.resize(img, dst, dsize, 0, 0, cv.INTER_AREA);
// 转为灰度图像
console.log("转换之前:", img);
let gray = new cv.Mat(); // 创建一个新的 Mat 对象来存灰度图像
cv.cvtColor(dst, gray, cv.COLOR_BGR2GRAY); // 使用适当的转换
console.log("转换之后:", gray);
// 高斯滤波
cv.GaussianBlur(gray, gray, new cv.Size(11, 11), 0, 0);
cv.imshow(canvas, gray);
cv.Canny(gray, gray, 20, 50, 3);
let contours = new cv.MatVector();
let hierarchy = new cv.Mat();
cv.findContours(gray, contours, hierarchy, cv.RETR_CCOMP, cv.CHAIN_APPROX_NONE);
let index = 0, maxArea = 0;
const area = img.cols * img.rows;
for (let i = 0; i < contours.size(); ++i) {
let tempArea = Math.abs(cv.contourArea(contours.get(i)));
if (tempArea > maxArea && tempArea > 0.3 * area) {
index = i;
maxArea = tempArea;
}
}
if (maxArea === 0) return;
const foundContour = contours.get(index);
const arcL = cv.arcLength(foundContour, true);
let approx = new cv.Mat();
// 逼近多边形
cv.approxPolyDP(foundContour, approx, 0.01 * arcL, true);
if (approx.total() === 4) {
let points = [];
const data32S = approx.data32S;
for (let i = 0, len = data32S.length / 2; i < len; i++) {
points[i] = {x: data32S[i * 2], y: data32S[i * 2 + 1]};
}
console.log("检测到四边形点:", points);
// 投影变换
let srcQuad = cv.matFromArray(4, 1, cv.CV_32FC2, points.flat());
let dstQuad = cv.matFromArray(4, 1, cv.CV_32FC2, [0, 0, img.cols, 0, img.cols, img.rows, 0, img.rows]);
let transmtx = cv.getPerspectiveTransform(srcQuad, dstQuad);
let target = new cv.Mat();
cv.warpPerspective(img, target, transmtx, new cv.Size(img.cols, img.rows));
// 显示结果
cv.imshow(canvas, target);
// 创建一个临时的 canvas 元素
let tempCanvas = document.createElement('canvas');
tempCanvas.width = target.cols;
tempCanvas.height = target.rows;
let tempCtx = tempCanvas.getContext('2d');
// 将 cv.Mat 转换为 ImageData
let imageData = new ImageData(new Uint8ClampedArray(target.data), target.cols, target.rows);
// 将 ImageData 绘制到临时的 canvas 上
tempCtx.putImageData(imageData, 0, 0);
// 将 canvas 生成 Blob 对象
tempCanvas.toBlob((blob) => {
// 创建一个 URL 对象
let url = URL.createObjectURL(blob);
// 创建一个 a 元素并设置其属性
let a = document.createElement('a');
a.href = url;
a.download = 'processed_image.png'; // 设置下载文件的名称
// 将 a 元素添加到 body 中
document.body.appendChild(a);
// 触发点击事件以开始下载
a.click();
// 下载完成后移除 a 元素
document.body.removeChild(a);
// 释放 URL 对象
URL.revokeObjectURL(url);
}, 'image/png');
// 释放内存
target.delete(); // 在这里释放 target，否则会造成内存泄露
}
// 释放内存
img.delete();
dst.delete();
gray.delete(); // 释放灰度图像 Mat
contours.delete();
hierarchy.delete();
approx.delete();
foundContour.delete();
} catch (err) {
console.error("图像处理出现错误:", err);
}
}
}
</script>
</body>
</html>以上是我的代码，对图片进行处理，然后识别图片中文档的四个坐标，提取坐标没有问题，但是到了投影变换这块，图片结果是空白的，也没有报错，请问各位大佬是哪里有问题吗？
投影变化部分代码：
// 投影变换
let srcQuad = cv.matFromArray(4, 1, cv.CV_32FC2, points.flat());
let dstQuad = cv.matFromArray(4, 1, cv.CV_32FC2, [0, 0, img.cols, 0, img.cols, img.rows, 0, img.rows]);
let transmtx = cv.getPerspectiveTransform(srcQuad, dstQuad);
let target = new cv.Mat();
cv.warpPerspective(img, target, transmtx, new cv.Size(img.cols, img.rows));
// 显示结果
cv.imshow(canvas, target);投影结果正常显示
共有1个答案
百里朝
改进
1.设置 canvas 大小：在 imgElement.onload 中设置 canvas 的宽度和高度。
2.添加错误处理：在 imgElement.onerror 中添加错误处理，以捕获图像加载错误。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>OpenCV.js Example</title>
</head>
<body>
<script async src="https://docs.opencv.org/4.5.5/opencv.js" onload="onOpenCvReady();"></script>
<canvas id="canvasOutput"></canvas>
<script>
function onOpenCvReady() {
console.log("OpenCV.js加载完成.");
processImage();
}
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
async function processImage() {
await sleep(3000); // 等待 3 秒
let imageUrl = "../archives/111.jpg";
let imgElement = new Image();
imgElement.src = imageUrl;
var img;
// 加载图像
imgElement.onload = function() {
try {
img = cv.imread(imgElement);
if (img.empty()) {
console.error("Image could not be read.");
return;
}
// 获取 canvas 元素并设置大小
let canvas = document.getElementById('canvasOutput');
canvas.width = img.cols;
canvas.height = img.rows;
// 重置图像大小
let dsize = new cv.Size(img.cols, img.rows);
let dst = new cv.Mat();
cv.resize(img, dst, dsize, 0, 0, cv.INTER_AREA);
// 转为灰度图像
console.log("转换之前:", img);
let gray = new cv.Mat(); // 创建一个新的 Mat 对象来存灰度图像
cv.cvtColor(dst, gray, cv.COLOR_BGR2GRAY); // 使用适当的转换
console.log("转换之后:", gray);
// 高斯滤波
cv.GaussianBlur(gray, gray, new cv.Size(11, 11), 0, 0);
cv.imshow(canvas, gray);
cv.Canny(gray, gray, 20, 50, 3);
let contours = new cv.MatVector();
let hierarchy = new cv.Mat();
cv.findContours(gray, contours, hierarchy, cv.RETR_CCOMP, cv.CHAIN_APPROX_NONE);
let index = 0, maxArea = 0;
const area = img.cols * img.rows;
for (let i = 0; i < contours.size(); ++i) {
let tempArea = Math.abs(cv.contourArea(contours.get(i)));
if (tempArea > maxArea && tempArea > 0.3 * area) {
index = i;
maxArea = tempArea;
}
}
if (maxArea === 0) return;
const foundContour = contours.get(index);
const arcL = cv.arcLength(foundContour, true);
let approx = new cv.Mat();
// 逼近多边形
cv.approxPolyDP(foundContour, approx, 0.01 * arcL, true);
if (approx.total() === 4) {
let points = [];
const data32S = approx.data32S;
for (let i = 0, len = data32S.length / 2; i < len; i++) {
points[i] = {x: data32S[i * 2], y: data32S[i * 2 + 1]};
}
console.log("检测到四边形点:", points);
// 投影变换
let srcQuad = cv.matFromArray(4, 1, cv.CV_32FC2, points.flat());
let dstQuad = cv.matFromArray(4, 1, cv.CV_32FC2, [0, 0, img.cols, 0, img.cols, img.rows, 0, img.rows]);
let transmtx = cv.getPerspectiveTransform(srcQuad, dstQuad);
let target = new cv.Mat();
cv.warpPerspective(img, target, transmtx, new cv.Size(img.cols, img.rows));
// 显示结果
cv.imshow(canvas, target);
// 创建一个临时的 canvas 元素
let tempCanvas = document.createElement('canvas');
tempCanvas.width = target.cols;
tempCanvas.height = target.rows;
let tempCtx = tempCanvas.getContext('2d');
// 将 cv.Mat 转换为 ImageData
let imageData = new ImageData(new Uint8ClampedArray(target.data), target.cols, target.rows);
// 将 ImageData 绘制到临时的 canvas 上
tempCtx.putImageData(imageData, 0, 0);
// 将 canvas 生成 Blob 对象
tempCanvas.toBlob((blob) => {
// 创建一个 URL 对象
let url = URL.createObjectURL(blob);
// 创建一个 a 元素并设置其属性
let a = document.createElement('a');
a.href = url;
a.download = 'processed_image.png'; // 设置下载文件的名称
// 将 a 元素添加到 body 中
document.body.appendChild(a);
// 触发点击事件以开始下载
a.click();
// 下载完成后移除 a 元素
document.body.removeChild(a);
// 释放 URL 对象
URL.revokeObjectURL(url);
}, 'image/png');
// 释放内存
target.delete(); // 在这里释放 target，否则会造成内存泄露
}
// 释放内存
img.delete();
dst.delete();
gray.delete(); // 释放灰度图像 Mat
contours.delete();
hierarchy.delete();
approx.delete();
foundContour.delete();
} catch (err) {
console.error("图像处理出现错误:", err);
}
}
imgElement.onerror = function() {
console.error("Image could not be loaded.");
};
}
</script>
</body>
</html>
类似资料：
-
举个简单的例子来说明正交投影与透视投影照相机的区别。使用透视投影照相机获得的结果是类似人眼在真实世界中看到的有“近大远小”的效果（如下图中的(a)）；而使用正交投影照相机获得的结果就像我们在数学几何学课上老师教我们画的效果，对于在三维空间内平行的线，投影到二维空间中也一定是平行的（如下图中的(b)）。 (a)透视投影，(b)正交投影 那么，你的程序需要正交投影还是透视投影的照相机呢？ 一般说来，对
-
在我的Android应用程序，我需要变形的图像从一个点到另一个点。看起来应该是那样的 原点A和B是A的新位置 我尝试使用“drawBitmapMesh”函数使其成为可能，但没有达到，以下是包装代码： 公共空隙扭曲（浮动起点TX、浮动起点、浮动终点X、浮动终点Y）{
-
我正在使用Spring Data JPA在我的spring boot项目。 我正在激发一个JPQL查询，并使用一个投影来存储查询的结果。我的投影： 我的服务调用此投影： 现在我想使用Mockito（单元测试用例）测试这个服务，我正在使用when和thenreturn模拟对存储库的调用。 我的问题是如何模拟存储库的结果？回信里应该有什么？我的意思是，我如何创建投影实例并将数据设置到它？
-
针对不同应用的三维场景需要使用不同的投影方式，比如机械、工业设计领域常常采用正投影(平行投影), 大型游戏场景往往采用透视投影(中心投影)。为了完成三维场景不同的投影方式，three.js封装WebGL API和相关算法，提供了正投影相机OrthographicCamera和透视投影相机PerspectiveCamera。 正投影和透视投影简单解释 下面对正投影相机和透视投影相机的投影算法进行简单
-
我刚刚学习了透视投影，并且发现在openGl中应用它有点令人困惑。 考虑一个简单的正方形。＜br＞在使用透视投影之前，我可以定义其顶点在[-1,1]空间中的坐标，对于｛0.0f，0.0f，0.0 f，1.0f、1.0f、1.0 f、1,0.0 F｝的输入，该正方形将占据窗口的第一象限 考虑我的代码中的以下部分： 设置矩阵： 制服： 顶点着色器： 但是，结果是一个空白屏幕 我需要在此应用哪些额外的转
-
在这一节中我们将会介绍如何在保持深度外观的情况下将三维世界中的物体投影到二维平面上去。最有代表性的例子是：当我们站在一条笔直的马路的中间向前看时，我们会发现马路的两边会越来越靠近，并最终汇聚成一个点。这就是图形学中常说的透视投影。 为了实现上面的效果，在本节中我们需要生成一个投影矩阵，这个投影矩阵需要满足能够将所有的顶点都投影到范围位于 -1 到 1 之间的规范化空间中（normalizedspa
-
透视投影照相机（Perspective Camera）的构造函数是： THREE.PerspectiveCamera(fov, aspect, near, far) 让我们通过一张透视照相机投影的图来了解这些参数。 透视图中，灰色的部分是视景体，是可能被渲染的物体所在的区域。fov是视景体竖直方向上的张角（是角度制而非弧度制），如侧视图所示。 aspect等于width / height，是照相
-
给定这个查询： 问题是查询只在parentDevice不为空时返回设备。为什么？如何拿回任何价值？如果我从投影中取出qdevice.parentdevice，结果是好的。 QueryDsl版本为3.2.0