使用ImageMagick進行圖片縮放、合成與裁剪(js+python)
更新時間:2013年09月16日 11:13:22 作者:
由于需要在服務器端處理,使用就研究使用imagemagick來進行。同時準備封裝了一個Node.js和Python的方法,主要還是講一下然后使用imagemagick來對圖片進行縮放、合成后進行裁剪吧
最近的項目里面需要對書籍的封面進行處理,就是加一條陰影線形成書脊的凹凸感,然后將書脊切出,分成兩部分,以便客戶端實現(xiàn)打開動畫。由于需要在服務器端處理,使用就研究使用imagemagick來進行。同時準備封裝了一個Node.js和Python的方法,主要還是講一下然后使用imagemagick來對圖片進行縮放、合成后進行裁剪吧。
首先素材文件如下(左邊未處理封面,右邊為需要合成上去的陰影):
首先對封面圖片file.png進行縮放,縮放到高度為1024,生成newfile.png方便與陰影圖片合成,命令如下:
convert進行縮放的方法如下:
convert -resize 1024 file.jpg newfile.jpg
得到圖片寬為1024,高根據(jù)原始圖片比例計算而來
convert -resize x768 file.jpg newfile.jpg
得到的圖片高位768,寬根據(jù)原始圖片比例計算而來
convert -resize 1024×768! file.jpg newfile.jpg
固定寬高縮放,不考慮原是圖寬高的比例,把圖片縮放到指定大小。
convert -resize “1024×768>” file.jpg newfile.jpg
只有當src.jpg的寬大于1024或高大于768時候,才進行縮小處理,否則生成newfile.jpg和file.jpg具有一樣的尺寸。
convert -resize “1024×768<” file.jpg newfile.jpg
只有當src.jpg的寬小于1024或高小于768時候,才進行放大處理,否則生成newfile.jpg和file.jpg具有一樣的尺寸。
接下來就是將陰影文件合成到封面上(將yy.png從左上角合成到file.png生成newfile.png):
這里主要解釋一下-gravity參數(shù):
-gravity northwest指右上角
如果要求在正中間,參數(shù)為center
如果要求在右下角,參數(shù)為southeast
其他按照方位進行
合成后效果如下:
left:convert file.png -gravity southwest -crop 31x1024+0+0 left.png
right:convert file.png -gravity southeast -crop 737x1024+0+0 right.png
裁剪方法的調(diào)整如下:
convert file.png -crop widthxheight+x+y newfile
其中widthxheight是目標圖片的尺寸,+x+y是原始圖片的坐標點,這兩組值至少要出現(xiàn)一組,也可以同時存在。另外該命令也可使用gravity來重新定義坐標系統(tǒng)。
最后成果如下:
首先素材文件如下(左邊未處理封面,右邊為需要合成上去的陰影):

首先對封面圖片file.png進行縮放,縮放到高度為1024,生成newfile.png方便與陰影圖片合成,命令如下:
復制代碼 代碼如下:
convert -resize x1024 file.png newfile.png
convert進行縮放的方法如下:
convert -resize 1024 file.jpg newfile.jpg
得到圖片寬為1024,高根據(jù)原始圖片比例計算而來
convert -resize x768 file.jpg newfile.jpg
得到的圖片高位768,寬根據(jù)原始圖片比例計算而來
convert -resize 1024×768! file.jpg newfile.jpg
固定寬高縮放,不考慮原是圖寬高的比例,把圖片縮放到指定大小。
convert -resize “1024×768>” file.jpg newfile.jpg
只有當src.jpg的寬大于1024或高大于768時候,才進行縮小處理,否則生成newfile.jpg和file.jpg具有一樣的尺寸。
convert -resize “1024×768<” file.jpg newfile.jpg
只有當src.jpg的寬小于1024或高小于768時候,才進行放大處理,否則生成newfile.jpg和file.jpg具有一樣的尺寸。
接下來就是將陰影文件合成到封面上(將yy.png從左上角合成到file.png生成newfile.png):
復制代碼 代碼如下:
composite -gravity northwest yy.png file.png newfile.png
這里主要解釋一下-gravity參數(shù):
-gravity northwest指右上角
如果要求在正中間,參數(shù)為center
如果要求在右下角,參數(shù)為southeast
其他按照方位進行
合成后效果如下:

復制代碼 代碼如下:
left:convert file.png -gravity southwest -crop 31x1024+0+0 left.png
right:convert file.png -gravity southeast -crop 737x1024+0+0 right.png
裁剪方法的調(diào)整如下:
convert file.png -crop widthxheight+x+y newfile
其中widthxheight是目標圖片的尺寸,+x+y是原始圖片的坐標點,這兩組值至少要出現(xiàn)一組,也可以同時存在。另外該命令也可使用gravity來重新定義坐標系統(tǒng)。
最后成果如下:

您可能感興趣的文章:
- 基于原生JS實現(xiàn)圖片裁剪
- js+jquery實現(xiàn)圖片裁剪功能
- php+js實現(xiàn)圖片的上傳、裁剪、預覽、提交示例
- 基于HTML5+JS實現(xiàn)本地圖片裁剪并上傳功能
- Cropper.js 實現(xiàn)裁剪圖片并上傳(PC端)
- 使用JavaScript+canvas實現(xiàn)圖片裁剪
- vue-cli結(jié)合Element-ui基于cropper.js封裝vue實現(xiàn)圖片裁剪組件功能
- Nodejs下使用gm圓形裁剪并合成圖片的示例
- cropper js基于vue的圖片裁剪上傳功能的實現(xiàn)代碼
- cropperjs實現(xiàn)裁剪圖片功能
相關(guān)文章
常用Javascript函數(shù)與原型功能收藏(必看篇)
下面小編就為大家?guī)硪黄S肑avascript函數(shù)與原型功能收藏(必看篇)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
JavaScript實現(xiàn)郵箱后綴提示功能的示例代碼
這篇文章主要介紹了JavaScript實現(xiàn)郵箱后綴提示功能的示例代碼,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2018-12-12
JS實現(xiàn)瀏覽器狀態(tài)欄文字從右向左彈出效果代碼
這篇文章主要介紹了JS實現(xiàn)瀏覽器狀態(tài)欄文字從右向左彈出效果,涉及JavaScript結(jié)合時間函數(shù)遍歷字符串及動態(tài)改變狀態(tài)欄顯示效果的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-10-10
微信小程序?qū)崿F(xiàn)點擊按鈕修改文字大小功能【附demo源碼下載】
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)點擊按鈕修改文字大小功能,涉及微信小程序事件綁定及setData動態(tài)修改Page頁面data數(shù)據(jù),進而控制頁面元素屬性動態(tài)改變的相關(guān)操作技巧,需要的朋友可以參考下2017-12-12
JavaScript面試Module?Federation實現(xiàn)原理詳解
這篇文章主要為大家介紹了JavaScript面試Module?Federation實現(xiàn)原理詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-10-10

