站長(zhǎng)資訊網(wǎng)怎么使用node實(shí)現(xiàn)一個(gè)圖片拼接插件？下面本篇文章給大家介紹一下使用node封裝一個(gè)圖片拼接插件的方法，希望對(duì)大家有所幫助！
平時(shí)我們拼接圖片的時(shí)候一般都要通過(guò)ps或者其他圖片處理工具來(lái)進(jìn)行處理合成，這次有個(gè)需求就需要進(jìn)行圖片拼接，而且我希望是可以直接使用代碼進(jìn)行拼接，于是就有了這么一個(gè)工具包。
插件效果
通過(guò)該插件，我們可以將圖片進(jìn)行以下操作：
1、橫向拼接兩張圖片
如下，我們有這么兩張圖片，現(xiàn)在我們可以通過(guò)該工具將它們拼接成一張
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、縱向拼接兩張圖片
仍是上面的兩張圖片，我們將其進(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)
單張圖片拼接
使用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(); }) }) }
批量拼接
- 使用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; }
自定義矩陣拼接
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; }
插件使用
依賴(lài)引入
const consoleInput = require('@jyeontu/img-concat'); const ImgConcatClass = new ImgConcat();
橫向拼接兩張圖片
參數(shù)說(shuō)明
- left
左邊圖片路徑
- right
右邊圖片路徑
- target
合成圖片保存目錄
示例代碼
const p1 = { left:'.\img\n1.jpg', right:'.\img\n2.jpg', target:'.\longImg' } // 橫向拼接兩張圖片 ImgConcatClass.collapseHorizontal(p1).then(res=>{ console.log(`拼接完成,圖片路徑為${res}`); });
縱向拼接兩張圖片
參數(shù)說(shuō)明
- left
左邊圖片路徑
- right
右邊圖片路徑
- target
合成圖片保存目錄
示例代碼
const p1 = { left:'.\img\n1.jpg', right:'.\img\n2.jpg', target:'.\longImg' } // 縱向拼接兩張圖片 ImgConcatClass.collapseVertical(p1).then(res=>{ console.log(`拼接完成,圖片路徑為${res}`); });
批量拼接
參數(shù)說(shuō)明
- 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}`); })
自定義拼接矩陣
參數(shù)說(shuō)明
- shape
圖片合并矩陣，傳入各個(gè)位置的圖片路徑。
- 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
