node封装一个图片拼接插件
说在前面
平时我们拼接图片的时候一般都要通过ps或者其他图片处理工具来进行处理合成，这次有个需求就需要进行图片拼接，而且我希望是可以直接使用代码进行拼接，于是就有了这么一个工具包。
插件效果
通过该插件，我们可以将图片进行以下操作：
1、横向拼接两张图片
如下，我们有这么两张图片，现在我们可以通过该工具将它们拼接成一张
n1.jpg
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}`);
});
- 效果
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}`);
});
- 效果
插件实现
单张图片拼接
使用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}`);
});
源码地址
https://gitee.com/zheng_yongtao/node-scripting-tool/tree/master/src/imgConcat
觉得有帮助的同学可以帮忙给我点个star，感激不尽~~~
有什么想法或者改良可以给我提个pr，十分欢迎~~~
有什么问题都可以在评论告诉我~~~
往期精彩
基于inquirer封装一个控制台文件选择器
node封装一个控制台进度条插件
vue实现一个鼠标滑动预览视频封面组件
密码太多不知道怎么记录？不如自己写个密码箱小程序
微信小程序实现一个手势图案锁组件
vue封装一个图案手势锁组件
vue封装一个弹幕组件
为了学（mo）习（yu），我竟开发了这样一个插件
程序员的浪漫之——情侣日常小程序
vue简单实现词云图组件
vue + echarts实现中国地图省份下钻联动
使用学过的算法做个游戏很酷的好吗
说在后面
node封装一个图片拼接插件相关推荐
- java封装插件,基于面向对象思想封装一个水球插件
1 2 3 4 5 test 6 7 body{ 8 display:flex; 9 flex-flow:column wrap; 10 justify-content:center; 11 alig ...
- 基于inquirer封装一个控制台文件选择器
说在前面 我们在用脚手架初始化项目的时候,往往会进行一些命令交互,用过vue或者react的用脚手架新建项目的应该都进行过命令交互,vue创建的时候会让你选择vue2还是vue3,也有多选要什么配置, ...
- 基于iview 封装一个vue 表格分页组件
iview 是一个支持中大型项目的后台管理系统ui组件库,相对于一个后台管理系统的表格来说分页十分常见的 iview是一个基于vue的ui组件库,其中的iview-admin是一个已经为我们搭好的后天 ...
- 自己封装一个弹框插件
弹出层提示信息,这是移动前端开发中最常见的需求,你可能会想到一些流行的弹框插件,比如 经典的artDialog 炫酷的Sweetalert等等.. 但是慢慢地你其实会发现通常情况下需求定制化要求较高, ...
- vscode不能跳转_vscode-goto-node-modules 一个快速定位 node 模块的 vscode 插件
vscode-goto-node-modules 一个快速定位 node 模块的 vscode 插件 原文:http://www.aqcoder.com/post/43 在使用 VSCode 开发 N ...
- vue自定义插件 封装一个类似 element 中 message 消息提示框的插件
vue自定义插件 封装一个类似 element 中 message 消息提示框的插件 一.资源文档 1.vue内置组件 transition 2.Vue.use() 3.Vue.extend() 4. ...
- 案例——封装一个轮播图插件
说起插件,可能很多人搞不清楚插件和类库.组件.框架的区别,在这里,我先来简单的聊一聊它们之间的区别和联系 类库 提供一些真实项目中常用的方法,任何项目都可以把类库导入进来,调取里面的方法实现自己需要的 ...
- 从零开始学_JavaScript_系列（21）——dojo(8)（手把手教你封装一个widget）
(73)封装一个widget 醒目:必须在web环境下使用,无论是python的web.py或者是通过http访问网站环境,都可以,但纯本地是不可行的. 首先,什么是widget? 简单来说,就是一个 ...
- 编写一个VSCode插件
原文链接: 编写一个VSCode插件 - 愧怍的小站 自从使用过 VSCode 后就再也离不开 VSCode,其轻量的代码编辑器与诸多插件让多数开发者爱不释手.同样我也不例外,一年前的我甚至还特意买本 ...
- 从零开始编写一个js插件
什么是js插件 首先我们必须要明白什么是js插件,说的简单点,类似于 function add(a, b){ return a+b; } 这就是一种插件的雏形,因为它还没有封装起来, 它会影响到工作区 ...
最新文章
- String与StringBuffer的区别
- [C++] 井字棋游戏源码
- 构建iOS持续集成平台（三）——CI服务器与自动化部署
- 数据库原理与应用（SQL Server）教程 主键、外键以及联合主键、复合主键和设置种子数目和增量
- WYSIWYG的意思。
- axure中备注线_1分钟K线、日K线、月K线……不同周期的K线图到底有啥用？
- iOS:延时执行的三种方式
- win10计算机管理看不见蓝牙,如何解决Win10设备管理器找不到蓝牙？
- 路由器刷机教程图解_斐讯路由器K1/K2/K2P系列刷机流程图文教程
- python群控模拟安卓系统_手机群控脚本通用版安装包下载-手机群控脚本通用版apk(云控平板)v1.0.01真机模拟版_新绿资源网...
- java 随机生成人员姓名
- 制度罚则-- 日志规范
- 【Vue报错】This is probably not a problem with npm. There is likely additional logging output above
- python卷积神经网络人体图像识别
- 金融(银行)有关业务总结
- 读取短信并复制验证码小工具
- MacBook Pro设置外接显示器竖屏显示，2k 字体小
- 远程连接基于VMware虚拟机的linux操作系统
- 抓包工具以及如何看抓包信息
- Unity 实现A* 寻路算法
热门文章