今天將為大家介紹一款近期github上很不錯(cuò)的開源庫 – smartcrop.js。它是一款圖片處理的智能裁剪庫。在很多項(xiàng)目開發(fā)中，經(jīng)常會(huì)遇見上傳圖片的場(chǎng)景，它可能是用戶照片信息，也可能是商品圖片等。然而在網(wǎng)頁布局中，為了更好的用戶體驗(yàn)，它們往往都需要一些寬度和高度的限制。對(duì)于不合適的圖片，常常需要為用戶提供一種裁剪方式，以此來滿足網(wǎng)站更好的用戶體驗(yàn)。但是圖片默認(rèn)的裁剪區(qū)域往往被顯示在一個(gè)固定的位置，而這個(gè)位置卻往往又不是精準(zhǔn)的用戶裁剪位置。因此今天為大家介紹的這一款開源庫，就是為了解決這類問題，并為用戶提供更好的用戶體驗(yàn)的。

首先我們可以使用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}}});

它會(huì)輸出一個(gè)比較好的最佳圖片裁剪位置，如{topCrop: {x: 300, y: 200, height: 200, width: 200}}的數(shù)據(jù)。

下面是一副來自它的展示網(wǎng)站的案例，請(qǐng)欣賞：

更多案例：

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

?

?

最后，經(jīng)過我測(cè)試，感覺也并不是太智能，如果截取區(qū)域可以讓用戶編輯的功能那就完美，更多關(guān)于smartcrop.js的信息，請(qǐng)參見其github：https://github.com/jwagner/smartcrop.js。

轉(zhuǎn)載于:https://www.cnblogs.com/ericHTML5/p/4910278.html

總結(jié)

以上是生活随笔為你收集整理的smartcrop.js智能图片裁剪库的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。