Các bài cùng serial: Sử dụng camera đo khoảng cách 2 vật thể hoặc 2 điểm
- Thuật toán để đo khoảng cách 2 vật thể hoặc 2 điểm bằng camera
- Đo khoảng cách giữa hai điểm bằng camera điện thoại
- Áp dụng OpenCV trong JavaScript và tính toán khoảng cách giữa hai điểm trong ảnh(bạn đang xem)
- Sử dụng TensorFlow.js tính khoảng cách giữa hai điểm ảnh
- Công thức tính toán Real World Distance và tính các tham số từ JavaScript
- JavaScript và HTML5 đo khoảng cách từ điện thoại đến một điểm
Để áp dụng OpenCV trong JavaScript và tính toán khoảng cách giữa hai điểm trong ảnh dựa trên bài toán bạn đề cập, bạn có thể thực hiện như sau:
Ý tưởng giải quyết bài toán
- Tính toán kích thước thực tế của một pixel (SS):
- Dựa trên thông số của camera (FOV, khoảng cách ZZ, độ phân giải ảnh).
- Công thức như đã đề cập: S=2⋅Z⋅tan(FOV/2)ResolutionS = \frac{2 \cdot Z \cdot \tan(\text{FOV} / 2)}{\text{Resolution}}
- Kết quả: SS là kích thước thực tế mỗi pixel.
- Chấm hai điểm trong ảnh (tọa độ pixel):
- Người dùng chọn hai điểm trên ảnh, lưu tọa độ (x1,y1)(x_1, y_1) và (x2,y2)(x_2, y_2).
- Tính khoảng cách Euclidean giữa hai điểm trong ảnh: distance_pixels=(x2−x1)2+(y2−y1)2\text{distance\_pixels} = \sqrt{(x_2 – x_1)^2 + (y_2 – y_1)^2}
- Chuyển đổi khoảng cách pixel sang khoảng cách thực tế:
- Khoảng cách thực tế: distance_real=distance_pixels⋅S\text{distance\_real} = \text{distance\_pixels} \cdot S
Triển khai với OpenCV.js
Dưới đây là ví dụ minh họa sử dụng OpenCV.js trong JavaScript:
Bước 1: Tải OpenCV.js
- Tải thư viện OpenCV.js vào dự án.
- Thêm thư viện từ CDN:
<script async src="https://docs.opencv.org/4.x/opencv.js" type="text/javascript"></script>
Bước 2: Code JavaScript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Distance Calculation</title>
</head>
<body>
<h1>Distance Between Two Points</h1>
<canvas id="canvas" style="border:1px solid black;"></canvas>
<p id="output"></p>
<script async src="https://docs.opencv.org/4.x/opencv.js" type="text/javascript"></script>
<script>
// Tải ảnh lên canvas
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const image = new Image();
image.src = 'your_image.jpg'; // Đường dẫn ảnh
image.onload = () => {
canvas.width = image.width;
canvas.height = image.height;
ctx.drawImage(image, 0, 0);
};
// Các thông số camera
const Z = 50; // Khoảng cách từ camera đến vật thể (cm)
const FOV = 70; // Góc nhìn ngang của camera (độ)
const resolution = 1920; // Độ phân giải ngang của ảnh (pixel)
const S = (2 * Z * Math.tan((FOV / 2) * Math.PI / 180)) / resolution; // Kích thước thực tế của một pixel
// Chọn hai điểm
const points = [];
canvas.addEventListener('click', (e) => {
const rect = canvas.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
points.push({ x, y });
// Vẽ điểm lên ảnh
ctx.beginPath();
ctx.arc(x, y, 5, 0, 2 * Math.PI);
ctx.fillStyle = 'red';
ctx.fill();
// Khi có đủ 2 điểm, tính khoảng cách
if (points.length === 2) {
const dx = points[1].x - points[0].x;
const dy = points[1].y - points[0].y;
const distancePixels = Math.sqrt(dx * dx + dy * dy);
const distanceReal = distancePixels * S; // Chuyển đổi sang khoảng cách thực tế (cm)
document.getElementById('output').innerText = `
Distance (pixels): ${distancePixels.toFixed(2)} pixels
Distance (real): ${distanceReal.toFixed(2)} cm
`;
}
});
</script>
</body>
</html>
Giải thích từng phần
- Canvas để hiển thị ảnh:
- Người dùng có thể chấm hai điểm trên canvas.
- Tọa độ x,yx, y được lấy từ sự kiện click (
canvas.addEventListener('click')).
- Tính toán kích thước thực tế mỗi pixel (SS):
- Dựa trên thông số camera (Z,FOV,ResolutionZ, FOV, \text{Resolution}).
- Tính khoảng cách giữa hai điểm:
- Dựa trên công thức Euclidean: distance_pixels=(x2−x1)2+(y2−y1)2\text{distance\_pixels} = \sqrt{(x_2 – x_1)^2 + (y_2 – y_1)^2}
- Chuyển đổi khoảng cách sang thực tế:
- Kích thước thực tế mỗi pixel (SS) được dùng để tính distance_real\text{distance\_real}.
- Hiển thị kết quả:
- Khoảng cách pixel và khoảng cách thực tế (cm) được hiển thị ra màn hình.
Ưu điểm của OpenCV.js
Nếu bạn muốn tích hợp xử lý ảnh nâng cao (ví dụ: phát hiện vật thể, cải thiện độ chính xác), OpenCV.js có thể cung cấp nhiều công cụ mạnh mẽ hơn như:
- Phát hiện cạnh (Canny Edge Detection).
- Phát hiện vật thể bằng các thuật toán như Hough Circles, Contours.
Bạn có thể dễ dàng mở rộng mã nguồn để kết hợp các thuật toán này.
One thought on “Áp dụng OpenCV trong JavaScript và tính toán khoảng cách giữa hai điểm trong ảnh”