node實(shí)現(xiàn)封裝一個(gè)圖片拼接插件
更新時(shí)間：2022年08月02日 09:50:20 作者：JYeontu???????
這篇文章主要介紹了node實(shí)現(xiàn)封裝一個(gè)圖片拼接插件，文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的朋友可以參考一下
前言
平時(shí)我們拼接圖片的時(shí)候一般都要通過(guò)ps或者其他圖片處理工具來(lái)進(jìn)行處理合成，這次有個(gè)需求就需要進(jìn)行圖片拼接，而且我希望是可以直接使用代碼進(jìn)行拼接，于是就有了這么一個(gè)工具包。
插件效果
通過(guò)該插件，我們可以將圖片進(jìn)行以下操作：
1、橫向拼接兩張圖片
如下，我們有這么兩張圖片，現(xiàn)在我們可以通過(guò)該工具將它們拼接成一張
代碼：
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、縱向拼接兩張圖片
仍是上面的兩張圖片，我們將其進(jìn)行縱向拼接
代碼:
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、批量拼接
我們也可以直接將某一目錄中的所有圖片進(jìn)行批量拼接成長(zhǎng)圖，如下圖，我們現(xiàn)在要對(duì)該目錄下的所有圖片進(jìn)行拼接：
3.1 橫向拼接長(zhǎng)圖
代碼:
const consoleInput = require('@jyeontu/img-concat');
const ImgConcatClass = new ImgConcat();
const p = {
folderPath:'.\\img', //資源目錄
targetFolder:'.\\longImg', //轉(zhuǎn)換后圖片存放目錄
direction:'y' //拼接方向，y為橫向，n為縱向
}
// 拼接目錄下的所有圖片
ImgConcatClass.concatAll(p).then(res=>{
console.log(`拼接完成,圖片路徑為${res}`);
})效果:
3.2 縱向拼接長(zhǎng)圖
代碼:
const consoleInput = require('@jyeontu/img-concat');
const ImgConcatClass = new ImgConcat();
const p = {
folderPath:'.\\img', //資源目錄
targetFolder:'.\\longImg', //轉(zhuǎn)換后圖片存放目錄
direction:'n' //拼接方向，y為橫向，n為縱向
}
// 拼接目錄下的所有圖片
ImgConcatClass.concatAll(p).then(res=>{
console.log(`拼接完成,圖片路徑為${res}`);
})效果:
4、自定義拼接矩陣
我們也可以自己定義圖片拼接矩陣，shape為二維數(shù)組，定義各個(gè)位置的圖片，具體如下：
代碼:
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}`);
});效果:
插件實(shí)現(xiàn)
1、單張圖片拼接
使用GraphicsMagick進(jìn)行圖片拼接
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獲取圖片信息，調(diào)整圖片分辨率大小
- 使用fs獲取文件列表
- 使用path拼接文件路徑
- 使用 @jyeontu/progress-bar打印進(jìn)度條
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參數(shù)說(shuō)明
- 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參數(shù)說(shuō)明
- 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參數(shù)說(shuō)明
- 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參數(shù)說(shuō)明
- shape
圖片合并矩陣，傳入各個(gè)位置的圖片路徑。
- 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}`);
});到此這篇關(guān)于node實(shí)現(xiàn)封裝一個(gè)圖片拼接插件的文章就介紹到這了,更多相關(guān)node封裝插件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
package-lock.json解決依賴的版本管理使用詳解
這篇文章主要為大家介紹了package-lock.json解決依賴的版本管理使用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
node.js中實(shí)現(xiàn)kindEditor圖片上傳功能的方法教程
最近在做一個(gè)類似于論壇的系統(tǒng)，帖子需要進(jìn)行圖文并茂的顯示，所以用到了富文本編輯器：kindeditor，下面這篇文章主要給大家介紹了在node.js中實(shí)現(xiàn)kindEditor圖片上傳功能的方法教程，需要的朋友可以參考借鑒，下面來(lái)一起看看吧。2017-04-04
在Node.js中實(shí)現(xiàn)文件復(fù)制的方法和實(shí)例
這篇文章主要介紹了在Node.js中實(shí)現(xiàn)文件復(fù)制的方法和實(shí)例,使用FS模塊實(shí)現(xiàn),需要的朋友可以參考下2014-06-06
Nginx設(shè)置為Node.js的前端服務(wù)器方法總結(jié)
在本篇文章中小編給大家分享了關(guān)于Nginx設(shè)置為Node.js的前端服務(wù)器的方法和實(shí)例，需要的朋友們學(xué)習(xí)下。2019-03-03
Nodejs訪問(wèn)網(wǎng)絡(luò)并解析返回的json的實(shí)現(xiàn)方法
本文主要介紹了Nodejs訪問(wèn)網(wǎng)絡(luò)并解析返回的json的實(shí)現(xiàn)方法，文中根據(jù)實(shí)例編碼詳細(xì)介紹的十分詳盡，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
nodejs中內(nèi)置模塊fs,path常見(jiàn)的用法說(shuō)明
這篇文章主要介紹了nodejs中內(nèi)置模塊fs,path常見(jiàn)的用法說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
這篇文章主要介紹了nodejs中的讀取文件fs與文件路徑path解析，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
nodeJS服務(wù)器的創(chuàng)建和重新啟動(dòng)的實(shí)現(xiàn)方法
今天小編就為大家分享一篇nodeJS服務(wù)器的創(chuàng)建和重新啟動(dòng)的實(shí)現(xiàn)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-05-05
通過(guò)npm package manager來(lái)安裝和管理包是我們最為常見(jiàn)的方式之一，本文將從淺入深地帶大家剖析一下npm install的執(zhí)行過(guò)程，感興趣的可以學(xué)習(xí)一下2023-05-05
Node.js DES加密的簡(jiǎn)單實(shí)現(xiàn)
下面小編就為大家?guī)?lái)一篇Node.js DES加密的簡(jiǎn)單實(shí)現(xiàn)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-07-07