利用jsfeat实现照片转线稿

日期：2025-07-29 人气：5

现在随着AI大模型的兴起，很多功能都可以用大模型来实现，目前这个阶段大模型实际上是很多函数库的堆积，并不是实际意义上的人工智能。

例如利用图生图功能，将一张照片转换成线稿，或者将一个线稿生成图片。

其实完全可以利用JS来实现将一张照片转换成线稿。
例如我们使用JSFeat库
```
import jsfeat from 'jsfeat';

...

/* 处理图片 黑白线稿 */
processByCannyEdgeDetection: function (imageData){
  /* 参数 */
  const blur_radius =  1;
  const low_threshold =  50; // default 20
  const high_threshold =  100; // default 50

// 用来记录存储处理的图片数据对象
  const img_u8 = new jsfeat.matrix_t(imageData.width, imageData.height, jsfeat.U8C1_t);
  // 灰度
  jsfeat.imgproc.grayscale(imageData.data, imageData.width, imageData.height, img_u8);
  // 高斯模糊
  const kernelSize = (blur_radius + 1) * 2;
  jsfeat.imgproc.gaussian_blur(img_u8, img_u8, kernelSize, 0);
  // canny计算
  jsfeat.imgproc.canny(img_u8, img_u8, low_threshold, high_threshold);

const data_u32 = new Uint32Array(imageData.data.buffer);
  var alpha = (0xff << 24);
  var i = img_u8.cols * img_u8.rows, pix = 0;
  while (--i >= 0) {
    pix = 255 - img_u8.data[i];
    data_u32[i] = alpha | (pix << 16) | (pix << 8) | pix;
  }
  return imageData.data;
}
```

其中线稿用到了canny边缘算法有两个阈值可以调节
- high_threshold（高阈值）
作用：用于确定强边缘的初始筛选。梯度值（边缘强度）高于此阈值的像素会被直接标记为确定边缘（保留为边缘）。
影响：
值越高，检测到的边缘越少（只保留最显著的边缘）。
值过低可能导致噪声被误判为边缘。
- low_threshold（低阈值）
作用：用于弱边缘的筛选。梯度值低于此阈值的像素会被直接舍弃（非边缘）。介于低阈值和高阈值之间的像素会被视为“潜在边缘”。
边缘连接规则：
只有当弱边缘像素与强边缘像素相邻（连通）时，这些弱边缘才会被保留为最终边缘。
否则，它们会被丢弃。
影响：
值越低，可能保留更多细节（但噪声也可能增加）。
值过高可能导致边缘断裂（不连续）。

如果线稿不连续或者噪点太多可以适当调整这两个参数，一般high_threshold是low_threshold的2~3倍

### 鸣谢

- [张鑫旭](https://www.zhangxinxu.com/wordpress/2018/06/js-canny-edge-photo-image-to-line/comment-page-1/)

标签：

上一篇：七棵菜表单快速开发平台二次开发步骤下一篇：图像色彩空间（RGB、HSV、HLS）

利用jsfeat实现照片转线稿

随便看看

留言