为 GridJS 写了三个 Demo

[sneezry]

之前有小伙伴要Demo，因为目前还在修改和添加代码，另外写完之后我会抓紧搞文章，所以写出完善的Demo可能要往后放了。

本着没Demo不是好项目的原则，今天抽空写了三个和大家分享。

还不知道GridJS是什么的小伙伴们请看这里：http://v2ex.com/t/191612

首先感谢@rebornix提供的照片。

原图：

棕榈滤镜效果：

function sepia(im) {
  var newR, newG, newB,
      g = gridjs;

  newR = g.multiply(im.pixel.r, 0.393);
  newR = g.add(newR, g.multiply(im.pixel.g, 0.769));
  newR = g.add(newR, g.multiply(im.pixel.b, 0.189));

  newG = g.multiply(im.pixel.g, 0.349);
  newG = g.add(newG, g.multiply(im.pixel.g, 0.686));
  newG = g.add(newG, g.multiply(im.pixel.b, 0.168));

  newB = g.multiply(im.pixel.r, 0.272);
  newB = g.add(newB, g.multiply(im.pixel.g, 0.534));
  newB = g.add(newB, g.multiply(im.pixel.b, 0.131));

  im.pixel.r = newR;
  im.pixel.g = newG;
  im.pixel.b = newB;

  im.update();

  return im;
}

素描滤镜效果：

function sketch(im) {
  var im2, dodge,
      g = gridjs,
      mask = [
        [-1, -4, -7, -4, -1],   
        [-4, -16, -26, -16, -4],   
        [-7, -26, 505, -26, -7],  
        [-4, -16, -26, -16, -4],   
        [-1, -4, -7, -4, -1]
      ];

  mask = g.div(mask, 273);

  im.grayscale();
  im2 = im.copy().reverse();
  im2.pixel.G = g.gauss(im2.pixel.G, 5);
  im2.pixel.G = g.norm(im2.pixel.G, 0, 255);

  dodge = g.ones(im.pixel.G, 256);
  dodge = g.minus(dodge, im2.pixel.G);
  dodge = g.div(im2.pixel.G, dodge);
  dodge = g.mul(im.pixel.G, dodge);
  dodge = g.add(im.pixel.G, dodge);
  dodge = g.cutoff(dodge, 255);
  dodge = g.conv(dodge, mask);

  im.pixel.G = dodge;
  im.update();

  return im;
}

浮雕滤镜效果：

function embossment(im) {
  var g = gridjs,
      mask = [
        [-1, 0, 1],
        [-2, 0, 2],
        [-1, 0, 1]
      ];

  im.grayscale();
  im.pixel.G = g.conv(im.pixel.G, mask);
  im.pixel.G = g.norm(im.pixel.G, 0, 255);
  im.update();

  return im;
}

好了，下面该轮到你们啦~~

[qgy18]

很赞，第一个来支持~

[Moker]

改天我也来加几个滤镜

[ajan]

赞