之前有小伙伴要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;
}
好了,下面该轮到你们啦~~
这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。
V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。
V2EX is a community of developers, designers and creative people.