JS实现照片图片变成黑白线条线稿«张鑫旭鑫空间

点击demo页面中这个“更换图片”按钮，可以选择本地图片，体验线图效果：

采用canny算法对图像的边缘进行检测。Canny边缘检测算子是JohnF.Canny于1986年开发出来的一个多级边缘检测算法。截止2014年8月,Canny发表的该篇论文，已被引用19000余次。

关于图像处理的很多经典算法，已经有很多前辈在JS中实现了。例如，人脸识别(Facerecognition)，光流(Opticalflow)，角点检测等。

几个比较有名的项目JS见下表（附带人脸检测一些数据）：

不同的JS项目对于图像处理的侧重点有所不同。

对于本文展示的黑白线稿效果，我使用的是jsfeat。

其文档是几个项目中我觉得做得最好的，上手要最容易。

jsfeat.js中内置了canny边缘检测处理，我们可以直接使用，但也没到一行代码就出结果那么简单。

大致使用步骤和实现原理如下：

借助canvas读取图片像素信息：context.drawImage(img,0,0,width,height);varimageData=context.getImageData(0,0,width,height);对图片像素信息进行边缘查找算法处理。实现要分为3步：1.灰度2.高斯模糊3.canny边缘检测。这样才能获得结果较好的图像边缘信息，这些边缘就是我们需要的图片中的重要线条。//用来记录存储处理的图片数据对象varimg_u8=newjsfeat.matrix_t(width,height,jsfeat.U8C1_t);//灰度jsfeat.imgproc.grayscale(imageData.data,width,height,img_u8);//高斯模糊jsfeat.imgproc.gaussian_blur(img_u8,img_u8,6,0);//canny计算jsfeat.imgproc.canny(img_u8,img_u8,20,50);img_u8中的数据此时就是图像边缘数据，然后改变imageData数据并写入canvas，最终的效果就在web上呈现了。如果我对原理不感兴趣，只想实现效果？如果大家只想在自己项目中快速有效果，也是可以的，进入demo页面，左侧可以看到源代码，里面有个名为fnCannyEdge()的方法，就是图片变线稿的关键。

于是，我们的实现步骤变成下面这样：

粘贴fnCannyEdge()的方法代码；把图片DOM对象作为参数传进去，例如：fnCannyEdge(img,canvas);效果即达成！fnCannyEdge语法和API

语法如下：

fnCannyEdge(source,canvas,options);其中：

fnCannyEdge()中还包含了一段512*512最大尺寸的限制（见下图），因为demo页面选择图片可能很大，实际开发不一定用得到，到时候自行判断要不要删掉。

照片变成黑白简单线条有什么用呢？

手绘一张漫画很辛苦了，看看日本那些漫画家，一周画几十张就累死累活。如果可以借助图形处理技术，想画个罗天大醮的龙虎山，直接拿张风景照，擦，瞬间变成线条，关键轮廓就出来，如果是富坚义博，直接就可以给编辑了，从此再也不怕断更了。

有一种图片加载策略是先加载小图，然后大图。其实可以创新下，先加载线稿图，再加载大图。

如题。写了部小说，想弄些插画，自己不会画，好的插画师也请不起，学生党又不靠谱。怎么办，自己拍个照，弄个线稿示意示意，聊胜于无，而且前后风格都统一，又有特色，说不定反而大受欢迎，就像简单单纯杨超越，个性自信王菊一样，说不准的。

以上~

感谢阅读！

（本篇完）

名称(必须)

邮件地址(不会被公开)(必须)

网站

人脸识别项目列举的好，顺道参考下。不过我很喜欢富坚义博