node实现封装一个图片拼接插件

更新时间：2022年08月02日 09:50:20 作者：JYeontu

这篇文章主要介绍了node实现封装一个图片拼接插件，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的朋友可以参考一下

前言

平时我们拼接图片的时候一般都要通过ps或者其他图片处理工具来进行处理合成，这次有个需求就需要进行图片拼接，而且我希望是可以直接使用代码进行拼接，于是就有了这么一个工具包。

插件效果

通过该插件，我们可以将图片进行以下操作：

1、横向拼接两张图片

如下，我们有这么两张图片，现在我们可以通过该工具将它们拼接成一张

代码：

const consoleInput = require('@jyeontu/img-concat');
const ImgConcatClass = new ImgConcat();
const p1 = {
    left:'.\\img\\n1.jpg',
    right:'.\\img\\n2.jpg',
    target:'.\\longImg'
}
// 横向拼接两张图片
ImgConcatClass.collapseHorizontal(p1).then(res=>{
    console.log(`拼接完成,图片路径为${res}`);
});

效果;

2、纵向拼接两张图片

仍是上面的两张图片，我们将其进行纵向拼接

代码:

const consoleInput = require('@jyeontu/img-concat');
const ImgConcatClass = new ImgConcat();
const p1 = {
    left:'.\\img\\n1.jpg',
    right:'.\\img\\n2.jpg',
    target:'.\\longImg'
}
//纵向拼接两张图片
ImgConcatClass.collapseVertical(p1).then(res=>{
    console.log(`拼接完成,图片路径为${res}`);
});

效果:

3、批量拼接

我们也可以直接将某一目录中的所有图片进行批量拼接成长图，如下图，我们现在要对该目录下的所有图片进行拼接：

3.1 横向拼接长图

代码:

const consoleInput = require('@jyeontu/img-concat');
const ImgConcatClass = new ImgConcat();
const p = {
    folderPath:'.\\img',        //资源目录
    targetFolder:'.\\longImg',  //转换后图片存放目录
    direction:'y'               //拼接方向，y为横向，n为纵向
}
// 拼接目录下的所有图片
ImgConcatClass.concatAll(p).then(res=>{
    console.log(`拼接完成,图片路径为${res}`);
})

效果:

3.2 纵向拼接长图

代码:

const consoleInput = require('@jyeontu/img-concat');
const ImgConcatClass = new ImgConcat();
const p = {
    folderPath:'.\\img',        //资源目录
    targetFolder:'.\\longImg',  //转换后图片存放目录
    direction:'n'               //拼接方向，y为横向，n为纵向
}
// 拼接目录下的所有图片
ImgConcatClass.concatAll(p).then(res=>{
    console.log(`拼接完成,图片路径为${res}`);
})

效果:

4、自定义拼接矩阵

我们也可以自己定义图片拼接矩阵，shape为二维数组，定义各个位置的图片，具体如下：

代码:

const consoleInput = require('@jyeontu/img-concat');
const ImgConcatClass = new ImgConcat();
const p = {
    shape:[['.\\img\\n1.jpg','.\\img\\white.jpg','.\\img\\n2.jpg'],
            ['.\\img\\white.jpg','.\\img\\n3.jpg','.\\img\\white.jpg'],
            ['.\\img\\n4.jpg','.\\img\\white.jpg','.\\img\\n5.jpg']
        ],
    target:'.\\longImg'
};
//自定义矩阵拼接图片
ImgConcatClass.conCatByMaxit(p).then(res=>{
    console.log(`拼接完成,图片路径为${res}`);
});

效果:

插件实现

1、单张图片拼接

使用GraphicsMagick进行图片拼接

const gm = require('gm');
collapse (left,right,target,flag = true) { 
    return new Promise((r) => {
      gm(left).append(right,flag).write(target, err => {
            if(err) console.log(err);
            r();
      })
    })
}

2、量拼接

使用sharp.js获取图片信息，调整图片分辨率大小
使用fs获取文件列表
使用path拼接文件路径
使用 @jyeontu/progress-bar打印进度条

const gm = require('gm');
const fs = require('fs');
const path = require('path');
const progressBar = require('@jyeontu/progress-bar');
const {getFileSuffix,getMetadata,resizeImage} = require('./util');

doConcatAll = async(folderPath,targetFolder,direction) => { 
    let fileList = fs.readdirSync(folderPath);
    fileList.sort((a, b) => {
      return path.basename(a) - path.basename(b);
    });
    const extensionName = getFileSuffix(fileList[0], ".");
    let targetFilePath = path.join(targetFolder, new Date().getTime() + '.' + extensionName);
    const barConfig = {
      duration: fileList.length - 1,
      current: 0,
      block:'█',
      showNumber:true,
      tip:{
          0: '拼接中……',
          100:'拼接完成'
      },
      color:'green'
    };
    let progressBarC = new progressBar(barConfig);
    const imgInfo = await this.getImgInfo(path.join(folderPath, fileList[0]));
    for (let index = 1; index < fileList.length; index++) {
      let leftFile = path.join(folderPath, fileList[index - 1]);
      let rightFile = path.join(folderPath, fileList[index]);
      const leftPath = await this.resizeImage({
        path:leftFile,
        width:imgInfo.width,
        height:imgInfo.height
      });
      const rightPath = await this.resizeImage({
        path:rightFile,
        width:imgInfo.width,
        height:imgInfo.height
      });
      progressBarC.run(index);
      await this.collapse(index == 1 ? leftPath : targetFilePath,rightPath,targetFilePath,direction);
      fs.unlinkSync(leftPath);
      fs.unlinkSync(rightPath);
    }
    console.log('');
    return targetFilePath;
  }

3、自定义矩阵拼接

const gm = require('gm');
const fs = require('fs');
const path = require('path');
const progressBar = require('@jyeontu/progress-bar');
const {getFileSuffix,getMetadata,resizeImage} = require('./util');
async conCatByMaxit(res){
    const {shape} = res;
    const tmpList = [];
    const barConfig = {
      duration: shape[0].length * shape.length,
      current: 0,
      block:'█',
      showNumber:true,
      tip:{
          0: '拼接中……',
          100:'拼接完成'
      },
      color:'green'
    };
    const progressBarC = new progressBar(barConfig);
    let target = '';
    let extensionName = getFileSuffix(shape[0][0], ".");
    const imgInfo = await this.getImgInfo(shape[0][0]);
    for(let i = 0; i < shape.length; i++){
      target = res.target + '\\' + `targetImg${i}.${extensionName}`;
      for(let j = 1; j < shape[i].length; j++){
        const leftPath = await this.resizeImage({
          path:shape[i][j - 1],
          width:imgInfo.width,
          height:imgInfo.height
        });
        const rightPath = await resizeImage({
          path:shape[i][j],
          width:imgInfo.width,
          height:imgInfo.height
        });
        tmpList.push(leftPath,rightPath,target);
        progressBarC.run(shape[i].length * i + j);
        await this.collapse(j == 1 ? leftPath : target,rightPath,target);
      }
      if( i > 0){
          await this.collapse(res.target + '\\' + `targetImg${i - 1}.${extensionName}`,target,target,false);
      }
    }
    progressBarC.run(shape[0].length * shape.length);
    const newTarget = res.target + '\\' + new Date().getTime() + `.${extensionName}`;
    fs.renameSync(target,newTarget)
    for(let i = 0; i < tmpList.length; i++){
      try{
        fs.unlinkSync(tmpList[i]);
      }catch(err){
        // console.error(err);
      }
    }
    console.log('');
    return newTarget;
}

插件使用

1、依赖引入

const consoleInput = require('@jyeontu/img-concat');
const ImgConcatClass = new ImgConcat();

2、横向拼接两张图片

2.1参数说明

left

左边图片路径

right

右边图片路径

target

合成图片保存目录

2.2示例代码

const p1 = {
    left:'.\\img\\n1.jpg',
    right:'.\\img\\n2.jpg',
    target:'.\\longImg'
}
// 横向拼接两张图片
ImgConcatClass.collapseHorizontal(p1).then(res=>{
    console.log(`拼接完成,图片路径为${res}`);
});

2、纵向拼接两张图片

3.1参数说明

left

左边图片路径

right

右边图片路径

target

合成图片保存目录

3.2示例代码

const p1 = {
    left:'.\\img\\n1.jpg',
    right:'.\\img\\n2.jpg',
    target:'.\\longImg'
}
// 纵向拼接两张图片
ImgConcatClass.collapseVertical(p1).then(res=>{
    console.log(`拼接完成,图片路径为${res}`);
});

4、批量拼接

4.1参数说明

folderPath

资源文件目

targetFolder

合并图片保存目录

direction

图片合并方向，y为横向，n为纵向

4.2示例代码

const consoleInput = require('@jyeontu/img-concat');
const ImgConcatClass = new ImgConcat();
const p = {
    folderPath:'.\\img',        //资源目录
    targetFolder:'.\\longImg',  //合并后图片存放目录
    direction:'y'               //拼接方向，y为横向，n为纵向
}
// 拼接目录下的所有图片
ImgConcatClass.concatAll(p).then(res=>{
    console.log(`拼接完成,图片路径为${res}`);
})

5、自定义拼接矩阵

5.1参数说明

shape

图片合并矩阵，传入各个位置的图片路径。

target

合并后图片的保存路径

5.2示例代码

const p = {
    shape:[['.\\img\\n1.jpg','.\\img\\white.jpg','.\\img\\n2.jpg'],
            ['.\\img\\white.jpg','.\\img\\n3.jpg','.\\img\\white.jpg'],
            ['.\\img\\n4.jpg','.\\img\\white.jpg','.\\img\\n5.jpg']
        ],
    target:'.\\longImg'
};
//自定义矩阵拼接图片
ImgConcatClass.conCatByMaxit(p).then(res=>{
    console.log(`拼接完成,图片路径为${res}`);
});

到此这篇关于node实现封装一个图片拼接插件的文章就介绍到这了,更多相关node封装插件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

node.js中watch机制详解
本文给大家带来的是一篇关于nodejs中watch机制的探讨，主要探讨内容是为什么watch不是银弹，尝试使用更好的方案来解决这个问题
2014-11-11
nodejs实现一个word文档解析器思路详解
这篇文章主要介绍了nodejs实现一个word文档解析器的思路详解，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
2018-08-08
在Ubuntu系统上安装Node.JS的教程
这篇文章主要介绍了在Ubuntu系统上安装Node.JS的教程,Node.JS的高性能V8解释器运行及异步机制为其带来了巨大的人气,需要的朋友可以参考下
2015-10-10
express中static中间件的具体使用方法
这篇文章主要介绍了express中static中间件的具体使用方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-10-10
node.js对于数据库MySQL基本操作实例总结【增删改查】
这篇文章主要介绍了node.js对于数据库MySQL基本操作,结合实例形式总结分析了node.js针对mysql数据库基本配置、连接与增删改查相关操作技巧,需要的朋友可以参考下
2023-04-04
node中使用shell脚本的方法步骤
这篇文章主要介绍了node中使用shell脚本的方法步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-03-03
详解使用vscode+es6写nodejs服务端调试配置
本篇文章主要介绍了使用vscode+es6写nodejs服务端调试配置，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-09-09
详解axios在node.js中的post使用
最近因为工作的原因在学习使用网络请求库，因为这个项目用的是Promise，所以就选择了axios，下面这篇文章主要给大家介绍了关于axios在node.js中的post使用的相关资料，文中介绍的非常详细，需要的朋友可以参考借鉴，下面来一起学习学习吧。
2017-04-04
关于Node.js中Buffer的一些你可能不知道的用法
网上关于Node.js中Buffer用法的文章有很多，但是感觉还是不够详细，所以这篇文章主要介绍了关于Node.js中Buffer的一些你可能不知道的用法，文中介绍的非常详细，需要的朋友可以参考借鉴，下面来一起看看吧。
2017-03-03
给nodejs升级的两种方法
nodejs是一种流行的服务器端JavaScript运行环境,它经常需要更新以获取最新的功能和性能优化,本文将给大家介绍了给nodejs升级的两种方法,文中通过代码示例讲解非常详细,需要的朋友可以参考下
2023-12-12