使用ImageMagick進(jìn)行圖片縮放、合成與裁剪(js+python)
更新時(shí)間:2013年09月16日 11:13:22 作者:
由于需要在服務(wù)器端處理,使用就研究使用imagemagick來進(jìn)行。同時(shí)準(zhǔn)備封裝了一個(gè)Node.js和Python的方法,主要還是講一下然后使用imagemagick來對圖片進(jìn)行縮放、合成后進(jìn)行裁剪吧
最近的項(xiàng)目里面需要對書籍的封面進(jìn)行處理,就是加一條陰影線形成書脊的凹凸感,然后將書脊切出,分成兩部分,以便客戶端實(shí)現(xiàn)打開動畫。由于需要在服務(wù)器端處理,使用就研究使用imagemagick來進(jìn)行。同時(shí)準(zhǔn)備封裝了一個(gè)Node.js和Python的方法,主要還是講一下然后使用imagemagick來對圖片進(jìn)行縮放、合成后進(jìn)行裁剪吧。
首先素材文件如下(左邊未處理封面,右邊為需要合成上去的陰影):
首先對封面圖片file.png進(jìn)行縮放,縮放到高度為1024,生成newfile.png方便與陰影圖片合成,命令如下:
convert進(jìn)行縮放的方法如下:
convert -resize 1024 file.jpg newfile.jpg
得到圖片寬為1024,高根據(jù)原始圖片比例計(jì)算而來
convert -resize x768 file.jpg newfile.jpg
得到的圖片高位768,寬根據(jù)原始圖片比例計(jì)算而來
convert -resize 1024×768! file.jpg newfile.jpg
固定寬高縮放,不考慮原是圖寬高的比例,把圖片縮放到指定大小。
convert -resize “1024×768>” file.jpg newfile.jpg
只有當(dāng)src.jpg的寬大于1024或高大于768時(shí)候,才進(jìn)行縮小處理,否則生成newfile.jpg和file.jpg具有一樣的尺寸。
convert -resize “1024×768<” file.jpg newfile.jpg
只有當(dāng)src.jpg的寬小于1024或高小于768時(shí)候,才進(jìn)行放大處理,否則生成newfile.jpg和file.jpg具有一樣的尺寸。
接下來就是將陰影文件合成到封面上(將yy.png從左上角合成到file.png生成newfile.png):
這里主要解釋一下-gravity參數(shù):
-gravity northwest指右上角
如果要求在正中間,參數(shù)為center
如果要求在右下角,參數(shù)為southeast
其他按照方位進(jìn)行
合成后效果如下:
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是目標(biāo)圖片的尺寸,+x+y是原始圖片的坐標(biāo)點(diǎn),這兩組值至少要出現(xiàn)一組,也可以同時(shí)存在。另外該命令也可使用gravity來重新定義坐標(biāo)系統(tǒng)。
最后成果如下:
首先素材文件如下(左邊未處理封面,右邊為需要合成上去的陰影):
首先對封面圖片file.png進(jìn)行縮放,縮放到高度為1024,生成newfile.png方便與陰影圖片合成,命令如下:
復(fù)制代碼 代碼如下:
convert -resize x1024 file.png newfile.png
convert進(jìn)行縮放的方法如下:
convert -resize 1024 file.jpg newfile.jpg
得到圖片寬為1024,高根據(jù)原始圖片比例計(jì)算而來
convert -resize x768 file.jpg newfile.jpg
得到的圖片高位768,寬根據(jù)原始圖片比例計(jì)算而來
convert -resize 1024×768! file.jpg newfile.jpg
固定寬高縮放,不考慮原是圖寬高的比例,把圖片縮放到指定大小。
convert -resize “1024×768>” file.jpg newfile.jpg
只有當(dāng)src.jpg的寬大于1024或高大于768時(shí)候,才進(jìn)行縮小處理,否則生成newfile.jpg和file.jpg具有一樣的尺寸。
convert -resize “1024×768<” file.jpg newfile.jpg
只有當(dāng)src.jpg的寬小于1024或高小于768時(shí)候,才進(jìn)行放大處理,否則生成newfile.jpg和file.jpg具有一樣的尺寸。
接下來就是將陰影文件合成到封面上(將yy.png從左上角合成到file.png生成newfile.png):
復(fù)制代碼 代碼如下:
composite -gravity northwest yy.png file.png newfile.png
這里主要解釋一下-gravity參數(shù):
-gravity northwest指右上角
如果要求在正中間,參數(shù)為center
如果要求在右下角,參數(shù)為southeast
其他按照方位進(jìn)行
合成后效果如下:
復(fù)制代碼 代碼如下:
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是目標(biāo)圖片的尺寸,+x+y是原始圖片的坐標(biāo)點(diǎn),這兩組值至少要出現(xiàn)一組,也可以同時(shí)存在。另外該命令也可使用gravity來重新定義坐標(biāo)系統(tǒng)。
最后成果如下:
您可能感興趣的文章:
- 基于原生JS實(shí)現(xiàn)圖片裁剪
- js+jquery實(shí)現(xiàn)圖片裁剪功能
- php+js實(shí)現(xiàn)圖片的上傳、裁剪、預(yù)覽、提交示例
- 基于HTML5+JS實(shí)現(xiàn)本地圖片裁剪并上傳功能
- Cropper.js 實(shí)現(xiàn)裁剪圖片并上傳(PC端)
- 使用JavaScript+canvas實(shí)現(xiàn)圖片裁剪
- vue-cli結(jié)合Element-ui基于cropper.js封裝vue實(shí)現(xiàn)圖片裁剪組件功能
- Nodejs下使用gm圓形裁剪并合成圖片的示例
- cropper js基于vue的圖片裁剪上傳功能的實(shí)現(xiàn)代碼
- cropperjs實(shí)現(xiàn)裁剪圖片功能
相關(guān)文章
JS實(shí)現(xiàn)CheckBox復(fù)選框全選、不選或全不選功能
CheckBox控件就是我們一般所說的復(fù)選框,通常用于某選項(xiàng)的打開或關(guān)閉,如一次性處理多個(gè)產(chǎn)品,或?qū)ξ恼碌膭h除、產(chǎn)品的下架等處理,一條一條的點(diǎn)顯然有一些麻煩,如果能每一行放一個(gè)checkbox,然后統(tǒng)一處理就好辦的多了,需要的朋友可以參考下2016-02-02canvas實(shí)現(xiàn)環(huán)形進(jìn)度條效果
本文主要介紹了canvas實(shí)現(xiàn)環(huán)形進(jìn)度條效果的實(shí)例。具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-03-03無語,javascript居然支持中文(unicode)編程!
無語,javascript居然支持中文(unicode)編程!...2007-04-04JS實(shí)現(xiàn)自定義簡單網(wǎng)頁軟鍵盤效果代碼
這篇文章主要介紹了JS實(shí)現(xiàn)自定義簡單網(wǎng)頁軟鍵盤效果代碼,可實(shí)現(xiàn)簡單模擬鍵盤布局及響應(yīng)鼠標(biāo)點(diǎn)擊按下鍵盤按鍵功能,簡單實(shí)用,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-11-11javascript 設(shè)為首頁與加入收藏兼容多瀏覽器代碼
javascript 設(shè)為首頁與加入收藏兼容多瀏覽器代碼,不過由于ie7的特殊性,設(shè)為首頁不能使用,不過其它基于ie內(nèi)核的瀏覽器都是支持的。2011-01-01JavaScript函數(shù)節(jié)流和函數(shù)防抖之間的區(qū)別
本文主要介紹了JavaScript函數(shù)節(jié)流和函數(shù)防抖之間的區(qū)別。具有很好的參考價(jià)值,下面跟著小編一起來看下吧2017-02-02js實(shí)現(xiàn)一個(gè)鏈接打開兩個(gè)鏈接地址的方法
這篇文章主要介紹了js實(shí)現(xiàn)一個(gè)鏈接打開兩個(gè)鏈接地址的方法,可實(shí)現(xiàn)連續(xù)打開兩個(gè)鏈接的功能,非常簡單實(shí)用的技巧,需要的朋友可以參考下2015-05-05微信小程序開發(fā)之錄音機(jī) 音頻播放 動畫實(shí)例 (真機(jī)可用)
這篇文章主要介紹了微信小程序開發(fā)之錄音機(jī) 音頻播放 動畫實(shí)例 (真機(jī)可用),這里整理了詳細(xì)的代碼,有需要的小伙伴可以參考下。2016-12-12