如何使用node实现一个图片拼接插件

今天小编给大家分享一下如何使用node实现一个图片拼接插件的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。

今天小编给大家分享一下如何使用node实现一个图片拼接插件的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。

如何使用node实现一个图片拼接插件

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

插件效果

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

1、横向拼接两张图片

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

如何使用node实现一个图片拼接插件

n1.jpg

如何使用node实现一个图片拼接插件

n2.jpg

  • 代码

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}`);
});
  • 效果

如何使用node实现一个图片拼接插件

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}`);
});
  • 效果

如何使用node实现一个图片拼接插件

3、批量拼接

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

如何使用node实现一个图片拼接插件

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}`);
})
  • 效果

如何使用node实现一个图片拼接插件

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}`);
})
  • 效果

如何使用node实现一个图片拼接插件

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}`);
});
  • 效果

如何使用node实现一个图片拼接插件

插件实现

单张图片拼接

使用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();
      })
    })
}

批量拼接

  • 使用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;
  }

自定义矩阵拼接

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;
}

插件使用

依赖引入

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

横向拼接两张图片

参数说明
  • left

左边图片路径

  • right

右边图片路径

  • target

合成图片保存目录

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

纵向拼接两张图片

参数说明
  • left

左边图片路径

  • right

右边图片路径

  • target

合成图片保存目录

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

批量拼接

参数说明
  • folderPath

资源文件目

  • targetFolder

合并图片保存目录

  • direction

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

示例代码
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}`);
})

自定义拼接矩阵

参数说明
  • shape

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

  • target

合并后图片的保存路径

示例代码
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实现一个图片拼接插件”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注恰卡网行业资讯频道。

本站部分文章来自网络或用户投稿,如无特殊说明或标注,均为本站原创发布。涉及资源下载的,本站旨在共享仅供大家学习与参考,如您想商用请获取官网版权,如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
开发者

php如何求数组中最大数的下标

2022-8-3 21:24:37

开发者

Vue中怎么使用Map键值对传参

2022-8-3 21:24:50

搜索