/YI

:camera: YI:基于 Canvas 的图像处理库

Primary LanguageJavaScriptMIT LicenseMIT

yi.js

学习《数字图像处理》课程时为了验证图像处理算法完成的一个基于 canvas 的数字图像处理库。

查看 demo

使用方法

  1. 引入 YI

YI 采用了 UMD 的写法,因此你可以使用 AMD,CMD 或者直接用 JavaScript 标签包含的方式加载。

  1. 处理图像
// 得到一幅图片
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);
});

API

注:下列方法都返回对象本身,可以进行链式调用。

  • 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);

License

MIT