Caman.js的图片处理演示

计算机编程
,

CamanJS图形处理库

之前我曾想过自己做一个简单的图片处理库自己用,后来做了几个基本效果以后发现了成本太高

然后就放弃了,去找了个现成的图形库:CamanJS

发现用起来也不错,也就没有再做下去

简介

CamanJS是一个图片处理类库,能十分方便的处理图片，本身已经提供了许多效果和操作，使用起来也十分方便

项目地址：https://github.com/meltingice/CamanJS/

简单使用

在头文件中引入文件//cdn.bootcss.com/camanjs/4.1.2/caman.full.min.js

然后就可以直接使用内置的函数和效果了

例如：

1
2
3
Caman("#image",function(){
    this.stackBlur(5).render()  //模糊处理，模糊半径5像素
})

测试工具

(尽量使用chrome浏览器,请等待网页加载完毕)

预置效果

Caman内置了一批现成的图片效果，使用起来非常简单
this.revert()用来重置图片效果,保证各个效果不互相影响
this.lomo()将lomo效果用到图片上
this.render()渲染图片

1
2
3
4
5
Caman("#image",function(){
    this.revert();
    this.lomo();
    this.render();
})

执行love效果:

其他预置效果还有

lomo,vintage,clarity,sinCity,sunrise,crossProcess,orangePeel,grungy,jarques,
pinhole,oldBoot,glowingSun,hazyDays,herMajesty,nostalgia,hemingway,concentrate
等

将以上方法替换文本框中的lomo,例如 this.hazyDays();,然后点 RUN 就行了

Camanjs缺点

不适合用来做粒度极细的像素级操作,虽然提供了方法