Javascript 圖片編輯器：讓圖片處理更簡單 Web 開發(fā)中，我們經(jīng)常需要對圖片進行一些處理，比如縮放、剪裁、旋轉(zhuǎn)、添加水印等等。常見的圖片編輯軟件如 Photoshop 功能強大，但是需要大量時間來學習和操作，對于一些簡單的圖片處理需求，用這些大型軟件顯得有些浪費時間。因此在網(wǎng)頁上使用輕量級的 Javascript 圖片編輯器是一種不錯的選擇。 Javascript 圖片編輯器優(yōu)點： 1. 無需編譯：使用前端編程語言實現(xiàn)，不需要額外的工具鏈支持，編寫便捷； 2. 輕量級：只需要幾 kb 的代碼，便可快速引入到網(wǎng)站中使用； 3. 利用了瀏覽器的圖形處理能力； 4. 具有良好的可擴展性。 下面介紹幾個比較成熟的 Javascript 圖片編輯器： 1. Cropper.js Cropper.js 是一個用于移動設備的圖片裁剪類庫，支持多點觸控、移動、縮放和旋轉(zhuǎn)等功能。它的優(yōu)勢在于兼容各種手機瀏覽器和操作系統(tǒng)，而且 Cropper.js 代碼小巧，不到 10K。 Cropper.js 的使用非常簡單，只需要調(diào)用 Cropper() 函數(shù)并傳入圖片路徑，就可以在瀏覽器中展示圖片，并調(diào)整圖片的位置、縮放和裁剪區(qū)域。例如：

<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 指定裁剪區(qū)域的寬高比，crop 事件監(jiān)聽用戶操作的裁剪信息，包括 x、y 軸位置、寬高、旋轉(zhuǎn)角度和 X、Y 軸的縮放比例。 另外，Cropper.js 還支持跨域圖片裁剪，可以使用跨域圖片 URL 或 Blob 對象來實現(xiàn)。 2. CamanJS CamanJS 是一個基于 HTML5 Canvas 和 Javascript 的圖像處理庫，支持濾鏡、調(diào)整色調(diào)、剪裁、旋轉(zhuǎn)、縮放等操作，可以通過鏈式調(diào)用的方式實現(xiàn)多個操作的組合效果。 CamanJS 的語法類似 jQuery，通過一個 $() 函數(shù)選中指定的圖片元素，實現(xiàn)圖片及其組件的操作。例如：

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

上面的代碼實現(xiàn)了圖片的亮度調(diào)整和對比度調(diào)整，其中 this 指代選中的圖片，brightness() 和 contrast() 方法分別實現(xiàn)了亮度和對比度的調(diào)整，render() 方法將操作后的圖片渲染在 Canvas 中。 3. Aviary Aviary 是一款功能強大的云端圖片處理工具，提供了豐富的圖片處理功能，包括修復、涂鴉、調(diào)整對比度、裁剪、添加水印等，通過在網(wǎng)頁上嵌入 Aviary SDK 實現(xiàn)圖片的快速處理。 Aviary 需要用戶注冊并獲取 API key 才能正常使用，但是它提供了一份詳細的文檔和示例代碼，便于開發(fā)者快速了解如何使用 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 圖片編輯器，它們有各自的特點和優(yōu)勢，可以根據(jù)實際需求選擇其中一種或多種進行使用。Javascript 圖片編輯器雖然并不能完全取代 Photoshop 等大型軟件，但是在一些簡單圖片處理場景下，使用它們能夠提高開發(fā)效率，讓圖片處理更加簡單。