首頁 > web前端 > js教程 > 了解JavaScript智能切圖腳本

了解JavaScript智能切圖腳本

coldplay.xixi
發布: 2020-06-17 16:05:39
轉載
1898 人瀏覽過

了解JavaScript智能切圖腳本

圖片可以讓頁面更有吸引力,尤其是處理的恰當的時候,但問題是,圖片的處理是個麻煩事情,它的創建和裁剪對於一個普通人來說是個困難的任務,尤其是那些自己上傳圖片的用戶,例如頭像圖片,logo圖片,有可能是各式各樣的圖片格式,大小不一的圖片尺寸。

最近發現了一個有趣的瀏覽器端智慧處理圖片的JavaScript腳本,smartcrop.js,它能智慧的分析圖片的內容,辨識出圖片的主體內容和人像、人臉,我可以用它輕鬆的將一個圖片裁剪成合適大小,讓人物、人臉或圖像主體等最重要的部分突出,裁剪掉多餘的部分。

下面是一個樣本,使用了兩張Lady GaGa的照片,經過使用smartcrop.js處理後,使得兩張圖片非常適合做頭像照片,圖片中的頭像放到了正中。


########這個js工具腳本的呼叫方法十分的簡單,只需要幾行程式碼就能生效。 ###
SmartCrop.crop(image, {width: 100, height: 100}, function(result){console.log(result);});
// {topCrop: {x: 300, y: 200, height: 200, width: 200}}
登入後複製
###詳細的介紹請查看它的官方文檔,也可以下載它的源代碼來理解它的工作原理。 ######推薦教學:《###javascript基礎教學###》######

以上是了解JavaScript智能切圖腳本的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:webhek.com
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板