首页-教程-Web前端

聊聊怎么使用node.js实现一个图片拼接插件

 2820

怎么使用node实现一个图片拼接插件？下面本篇文章给大家介绍一下使用node封装一个图片拼接插件的方法，希望对大家有所帮助！


聊聊怎么使用node.js实现一个图片拼接插件


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

插件效果

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

1、横向拼接两张图片

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


聊聊怎么使用node.js实现一个图片拼接插件

n1.jpg


聊聊怎么使用node.js实现一个图片拼接插件

n2.jpg


代码

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

效果


聊聊怎么使用node.js实现一个图片拼接插件


2、纵向拼接两张图片

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

代码

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

效果


聊聊怎么使用node.js实现一个图片拼接插件


3、批量拼接

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


聊聊怎么使用node.js实现一个图片拼接插件

3.1 横向拼接长图

代码

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

效果

聊聊怎么使用node.js实现一个图片拼接插件

3.2 纵向拼接长图

代码

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

效果


聊聊怎么使用node.js实现一个图片拼接插件

4、自定义拼接矩阵

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

代码

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

效果


聊聊怎么使用node.js实现一个图片拼接插件


插件实现

单张图片拼接

使用GraphicsMagick进行图片拼接

  1. const gm = require('gm');
  2. collapse (left,right,target,flag = true) { 
  3.     return new Promise((r) => {
  4.       gm(left).append(right,flag).write(target, err => {
  5.             if(err) console.log(err);
  6.             r();
  7.       })
  8.     })
  9. }


批量拼接

使用sharp.js获取图片信息，调整图片分辨率大小

使用fs获取文件列表

使用path拼接文件路径

使用 @jyeontu/progress-bar打印进度条

  1. const gm = require('gm');
  2. const fs = require('fs');
  3. const path = require('path');
  4. const progressBar = require('@jyeontu/progress-bar');
  5. const {getFileSuffix,getMetadata,resizeImage} = require('./util');
  6.  
  7. doConcatAll = async(folderPath,targetFolder,direction) => { 
  8.     let fileList = fs.readdirSync(folderPath);
  9.     fileList.sort((a, b) => {
  10.       return path.basename(a) - path.basename(b);
  11.     });
  12.     const extensionName = getFileSuffix(fileList[0], ".");
  13.     let targetFilePath = path.join(targetFolder, new Date().getTime() + '.' + extensionName);
  14.     const barConfig = {
  15.       duration: fileList.length - 1,
  16.       current: 0,
  17.       block:'█',
  18.       showNumber:true,
  19.       tip:{
  20.           0: '拼接中……',
  21.           100:'拼接完成'
  22.       },
  23.       color:'green'
  24.     };
  25.     let progressBarC = new progressBar(barConfig);
  26.     const imgInfo = await this.getImgInfo(path.join(folderPath, fileList[0]));
  27.     for (let index = 1; index < fileList.length; index++) {
  28.       let leftFile = path.join(folderPath, fileList[index - 1]);
  29.       let rightFile = path.join(folderPath, fileList[index]);
  30.       const leftPath = await this.resizeImage({
  31.         path:leftFile,
  32.         width:imgInfo.width,
  33.         height:imgInfo.height
  34.       });
  35.       const rightPath = await this.resizeImage({
  36.         path:rightFile,
  37.         width:imgInfo.width,
  38.         height:imgInfo.height
  39.       });
  40.       progressBarC.run(index);
  41.       await this.collapse(index == 1 ? leftPath : targetFilePath,rightPath,targetFilePath,direction);
  42.       fs.unlinkSync(leftPath);
  43.       fs.unlinkSync(rightPath);
  44.     }
  45.     console.log('');
  46.     return targetFilePath;
  47.   }


自定义矩阵拼接

  1. const gm = require('gm');
  2. const fs = require('fs');
  3. const path = require('path');
  4. const progressBar = require('@jyeontu/progress-bar');
  5. const {getFileSuffix,getMetadata,resizeImage} = require('./util');
  6. async conCatByMaxit(res){
  7.     const {shape} = res;
  8.     const tmpList = [];
  9.     const barConfig = {
  10.       duration: shape[0].length * shape.length,
  11.       current: 0,
  12.       block:'█',
  13.       showNumber:true,
  14.       tip:{
  15.           0: '拼接中……',
  16.           100:'拼接完成'
  17.       },
  18.       color:'green'
  19.     };
  20.     const progressBarC = new progressBar(barConfig);
  21.     let target = '';
  22.     let extensionName = getFileSuffix(shape[0][0], ".");
  23.     const imgInfo = await this.getImgInfo(shape[0][0]);
  24.     for(let i = 0; i < shape.length; i++){
  25.       target = res.target + '\\' + `targetImg${i}.${extensionName}`;
  26.       for(let j = 1; j < shape[i].length; j++){
  27.         const leftPath = await this.resizeImage({
  28.           path:shape[i][j - 1],
  29.           width:imgInfo.width,
  30.           height:imgInfo.height
  31.         });
  32.         const rightPath = await resizeImage({
  33.           path:shape[i][j],
  34.           width:imgInfo.width,
  35.           height:imgInfo.height
  36.         });
  37.         tmpList.push(leftPath,rightPath,target);
  38.         progressBarC.run(shape[i].length * i + j);
  39.         await this.collapse(j == 1 ? leftPath : target,rightPath,target);
  40.       }
  41.       if( i > 0){
  42.           await this.collapse(res.target + '\\' + `targetImg${i - 1}.${extensionName}`,target,target,false);
  43.       }
  44.     }
  45.     progressBarC.run(shape[0].length * shape.length);
  46.     const newTarget = res.target + '\\' + new Date().getTime() + `.${extensionName}`;
  47.     fs.renameSync(target,newTarget)
  48.     for(let i = 0; i < tmpList.length; i++){
  49.       try{
  50.         fs.unlinkSync(tmpList[i]);
  51.       }catch(err){
  52.         // console.error(err);
  53.       }
  54.     }
  55.     console.log('');
  56.     return newTarget;
  57. }


插件使用

依赖引入

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


横向拼接两张图片

参数说明

left   ----   左边图片路径

right   ----   右边图片路径

target   ----   合成图片保存目录

示例代码

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


纵向拼接两张图片

参数说明

left   ----   左边图片路径

right   ----   右边图片路径

target   ----   合成图片保存目录

示例代码

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


批量拼接

参数说明

folderPath   ----   资源文件目

targetFolder   ----   合并图片保存目录

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

示例代码

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


自定义拼接矩阵

参数说明

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

target   ----   合并后图片的保存路径

示例代码

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


源码地址

https://gitee.com/zheng_yongtao/node-scripting-tool/tree/master/src/imgConcat


TAG标签：
本文网址：https://www.zztuku.com/detail-12886.html
站长图库 - 聊聊怎么使用node.js实现一个图片拼接插件
申明：本文转载于《掘金社区》，如有侵犯，请 联系我们 删除。

评论（0）条

您还没有登录，请 登录 后发表评论！

提示：请勿发布广告垃圾评论，否则封号处理！！

    编辑推荐