nodejs 图片处理模块 rotate_nodejs 图片处理工具 gm 的使用!

环境要求

1. 安装 GraphicsMagick

    下载地址:

    http://www.graphicsmagick.org/

ebc818c8c7a264404c49b16599363a6d.png

2. 安装 ImageMagic

    下载地址:

    https://imagemagick.org/index.php

b1428fda99d024429c3abfdd6e386dad.png

3. 安装 gm

直接命令行安装: npm install --save gm

环境变量配置

    GraphicsMagick 和 ImageMagic 安装完以后,需要把对应执行文件所在目录添加到环境变量,如下图所示。

c91ab09d96d3159d06594be0118f2170.png

dd82e8c25f71600b7acfe4937bb417d1.png

实现切割逻辑

    读取大图对应的数据文件(我这里用到的是 json 文件,其他格式的,可以根据实际格式修改对应逻辑),获取大图的,根据数据信息,读取对应位置和大小的图片,保存到本地即可,裁剪图片主要用下面的方法进行实现。

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

下图是实现时选择的大图对应 atlas 数据文件,格式化后的样式。

8665a84ad4e693e81be4d5eeb257f253.png

上图可以看出来,取出 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);                }            }        );    }});

上图是按照自己方便获取图片的格式进行的实现,可以根据自己的需要,进行逻辑修改即可,还可以添加批量处理。

63ba49baf206048e60e613bdb7f7b0bf.png

上图是裁剪前的大图,下图是裁剪后成张的碎图。

87a13426c0860eeaf06fb61fe0a1070d.png

扫码关注,获取更多分享!!

aa46985346e968948326afe189307aa5.png

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值