smartcrop.js智慧圖片裁剪庫_javascript技巧

smartcrop.js 是個裁圖不會裁掉人臉的 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}}的資料。

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

github網址： https://github.com/jwagner/smartcrop.js