三款用于图像处理的 JavaScript 库

红薯 发布于 2012/03/21 23:29
阅读 5K+
收藏 126

本文向你介绍三款用于在线处理图像的 jQuery 插件:

1. PaintbrushJS

PaintbrushJS 是一个轻量级的 JS Canvas 库用来做一些简单的图像处理。

演示:http://mezzoblue.github.com/PaintbrushJS/demo/index.html

示例代码:

<img src="image.jpg" class="filter-emboss" data-pb-emboss-amount="0.5"/>
<img src="image.jpg" class="filter-mosaic" data-pb-mosaic-opacity="0.5" data-pb-mosaic-size="5"/>

2. CamanJS

CamanJS 是一个使用 HTML5 Canvas 和 JavaScript 实现的用来对图像进行处理的 JavaScript库,提供一些易用接口来对图像进行处理,例如加亮等等。

 

camanjs CamanJS Javascript Library for Image Manipulation

示例代码:

<script type="text/javascript" src="caman.full.min.js"></script>

<script type="text/javascript">
Caman("images/example-image.jpg", "#example-canvas", function () {
	this
		.saturation(20)
		.gamma(1.4)
		.vintage()
		.contrast(5)
		.exposure(15)
		.vignette(300, 60)
		.render();
});
</script>

<canvas id="#example-canvas"></canvas>

3. vintageJS

vintageJS - 给照片添加复古和仿旧效果. vintageJS 可以为我们的照片添加仿旧风格,包括LOMO和高光等等。

示例代码:

$('img.vintage').click(function () {
    $(this).vintage({
        vignette: {
            black: 0.8,
            white: 0.2
        },
        noise: 20,
        screen: {
            red: 12,
            green: 75,
            blue: 153,
            strength: 0.3
        },
        desaturate: 0.05
    });
});
加载中
0
dodola
dodola
收藏之
0
jeffsui
jeffsui
速度mark之!
0
Minho
Minho
什么地方能用到呢?
0
月明
先收藏了再说
0
康睿
康睿
好东西得收藏 ^_^
0
wolf2999
wolf2999
这个不是图像处理吧,应该是图像显示的。
红薯
红薯
绝对是图像处理的,这点分别我还是能看出的,呵呵:)
0
hokim
hokim
处理谈不上,只是加工一下而已吧
0
aoaoxiong
aoaoxiong

效果不错

返回顶部
顶部