学习《数字图像处理》课程时为了验证图像处理算法完成的一个基于 canvas 的数字图像处理库。
- 引入 YI
YI 采用了 UMD 的写法，因此你可以使用 AMD，CMD 或者直接用 JavaScript 标签包含的方式加载。
- 处理图像
// 得到一幅图片
var img = document.getElementByTagName('img')[0];
// 得到一个 YI 的实例，参数为一个 image 元素
var yi = new YI(img);
// 转换为灰度图像，再进行二值化处理，再替换原图像
yi.gray().then(function(){
return yi.threshold('binary',100);
}).then(function(yi){
yi.replace(img);
});YI 中除了 replace 方法外，其余方法均返回 Promise 对象。因为使用了 Web Worker 来处理图像，所以处理过程是异步的，不会阻塞 UI 。
var img = document.getElementById('target-image');
var yi = new YI(img);
// 进行高斯滤波
yi.filter('gaussian').then(function(yi){
yi.replace(img);
});
// 恢复原图
yi.origin().then(function(yi){
yi.replace(img);
});注：下列方法都返回对象本身，可以进行链式调用。
-
replace：用处理后的图片替换掉另一幅图片
-
origin：恢复为原始图像
-
gray：将图像转换为灰度图
-
invert：将图像进行反色
-
pseudoColor：伪彩色
-
threshold：图像分割处理。这个函数可以有多个参数：
// 使用自定义阈值进行图像分割 ( 第二个参数为分割的阈值 )
yi.threshold('binary', 100);
// 使用 Otsu 算法进行图像分割
yi.threshold('otsu');
// 使用最大类间类内方差比法进行图像分割
yi.threshold('mr');
// 使用归零算法进行图像分割
yi.threshold('tozero');- filter：图像滤波处理。该函数有多个可选参数：
// 均值滤波
yi.filter('mean');
// 中值滤波
yi.filter('mid');
// 高斯滤波
yi.filter('gaussian');
// K近邻(KNN)平滑滤波
yi.filter('knn');-
sepia：复古效果
-
oilPainting：油画效果
-
posterize：色调分离
-
gamma：gamma 调节
-
flip：对图像进行翻转操作，该方法有多个可选参数：
// 上下翻转 (Y轴镜像)
yi.flip('y');
// 左右翻转 (X轴镜像)
yi.flip('x');
// 上下、左右翻转
yi.flip('xy');- noise：添加噪声 (目前只能添加椒盐噪声，使用方法如下)
// 添加椒盐噪声，数量为1000个，大小为边长为 2 像素的点
yi.noise('salt', 1000, 2);MIT