再来看一下边缘检测的实现方式吧。
// 与模糊处理不同的地方是该3*3的矩阵数值不一样，不过把所有元素加起来依旧为1
let kernel = [[-1, -1, -1 ], [ -1, 9, -1 ], [-1, -1, -1 ]];
function preload() {
img = loadImage("https://sh-cdn-tos.aleshu.com/ickerlab_storages/userid_1/2023-08-02/1690964972_image.png");
}
function setup() {
// 画布：710*400
createCanvas(710, 400);
noLoop();
}
function draw() {
// 画布左侧放原图
image(img, 0, 0);
// 创建一个图像（空的，此时该图像里是没有img的信息的）
edgeImg = createImage(img.width, img.height);
// 进一步对edgeImg进行处理
edgeImg.loadPixels();
// 先进行图像遍历
for (let x = 1; x < img.width - 1; x++) {
for (let y = 1; y < img.height - 1; y++) {
// 可以想一下为什么要把sum = 0放在这里
let sum = 0;
// 取当前像素点周围的一圈像素点
for (kx = -1; kx <= 1; kx++) {
for (ky = -1; ky <= 1; ky++) {
let xpos = x + kx;
let ypos = y + ky;
// 取红色通道内像素数值，灰度图像三通道的数值都是一样的
let val = red(img.get(xpos, ypos));
// 整个程序与模糊滤镜最大的区别就在于kernel中的数值了，可以自行体会。
sum += kernel[ky+1][kx+1] * val;
}
}
// 将当前处理完成的像素值赋予edgeImg图像对应点位的像素值上
edgeImg.set(x, y, color(sum));
}
}
// 更新
edgeImg.updatePixels();
// 图像在画布右侧显示
image(edgeImg, img.width, 0);
}
new p5();
