nodejs 圖片處理工具 gm 的使用！

環境要求

1. 安裝 GraphicsMagick

    下載地址：

    http://www.graphicsmagick.org/

2. 安裝 ImageMagic

    下載地址：

    https://imagemagick.org/index.php

3. 安裝 gm

直接命令行安裝： npm install --save gm

環境變量配置

    GraphicsMagick 和 ImageMagic 安裝完之後，須要把對應執行文件所在目錄添加到環境變量，以下圖所示。

實現切割邏輯

    讀取大圖對應的數據文件（我這裏用到的是 json 文件，其餘格式的，能夠根據實際格式修改對應邏輯），獲取大圖的，根據數據信息，讀取對應位置和大小的圖片，保存到本地便可，裁剪圖片主要用下面的方法進行實現。

gm('png圖片路徑') .crop(width, height, x, y) .write(`碎圖保存路徑`, err => { if(err != null){ console.log(err); } });

下圖是實現時選擇的大圖對應 atlas 數據文件，格式化後的樣式。

上圖能夠看出來，取出 frames 內的全部圖片信息，就能夠在大圖內裁剪每張圖片了，圖片的名字同時也能獲取獲得。

具體實現代碼以下：

var gm = require('gm');var fs = require('fs');const { createCipher } = require('crypto');
var atlasname = '';var pngname = '';var filepath = '';
process.stdout.write('please enter filename:\n');process.stdin.on('data', e => { let str = e.toString(); str = str.substring(0, str.indexOf('\r')); filepath = `./pic/${str}`; atlasname = `${filepath}.atlas`; pngname = `${filepath}.png`;
 fs.mkdirSync(filepath); let data = fs.readFileSync(atlasname); let json = JSON.parse(data.toString());
 for(var key in json.frames){ console.log(`${key}`); var frame = json.frames[key].frame; gm(pngname) .crop(frame.w, frame.h, frame.x, frame.y) .write(`./${filepath}/${key}`, err => { if(err != null){ console.log(err); } } ); }});

上圖是按照本身方便獲取圖片的格式進行的實現，能夠根據本身的須要，進行邏輯修改便可，還能夠添加批量處理。

上圖是裁剪前的大圖，下圖是裁剪後成張的碎圖。

掃碼關注，獲取更多分享！！

本文分享自微信公衆號 - 一枚小工（caizj_cn）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。