为 GridJS 写了三个 Demo

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

爱意满满的作品展示区。

这是一个创建于 3478 天前的主题，其中的信息可能已经有所发展或是发生改变。

之前有小伙伴要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;
}

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

im.pixel.g

g.multiply

dodge

3 条回复 • 2015-05-19 17:51:20 +08:00

qgy18

2015-05-17 21:33:00 +08:00

很赞，第一个来支持~

Moker

2015-05-17 23:20:07 +08:00

改天我也来加几个滤镜

ajan

2015-05-19 17:51:20 +08:00