node實現(xiàn)封裝一個圖片拼接插件
更新時間：2022年08月02日 09:50:20 作者：JYeontu???????
這篇文章主要介紹了node實現(xiàn)封裝一個圖片拼接插件，文章圍繞主題展開詳細的內(nèi)容介紹，具有一定的參考價值，需要的朋友可以參考一下
前言
平時我們拼接圖片的時候一般都要通過ps或者其他圖片處理工具來進行處理合成，這次有個需求就需要進行圖片拼接，而且我希望是可以直接使用代碼進行拼接，于是就有了這么一個工具包。
插件效果
通過該插件，我們可以將圖片進行以下操作：
1、橫向拼接兩張圖片
如下，我們有這么兩張圖片，現(xiàn)在我們可以通過該工具將它們拼接成一張
代碼：
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、批量拼接
我們也可以直接將某一目錄中的所有圖片進行批量拼接成長圖，如下圖，我們現(xiàn)在要對該目錄下的所有圖片進行拼接：
3.1 橫向拼接長圖
代碼:
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 縱向拼接長圖
代碼:
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ù)組，定義各個位置的圖片，具體如下：
代碼:
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}`);
});效果:
插件實現(xiàn)
1、單張圖片拼接
使用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();
})
})
}2、量拼接
- 使用sharp.js獲取圖片信息，調(diào)整圖片分辨率大小
- 使用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;
}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ù)說明
- 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ù)說明
- 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ù)說明
- 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ù)說明
- shape
圖片合并矩陣，傳入各個位置的圖片路徑。
- 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實現(xiàn)封裝一個圖片拼接插件的文章就介紹到這了,更多相關(guān)node封裝插件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
本文給大家?guī)淼氖且黄P(guān)于nodejs中watch機制的探討，主要探討內(nèi)容是為什么watch不是銀彈，嘗試使用更好的方案來解決這個問題2014-11-11
這篇文章主要介紹了nodejs實現(xiàn)一個word文檔解析器的思路詳解，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-08-08
這篇文章主要介紹了在Ubuntu系統(tǒng)上安裝Node.JS的教程,Node.JS的高性能V8解釋器運行及異步機制為其帶來了巨大的人氣,需要的朋友可以參考下2015-10-10
這篇文章主要介紹了express中static中間件的具體使用方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
node.js對于數(shù)據(jù)庫MySQL基本操作實例總結(jié)【增刪改查】
這篇文章主要介紹了node.js對于數(shù)據(jù)庫MySQL基本操作,結(jié)合實例形式總結(jié)分析了node.js針對mysql數(shù)據(jù)庫基本配置、連接與增刪改查相關(guān)操作技巧,需要的朋友可以參考下2023-04-04
這篇文章主要介紹了node中使用shell腳本的方法步驟，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
詳解使用vscode+es6寫nodejs服務(wù)端調(diào)試配置
本篇文章主要介紹了使用vscode+es6寫nodejs服務(wù)端調(diào)試配置，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
最近因為工作的原因在學(xué)習(xí)使用網(wǎng)絡(luò)請求庫，因為這個項目用的是Promise，所以就選擇了axios，下面這篇文章主要給大家介紹了關(guān)于axios在node.js中的post使用的相關(guān)資料，文中介紹的非常詳細，需要的朋友可以參考借鑒，下面來一起學(xué)習(xí)學(xué)習(xí)吧。2017-04-04
關(guān)于Node.js中Buffer的一些你可能不知道的用法
網(wǎng)上關(guān)于Node.js中Buffer用法的文章有很多，但是感覺還是不夠詳細，所以這篇文章主要介紹了關(guān)于Node.js中Buffer的一些你可能不知道的用法，文中介紹的非常詳細，需要的朋友可以參考借鑒，下面來一起看看吧。2017-03-03
nodejs是一種流行的服務(wù)器端JavaScript運行環(huán)境,它經(jīng)常需要更新以獲取最新的功能和性能優(yōu)化,本文將給大家介紹了給nodejs升級的兩種方法,文中通過代碼示例講解非常詳細,需要的朋友可以參考下2023-12-12