Legendshop教你如何使用Caman.js处理图片 - 朗尊软件，企业级电商平台提供商

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

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

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

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

完整的dome和代码

官网例子

HTML数据属性

• data-caman-hidpi：高分辨率替换图像的URL
• data-caman-hidpi-disabled：默认情况下启用HiDPI支持，因此如果要强制禁用它，请添加此属性
  如果检测到HiDPI显示器，CamanJS将自动切换到HiDPI版本，高分辨率的图片需要更多的时间渲染。

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');
    });
});

• 图片噪音百科

• 伽玛值百科

• 贝塞尔曲线

• 如需更高级的使用姿势请点击 caman高级用法