使用ImageMagick進行圖片縮放、合成與裁剪(js python)_javascript技巧

最近的專案裡面需要對書籍的封面進行處理，就是加一條陰影線形成書脊的凹凸感，然後將書脊切出，分成兩部分，以便客戶端實現打開動畫。由於需要在伺服器端處理，使用就研究使用imagemagick來進行。同時準備封裝了一個Node.js和Python的方法，主要還是講一下然後使用imagemagick來對圖片進行縮放、合成後進行裁剪吧。

首先素材檔案如下（左邊未處理封面，右邊為需要合成上去的陰影）：

安裝ImageMagick的流程就不講了，可以參考官網的安裝方法：http://www.imagemagick.org/script/install-source.php

先將封面圖片file.png進行縮放，縮放到高度為1024，產生newfile.png方便與陰影圖片合成，指令如下：

複製程式碼 程式碼如下:

convert -resize x1024 file.png newfile.png

convert進行縮放的方法如下：

convert -resize 1024 file.jpg newfile.jpg
得到圖片寬為1024，高依原始圖片比例計算而來

convert -resize x768 file.jpg newfile.jpg
得到的圖片高位768，寬依原始圖片比例計算而來

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只有當src.jpg的寬小於1024或高小於768時候，才進行放大處理，否則生成newfile.jpg和file.jpg有相同的尺寸。

接下來就是將陰影檔案合成到封面上（將yy.png從左上角合成到file.png產生newfile.png）：

複製程式碼 程式碼如下:

composite -gravity northwest yy.png file.png newfile.png

這裡主要解釋一下gravity參數：

-gravity northwest指右上角
如果要求在正中間，參數為center
如果要求在右下角，參數為southeast
其他依照方位進行

合成後效果如下：

最後就是圖片的裁剪，將圖片分為兩部分，陰影部分left.png和其他部分right.png：

複製程式碼 程式碼如下:

left：convert file.png -gravity southwest -crop 31x1024 0 0 left.prightng

裁切方法的調整如下：

convert file.png -crop widthxheight是目標圖片的尺寸， x y是原始圖片的座標點，這兩組值至少要出現一組，也可以同時存在。另外該指令也可使用gravity來重新定義座標系統。

最後成果如下：