Hablemos sobre cómo usar node para implementar un complemento de empalme de imágenes.

Por lo general, cuando empalmamos imágenes, generalmente usamos PS u otras herramientas de procesamiento de imágenes para procesarlas y sintetizarlas. Esta vez es necesario empalmar imágenes, y espero que podamos usar código directamente para empalmar, por lo que existe dicha herramienta. Bolsa.

Efecto de complemento

A través de este complemento, podemos realizar las siguientes operaciones en imágenes:

1. Empalmar dos imágenes horizontalmente

de la siguiente manera. Tenemos esas dos imágenes y ahora podemos usar esta herramienta para unirlas en una.

n1.jpg

n2.jpg

• código

const consoleInput = require('@jyeontu/img-concat');
const ImgConcatClass = nuevo ImgConcat();
constante p1 = {
    izquierda:'.\img\n1.jpg',
    derecha:'.\img\n2.jpg',
    objetivo:'.\longImg'
}
// Empalma dos imágenes horizontalmente ImgConcatClass.collapseHorizontal(p1).then(res=>{
    console.log(`Empalme completado, la ruta de la imagen es ${res}`);
});

• Efecto

2. Empalmar verticalmente dos imágenes

siguen siendo las dos imágenes de arriba. Las uniremos verticalmente con

• el código

const consoleInput = require('@jyeontu/img-concat');
const ImgConcatClass = nuevo ImgConcat();
constante p1 = {
    izquierda:'.\img\n1.jpg',
    derecha:'.\img\n2.jpg',
    objetivo:'.\longImg'
}
//Une dos imágenes verticalmente ImgConcatClass.collapseVertical(p1).then(res=>{
    console.log(`Empalme completado, la ruta de la imagen es ${res}`);
});

• Efecto

3. Empalme por lotes

También podemos unir por lotes directamente todas las imágenes de un directorio en una imagen larga, como se muestra a continuación. Ahora queremos unir todas las imágenes del directorio:

3.1 Empalme horizontal de

• código

const consoleInput = require('@jyeontu/img-concat');
const ImgConcatClass = nuevo ImgConcat();
constante p = {
    carpetaPath:'.\img', //Directorio de recursos targetFolder:'.\longImg', //Dirección del directorio de almacenamiento de imágenes convertidas:'y' //Dirección de empalme, y es horizontal, n es vertical}
// Concatena todas las imágenes en el directorio ImgConcatClass.concatAll(p).then(res=>{
    console.log(`Empalme completado, la ruta de la imagen es ${res}`);
})

• Efecto

3.2 Empalme vertical

• de código

const consoleInput = require('@jyeontu/img-concat');
const ImgConcatClass = nuevo ImgConcat();
constante p = {
    carpetaPath:'.\img', //Directorio de recursos targetFolder:'.\longImg', //Dirección del directorio de almacenamiento de imágenes convertidas:'n' //Dirección de empalme, y es horizontal, n es vertical}
// Concatena todas las imágenes en el directorio ImgConcatClass.concatAll(p).then(res=>{
    console.log(`Empalme completado, la ruta de la imagen es ${res}`);
})

• Efecto

4. Personalice la matriz de empalme.

También podemos definir la matriz de empalme de imágenes nosotros mismos. shape es una matriz bidimensional y define las imágenes en cada posición. Los detalles son los siguientes:

• code

const consoleInput = require('@jyeontu/img. -concate');
const ImgConcatClass = nuevo ImgConcat();
constante p = {
    forma:[['.\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']
        ],
    objetivo:'.\longImg'
};
//Imagen de empalme de matriz personalizada ImgConcatClass.conCatByMaxit(p).then(res=>{
    console.log(`Empalme completado, la ruta de la imagen es ${res}`);
});

• Efecto

El complemento implementa

el empalme de una sola imagen

y utiliza GraphicsMagick para el empalme de imágenes

const gm = require('gm');
colapsar (izquierda, derecha, objetivo, bandera = verdadero) { 
    devolver nueva Promesa((r) => {
      gm(izquierda).append(derecha,bandera).write(objetivo, err => {
            si(err) console.log(err);
            r();
      })
    })
}

para el empalme por lotes

• , ajuste la resolución y el tamaño de la imagen.
• Utilice fs para obtener la lista de archivos.
• Utilice la ruta para unir las rutas de los archivos.
• Utilice @jyeontu/progress-bar para imprimir la barra de progreso

. gm = requerir('gm');
const fs = requerir('fs');
ruta constante = requerir('ruta');
const barra de progreso = require('@jyeontu/barra de progreso');
const {getFileSuffix,getMetadata,resizeImage} = require('./util');

doConcatAll = async(rutacarpeta,carpetadestino,dirección) => { 
    let fileList = fs.readdirSync(folderPath);
    lista de archivos.sort((a, b) => {
      devolver ruta.nombrebase(a) - ruta.nombrebase(b);
    });
    const extensionName = getFileSuffix(fileList[0], ".");
    let targetFilePath = path.join(targetFolder, new Date().getTime() + '.' + extensionName);
    configuración de barra constante = {
      duración: fileList.length - 1,
      actual: 0,
      bloque: '█',
      mostrarNúmero: verdadero,
      consejo:{
          0: 'Empalme...',
          100: 'Empalme completado'
      },
      color:'verde'
    };
    let ProgressBarC = new ProgressBar(barConfig);
    const imgInfo = espera this.getImgInfo(path.join(folderPath, fileList[0]));
    for (let index = 1; index < fileList.length; index++) {
      let leftFile = path.join(folderPath, fileList[índice - 1]);
      let rightFile = ruta.join(carpetaPath, fileList[índice]);
      const leftPath = espera this.resizeImage({
        ruta: archivo izquierdo,
        ancho:imgInfo.ancho,
        altura:imgInfo.altura
      });
      const rightPath = espera this.resizeImage({
        ruta: archivo derecho,
        ancho:imgInfo.ancho,
        altura:imgInfo.altura
      });
      progresoBarC.run(índice);
      await this.collapse(index == 1? leftPath: targetFilePath,rightPath,targetFilePath,dirección);
      fs.unlinkSync(rutaizquierda);
      fs.unlinkSync(rutaderecha);
    }
    consola.log('');
    devolver targetFilePath;
  }

Empalme de matriz personalizado

const gm = require('gm');
const fs = requerir('fs');
ruta constante = requerir('ruta');
const barra de progreso = require('@jyeontu/barra de progreso');
const {getFileSuffix,getMetadata,resizeImage} = require('./util');
asíncrono conCatByMaxit(res){
    const {forma} = res;
    consttmpList = [];
    configuración de barra constante = {
      duración: forma[0].longitud * forma.longitud,
      actual: 0,
      bloque: '█',
      mostrarNúmero: verdadero,
      consejo:{
          0: 'Empalme...',
          100: 'Empalme completado'
      },
      color:'verde'
    };
    const barra de progresoC = nueva barra de progreso(barConfig);
    dejar objetivo = '';
    let extensionName = getFileSuffix(forma[0][0], ".");
    const imgInfo = espera esto.getImgInfo(forma[0][0]);
    for(let i = 0; i < forma.longitud; i++){
      objetivo = res.destino + '\' + `targetImg${i}.${extensionName}`;
      for(let j = 1; j < forma[i].longitud; j++){
        const leftPath = espera this.resizeImage({
          ruta: forma [i] [j - 1],
          ancho:imgInfo.ancho,
          altura:imgInfo.altura
        });
        const rightPath = esperar a cambiar el tamaño de la imagen ({
          ruta: forma [i] [j],
          ancho:imgInfo.ancho,
          altura:imgInfo.altura
        });
        tmpList.push(ruta izquierda, ruta derecha, destino);
        ProgressBarC.run(forma[i].longitud * i + j);
        await this.collapse(j == 1? rutaizquierda: destino, rutaderecha,objetivo);
      }
      si(i>0){
          espere this.collapse(res.target + '\' + `targetImg${i - 1}.${extensionName}`,target,target,false);
      }
    }
    ProgressBarC.run(forma[0].longitud * forma.longitud);
    const nuevoObjetivo = res.objetivo + '\' + nueva Fecha().getTime() + `.${extensionName}`;
    fs.renameSync(objetivo,nuevoObjetivo)
    for(let i = 0; i < tmpList.length; i++){
      intentar{
        fs.unlinkSync(tmpList[i]);
      }captura(errar){
        // consola.error(err);
      }
    }
    consola.log('');
    devolver nuevoObjetivo;
}

El complemento utiliza

dependencias para introducir

const consoleInput = require('@jyeontu/img-concat');
const ImgConcatClass = new ImgConcat();

Empalmar dos imágenes horizontalmente

Descripción del parámetro

• izquierda izquierda

ruta de la imagen

• derecha

derecha ruta de la imagen

• destino

Directorio sintético para guardar imágenes

Código de ejemplo

const p1 = {
    izquierda:'.\img\n1.jpg',
    derecha:'.\img\n2.jpg',
    objetivo:'.\longImg'
}
// Empalma dos imágenes horizontalmente ImgConcatClass.collapseHorizontal(p1).then(res=>{
    console.log(`Empalme completado, la ruta de la imagen es ${res}`);
});

Empalme vertical de dos imágenes

descripción del parámetro

• izquierda

ruta de la imagen

• izquierda

derecha ruta de la imagen

• destino

guardado de la imagen sintetizada

código de ejemplo

const p1 = {
    izquierda:'.\img\n1.jpg',
    derecha:'.\img\n2.jpg',
    objetivo:'.\longImg'
}
// Empalma dos imágenes verticalmente ImgConcatClass.collapseVertical(p1).then(res=>{
    console.log(`Empalme completado, la ruta de la imagen es ${res}`);
});

de empalme por lotes

descripción

• carpetaPath

directorio del archivo de recursos

• carpeta de destino

• dirección

del directorio de guardado de la imagen

dirección de fusión de la imagen, y es horizontal, n es vertical

Código de ejemplo

const consoleInput = require('@jyeontu/img-concat');
const ImgConcatClass = nuevo ImgConcat();
constante p = {
    carpetaPath:'.\img', //Directorio de recursos targetFolder:'.\longImg', //Dirección del directorio de almacenamiento de imágenes fusionadas:'y' //Dirección de empalme, y es horizontal, n es vertical}
// Concatena todas las imágenes en el directorio ImgConcatClass.concatAll(p).then(res=>{
    console.log(`Empalme completado, la ruta de la imagen es ${res}`);
})

• de forma

de descripción de parámetro

personalizada

, pase la ruta de la imagen en cada ubicación.

Código de muestra

la imagen fusionada

• de destino

const p = {
    forma:[['.\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']
        ],
    objetivo:'.\longImg'
};
//Imagen de empalme de matriz personalizada ImgConcatClass.conCatByMaxit(p).then(res=>{
    console.log(`Empalme completado, la ruta de la imagen es ${res}`);
});

Dirección del código fuente

https://gitee.com/zheng_yongtao/node-scripting-tool/tree/master/src/imgConcat