(资料图片)
插件效果
通过该插件，我们可以将图片进行以下操作：
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();横向拼接两张图片
参数说明
leftrighttarget示例代码
const p1 = { left:".\\img\\n1.jpg", right:".\\img\\n2.jpg", target:".\\longImg"}// 横向拼接两张图片ImgConcatClass.collapseHorizontal(p1).then(res=>{ console.log(`拼接完成,图片路径为${res}`);});纵向拼接两张图片
参数说明
leftrighttarget示例代码
const p1 = { left:".\\img\\n1.jpg", right:".\\img\\n2.jpg", target:".\\longImg"}// 纵向拼接两张图片ImgConcatClass.collapseVertical(p1).then(res=>{ console.log(`拼接完成,图片路径为${res}`);});批量拼接
参数说明
folderPathtargetFolderdirection示例代码
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}`);})自定义拼接矩阵
参数说明
shapetarget示例代码
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
更多node相关知识，请访问：nodejs 教程！
以上就是聊聊怎么使用node实现一个图片拼接插件的详细内容，更多请关注php中文网其它相关文章！
