Javascript 图片编辑器：让图片处理更简单 Web 开发中，我们经常需要对图片进行一些处理，比如缩放、剪裁、旋转、添加水印等等。常见的图片编辑软件如 Photoshop 功能强大，但是需要大量时间来学习和操作，对于一些简单的图片处理需求，用这些大型软件显得有些浪费时间。因此在网页上使用轻量级的 Javascript 图片编辑器是一种不错的选择。 Javascript 图片编辑器优点： 1. 无需编译：使用前端编程语言实现，不需要额外的工具链支持，编写便捷； 2. 轻量级：只需要几 kb 的代码，便可快速引入到网站中使用； 3. 利用了浏览器的图形处理能力； 4. 具有良好的可扩展性。 下面介绍几个比较成熟的 Javascript 图片编辑器： 1. Cropper.js Cropper.js 是一个用于移动设备的图片裁剪类库，支持多点触控、移动、缩放和旋转等功能。它的优势在于兼容各种手机浏览器和操作系统，而且 Cropper.js 代码小巧，不到 10K。 Cropper.js 的使用非常简单，只需要调用 Cropper() 函数并传入图片路径，就可以在浏览器中展示图片，并调整图片的位置、缩放和裁剪区域。例如：

<link href="cropper.css" rel="stylesheet"><script src="cropper.js"></script><img id="image" src="picture.jpg"><script>var cropper = new Cropper(document.getElementById('image'), {
aspectRatio: 16 / 9,
crop: function(event) {
console.log(event.detail.x);
console.log(event.detail.y);
console.log(event.detail.width);
console.log(event.detail.height);
console.log(event.detail.rotate);
console.log(event.detail.scaleX);
console.log(event.detail.scaleY);
}
});
</script>

上面的代码中，aspectRatio 指定裁剪区域的宽高比，crop 事件监听用户操作的裁剪信息，包括 x、y 轴位置、宽高、旋转角度和 X、Y 轴的缩放比例。 另外，Cropper.js 还支持跨域图片裁剪，可以使用跨域图片 URL 或 Blob 对象来实现。 2. CamanJS CamanJS 是一个基于 HTML5 Canvas 和 Javascript 的图像处理库，支持滤镜、调整色调、剪裁、旋转、缩放等操作，可以通过链式调用的方式实现多个操作的组合效果。 CamanJS 的语法类似 jQuery，通过一个 $() 函数选中指定的图片元素，实现图片及其组件的操作。例如：

<img id="image" src="picture.jpg"><script src="caman.js"></script><script>Caman("#image", function () {
this.brightness(10);
this.contrast(5);
this.render();
});
</script>

上面的代码实现了图片的亮度调整和对比度调整，其中 this 指代选中的图片，brightness() 和 contrast() 方法分别实现了亮度和对比度的调整，render() 方法将操作后的图片渲染在 Canvas 中。 3. Aviary Aviary 是一款功能强大的云端图片处理工具，提供了丰富的图片处理功能，包括修复、涂鸦、调整对比度、裁剪、添加水印等，通过在网页上嵌入 Aviary SDK 实现图片的快速处理。 Aviary 需要用户注册并获取 API key 才能正常使用，但是它提供了一份详细的文档和示例代码，便于开发者快速了解如何使用 Aviary SDK。

<script type="text/javascript" src="http://feather.aviary.com/imaging/v3/editor.js"></script><script type="text/javascript">var featherEditor = new Aviary.Feather({
apiKey: 'API_KEY',
apiVersion: 3,
tools : 'all',
onSave: function(imageID, newURL) {
var img = document.getElementById(imageID);
img.src = newURL;
}
});
featherEditor.launch({
image: 'image_1',
url: 'https://aviary.com/img/example.jpg'
});
</script>

上面的代码使用 Aviary SDK 打开了一张测试图片，并在其中添加了 'all' 工具栏中的所有工具选项，在用户点击保存后，更新了图片的地址。 总结 以上介绍了三种常见的 Javascript 图片编辑器，它们有各自的特点和优势，可以根据实际需求选择其中一种或多种进行使用。Javascript 图片编辑器虽然并不能完全取代 Photoshop 等大型软件，但是在一些简单图片处理场景下，使用它们能够提高开发效率，让图片处理更加简单。