smartcrop.js智能圖片裁剪庫

今天將為大家介紹一款近期github上很不錯的開源庫 – smartcrop.js。它是一款圖片處理的智能裁剪庫。在很多項目開發中，經常會遇見上傳圖片的場景，它可能是用戶照片信息，也可能是商品圖片等。然而在網頁布局中，為了更好的用戶體驗，它們往往都需要一些寬度和高度的限制。對於不合適的圖片，常常需要為用戶提供一種裁剪方式，以此來滿足網站更好的用戶體驗。但是圖片默認的裁剪區域往往被顯示在一個固定的位置，而這個位置卻往往又不是精准的用戶裁剪位置。因此今天為大家介紹的這一款開源庫，就是為了解決這類問題，並為用戶提供更好的用戶體驗的。

首先我們可以使用npm install smartcrop或者bower install smartcrop來下載它。然后像如下方式使用它：

SmartCrop.crop(image, {
        width: 100,
        height: 100
    }, 
    function(result){
        console.log(result); // {topCrop: {x: 300, y: 200, height: 200, width: 200}}
    });

它會輸出一個比較好的最佳圖片裁剪位置，如{topCrop: {x: 300, y: 200, height: 200, width: 200}}的數據。

下面是一副來自它的展示網站的案例，請欣賞：

更多案例：

1. http://29a.ch/sandbox/2014/smartcrop/examples/testsuite.html：這里擁有超過1000個圖片效果的展示（流量用戶請謹慎點擊，圖片眾多）；
2. http://29a.ch/sandbox/2014/smartcrop/examples/testbed.html：這里允許上傳本地的圖片，並體驗其效果；
3. http://29a.ch/sandbox/2014/smartcrop/examples/slideshow.html：在這里可以嘗試用它創建幻燈片。

最后，更多關於smartcrop.js的信息，請參見其github：https://github.com/jwagner/smartcrop.js。