Node中的圖片處理
圖片處理需要安裝一個(gè)軟件 http://wwww.GraphicsMagick.org 這個(gè)軟件gm.exe本身不具備什么功能，但是它卻提供了系統(tǒng)底層操作圖片的接口，可以通過命令的模式來(lái)操作圖片。
下載地址：https://nchc.dl.sourceforge.net/project/graphicsmagick/graphicsmagick-binaries/1.3.35/GraphicsMagick-1.3.35-Q16-win64-dll.exe安裝完畢后需要將 “C:\Program Files\GraphicsMagick-1.3.35-Q16” 路徑添加到系統(tǒng)path中，方便隨時(shí)調(diào)用
在項(xiàng)目中安裝gm包
npm install gm
- 操作參考以下代碼：
const fs = require('fs')
const gm = require('gm')
var input = './public/images/1.JPG'
var ouput = './public/images/2.JPG'
gm(input)
//寬、高、x、y
.crop(165, 83, 4025, 1925)
.write(ouput, function (err) {
if (!err) console.log('success');
})
參考資料
gm命令文檔 http://aheckmann.github.io/gm/docs.html
gm包參考文檔 https://www.npmjs.com/package/gm實(shí)現(xiàn)思路：
- 前端參考jcrop代碼案例，下載地址： https://codeload.github.com/tapmodo/Jcrop/zip/v0.9.15
- 通過jcrop獲取圖片裁剪的4個(gè)值 ，jquery獲取選中層的div即可
- 通過Jquery ajax異步傳遞到后臺(tái)
- 通過nodejs調(diào)用gm接口庫(kù)，實(shí)現(xiàn)對(duì)原始圖片裁剪與保存
- 實(shí)現(xiàn)效果
原圖
截取
