DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> smartcrop.js智能圖片裁剪庫
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}}的數據。 下面是一副來自它的展示網站的案例,請欣賞: Example github地址: https://github.com/jwagner/smartcrop.js
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved