如何通过JavaScript实现图像处理与计算机视觉基础功能？

// 获取 canvas 和上下文
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const img = document.getElementById('image');
<p>// 绘制图像到 canvas
ctx.drawImage(img, 0, 0);
// 获取图像像素数据
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const data = imageData.data;</p><p>// 遍历每个像素，转换为灰度
for (let i = 0; i < data.length; i += 4) {
const gray = (data[i] + data[i + 1] + data[i + 2]) / 3;
data[i] = gray;     // R
data[i + 1] = gray; // G
data[i + 2] = gray; // B
}</p><p>// 将处理后的数据写回 canvas
ctx.putImageData(imageData, 0, 0);</p>

// 加载 OpenCV.js 后
cv.cvtColor(src, dst, cv.COLOR_RGBA2GRAY);
cv.Canny(dst, cannyDst, 50, 100);

import * as tf from '@tensorflow/tfjs';
import * as cocoSSD from '@tensorflow-models/coco-ssd';
<p>async function detectObjects() {
const model = await cocoSSD.load();
const img = document.getElementById('img');
const predictions = await model.detect(img);
console.log(predictions); // 输出检测结果：类别、位置、置信度
}</p>

const kernel = [
  [1, 2, 1],
  [2, 4, 2],
  [1, 2, 1]
];
const scale = 16; // 总权重
<p>// 对每个非边缘像素应用卷积</p>