CamanJS

特点

• 丰富的滤镜和效果：支持多种图像滤镜和效果，包括亮度、对比度、饱和度、色相、噪声等。
• 自定义滤镜：开发者可以创建自定义滤镜，结合内置滤镜或从头开始创建。
• 层和混合模式：支持复杂的层系统和混合模式，类似于 Photoshop 的图像处理。
• 跨域图像处理：提供 PHP 代理脚本，允许处理跨域图像。
• 与框架兼容：可与 React 等前端框架结合使用。

使用场景

• 在线图像编辑器：创建在线图像编辑工具，允许用户实时编辑和应用效果。
• 图片预处理：在上传前对图片进行预处理，以减少服务器负担。
• 增强用户体验：在社交媒体或照片分享应用中，提供丰富的图像编辑功能。

安装方式 可以通过 npm 或直接引用 CDN 来安装 CamanJS。

npm install caman

或在 HTML 中添加脚本标签：

<script src="https://cdnjs.cloudflare.com/ajax/libs/camanjs/4.1.2/caman.full.min.js"></script>

使用示例

以下示例展示了如何使用 CamanJS 调整图像的亮度和对比度。

<img id="image" src="path/to/image.jpg" alt="example image">
<script src="https://cdnjs.cloudflare.com/ajax/libs/camanjs/4.1.2/caman.full.min.js"></script>
<script>
  Caman('#image', function () {
    this.brightness(10);
    this.contrast(20);
    this.render();
  });
</script>

常用 API 介绍

• brightness(value): 调整亮度，value 为 -100 到 100 的整数。
• contrast(value): 调整对比度，value 为 -100 到 100 的整数。
• saturation(value): 调整饱和度，value 为 -100 到 100 的整数。
• hue(value): 调整色相，value 为 -360 到 360 的整数。
• render(): 应用所有变更并渲染图像。

高级用法

CamanJS 支持创建复杂的自定义滤镜和使用层及混合模式。例如，创建一个老照片滤镜：

Caman.Filter.register('oldpaper', function() {
  this.pinhole();
  this.noise(10);
  this.orangePeel();
  this.render();
});

官方资料

• GitHub 仓库
• 插件库
• 文档

CamanJS 是一个非常强大且灵活的工具，可以用于各种需要图像处理的 Web 应用场景。