在我们工作生活中经常会有很多图片需要处理，尤其是做电商的，经常需要处理大量的图片用于店铺、商城装修和商品上线，图片的质量直接影响到商城的美观度和客户的购买欲，所以处理图片是我们电商人的必备技能。今天Legendshop就教你们如何使用Caman.js处理图片。

caman.js是一个简单易用的界面与高级和高效的图像/画布编辑技术的组合

有兴趣的朋友可以到官网了解并下载相关的库
caman.js官网
caman - GitHub

使用前需要导入的库: 在线CDN


完整的dome和代码
官网例子
HTML数据属性
camanjs初始化

传入canvas-id和url，便可以把图片加载到画布中

基于安全原因，camanjs不能直接修改电脑本地图片

例 
//简单的初始化 Caman("#canvas-id", "url", function () { 
this.render();
}); //上传图片初始化,需要引入入jquery.js $("input[type=file]").on("change", function(e) { var reader = new FileReader();
    reader.onload = function(e) { var url = e.target.result;
        Caman("#canvas-id", url, function () { this.render();
        });
    } 
    reader.readAsDataURL(e.target.files[0]);
});
跨域

如需跨域管理图片可以使用camanjs一并提供了的 PHP 代理,为了能使用这个特性，你需要在你的服务器上面放置这个 PHP 脚本 . 该脚本将作为代理向你的浏览器提供来自远程数据源的图像数据，以规避编辑限制

之后你需要在你的JavaScript中添加下面这一行 使用 camanjs修改图片

Caman.remoteProxy = Caman.IO.useProxy('php');

使用camanjs修改图片

例 
Caman("#canvas-id", function () { 
//修改前将图片恢复到初始状态 
initCanvas(); 
//this.revet(false) 
//修改图片亮度，范围为-100到100 
this.brightness(5);
 //修改图片红蓝绿通道的强度，范围为-100到100 this.channels({red: 10,green: -5,blue: 2});
 //调整图片剪切颜色值，范围为0到100 this.clip(20); 
//将图像中的颜色均匀地移动到给定的颜色 
//调整范围为0到100.值越高，图像中的颜色越接近给定的调整颜色 
//该过滤器是多态的，可以采用两组不同的参数 
//this.colorize("#4090D5", 20); this.colorize(25, 180, 200, 20);
 //修改图片颜色对比度，范围为-100到100 //对比度非常敏感，小心使用 this.contrast(5);
 //根据给定的贝塞尔曲线调整图像的颜色值 
//类似于Photoshop中的Curves功能 
//参数:(通道，起始点，第一控制点，第二控制点，终点) 
//第一个参数表示您希望使用过滤器进行修改的通道,它可以是一组通道或一个字符串(用于单个通道) 
//其余参数是表示点坐标的2元素数组
 this.curves('rgb', [0, 0], [100, 120], [180, 240], [255, 255]);
 //this.curves(['r', 'b'], [0, 0], [100, 120], [180, 240], [255, 255]);
 //修改图片曝光度，范围为-100到100，值> 0将增加曝光 this.exposure(10);
 //用单一纯色填充画布，可以将单独的R，G和B值作为参数，或单个十六进制颜色值 this.fillColor("#e2e2e2");
 //this.fillColor(125, 215, 56);
 //让您调整图像的伽玛 //范围为0到无穷远，尽管正常值为0到4或5. 0和1之间的值将减小对比度，而大于1的值将增加 this.gamma(1.4)； 
//将图像转换为灰度,这个过滤器没有参数 this.greyscale(); 
//调整图像的色调,范围为0到100 this.hue(90);
 //倒置,通过从255减去每个颜色通道值来反转图像中的所有颜色,这个过滤器没有参数 this.invert();
 //调整图片噪音，范围为0到无穷大 this.noise(15);
 //调整图片饱和，范围是-100到100.值<0将去饱和，值> 0会使图像饱和 this.saturation(15); 
//给图片添加深褐色效果，范围为0到100 this.sepia(50); 
//使用更智能更微妙的方式调整饱和 
//范围是-100到100.值<0将使图像去饱和，而值> 0会使图像饱和 this.vibrance(15); 
//编辑图片 this.render(); 
//编辑后保存图像 this.render(function () { this.save('png');
    });
});