Lassen Sie uns darüber sprechen, wie Sie mithilfe von Node ein Bildspleiß-Plug-In implementieren

Wenn wir Bilder zusammenfügen, verwenden wir normalerweise PS oder andere Bildverarbeitungswerkzeuge, um sie zu verarbeiten und zu synthetisieren. Diesmal ist Bildspleißen erforderlich, und ich hoffe, dass wir Code direkt zum Zusammenfügen verwenden können, sodass es ein solches Werkzeug gibt. Tasche.

Plug-In-Effekt

Mit diesem Plug-In können wir die folgenden Vorgänge an Bildern ausführen:

1. Fügen Sie zwei Bilder wie folgt horizontal zusammen

und können Sie sie nun mit diesem Tool zu einem zusammenfügen

n1.jpg

n2.jpg-

• Code

const consoleInput = require('@jyeontu/img-concat');
const ImgConcatClass = new ImgConcat();
const p1 = {
    links:'.\img\n1.jpg',
    rechts:'.\img\n2.jpg',
    Ziel:'.\longImg'
}
// Zwei Bilder horizontal verbinden ImgConcatClass.collapseHorizontal(p1).then(res=>{
    console.log(`Spleißen abgeschlossen, Bildpfad ist ${res}`);
});

• Wirkung

2. Das vertikale Zusammenfügen zweier Bilder

entspricht immer noch den beiden obigen Bildern. Wir werden sie mit

• dem Code

const consoleInput = require('@jyeontu/img-concat'); vertikal zusammenfügen.
const ImgConcatClass = new ImgConcat();
const p1 = {
    links:'.\img\n1.jpg',
    rechts:'.\img\n2.jpg',
    Ziel:'.\longImg'
}
//Zwei Bilder vertikal verbinden ImgConcatClass.collapseVertical(p1).then(res=>{
    console.log(`Spleißen abgeschlossen, Bildpfad ist ${res}`);
});

• Wirkung

3. Stapelspleißen

Wir können alle Bilder in einem Verzeichnis auch direkt stapelweise zu einem langen Bild zusammenfügen, wie unten gezeigt. Jetzt möchten wir alle Bilder im Verzeichnis zusammenfügen:

3.1 Horizontales Spleißen von langem Bildcode

• const

consoleInput = require('@jyeontu/img-concat');
const ImgConcatClass = new ImgConcat();
const p = {
    FolderPath:'.\img', //Ressourcenverzeichnis targetFolder:'.\longImg', //Richtung des konvertierten Bildspeicherverzeichnisses:'y' //Spleißrichtung, y ist horizontal, n ist vertikal}
// Alle Bilder im Verzeichnis verketten ImgConcatClass.concatAll(p).then(res=>{
    console.log(`Spleißen abgeschlossen, Bildpfad ist ${res}`);
})

• Wirkung

3.2 Vertikales Spleißen von langem Bildcode

• const

consoleInput = require('@jyeontu/img-concat');
const ImgConcatClass = new ImgConcat();
const p = {
    FolderPath:'.\img', //Ressourcenverzeichnis targetFolder:'.\longImg', //Richtung des konvertierten Bildspeicherverzeichnisses:'n' //Spleißrichtung, y ist horizontal, n ist vertikal}
// Alle Bilder im Verzeichnis verketten ImgConcatClass.concatAll(p).then(res=>{
    console.log(`Spleißen abgeschlossen, Bildpfad ist ${res}`);
})

• Wirkung

4. Passen Sie die Spleißmatrix

auch selbst an. shape ist ein zweidimensionales Array und definiert die Bilder an jeder Position. Die Details sind wie folgt:

• code

const consoleInput = require('@jyeontu/img -concat');
const ImgConcatClass = new ImgConcat();
const p = {
    Form:[['.\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']
        ],
    Ziel:'.\longImg'
};
//Angepasstes Matrix-Spleißbild ImgConcatClass.conCatByMaxit(p).then(res=>{
    console.log(`Spleißen abgeschlossen, Bildpfad ist ${res}`);
});

• Wirkung

Das Plug-in implementiert

das Spleißen einzelner Bilder

und verwendet GraphicsMagick für das Spleißen von Bildern.

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();
      })
    })
}

für das Batch-Spleißen

• .
• Verwenden Sie „fs“ , um die Dateipfade zu erhalten.
• Verwenden
• Sie „@jyeontu/progress-bar“ , um den Fortschrittsbalken zu

drucken 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 = {
      Dauer: fileList.length - 1,
      Strom: 0,
      Block:'█',
      showNumber: wahr,
      Tipp:{
          0: 'Spleißen...',
          100:'Spleißen abgeschlossen'
      },
      Farbe:'grün'
    };
    let progressBarC = new progressBar(barConfig);
    const imgInfo = waiting 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 = warte auf this.resizeImage({
        path:leftFile,
        width:imgInfo.width,
        Höhe:imgInfo.height
      });
      const rightPath = warte auf this.resizeImage({
        path:rightFile,
        width:imgInfo.width,
        Höhe:imgInfo.height
      });
      progressBarC.run(index);
      Warten Sie auf this.collapse(index == 1 ? leftPath : targetFilePath,rightPath,targetFilePath,direction);
      fs.unlinkSync(leftPath);
      fs.unlinkSync(rightPath);
    }
    console.log('');
    return targetFilePath;
  }

Benutzerdefiniertes Matrixspleißen

const gm = require('gm');
const fs = require('fs');
const path = require('path');
const progressBar = require('@jyeontu/progress-bar');
const {getFileSuffix,getMetadata,resizeImage} = require('./util');
asynchrones conCatByMaxit(res){
    const {Form} = res;
    const tmpList = [];
    const barConfig = {
      Dauer: Form[0].Länge * Form.Länge,
      Strom: 0,
      Block:'█',
      showNumber: wahr,
      Tipp:{
          0: 'Spleißen...',
          100:'Spleißen abgeschlossen'
      },
      Farbe:'grün'
    };
    const progressBarC = new progressBar(barConfig);
    let target = '';
    let extensionName = getFileSuffix(shape[0][0], ".");
    const imgInfo = waiting 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 = warte auf this.resizeImage({
          Pfad:Form[i][j - 1],
          width:imgInfo.width,
          Höhe:imgInfo.height
        });
        const rightPath = waiting resizeImage({
          Pfad:Form[i][j],
          width:imgInfo.width,
          Höhe:imgInfo.height
        });
        tmpList.push(leftPath,rightPath,target);
        progressBarC.run(shape[i].length * i + j);
        Warten Sie auf this.collapse(j == 1 ? leftPath : target,rightPath,target);
      }
      if(i>0){
          wait 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++){
      versuchen{
        fs.unlinkSync(tmpList[i]);
      }catch(err){
        // console.error(err);
      }
    }
    console.log('');
    return newTarget;
}

Das Plug-in verwendet

Abhängigkeiten, um

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

Zwei Bilder horizontal verbinden

Parameterbeschreibung

• links

linker Bildpfad

• rechts

rechter Bildpfad

• Ziel

Synthetisches Bildspeicherverzeichnis

Beispielcode

const p1 = {
    links:'.\img\n1.jpg',
    rechts:'.\img\n2.jpg',
    Ziel:'.\longImg'
}
// Zwei Bilder horizontal verbinden ImgConcatClass.collapseHorizontal(p1).then(res=>{
    console.log(`Spleißen abgeschlossen, Bildpfad ist ${res}`);
});

Vertikales Zusammenfügen von zwei Bildern

Parameterbeschreibung

• links

linker Bildpfad

• rechts

rechter Bildpfad

• Ziel

synthetisiertes Bildspeicherverzeichnis

Beispielcode

const p1 = {
    links:'.\img\n1.jpg',
    rechts:'.\img\n2.jpg',
    Ziel:'.\longImg'
}
// Zwei Bilder vertikal verbinden ImgConcatClass.collapseVertical(p1).then(res=>{
    console.log(`Spleißen abgeschlossen, Bildpfad ist ${res}`);
});

Batch-Splicing-

Parameterbeschreibung

• FolderPath

Ressourcendateiverzeichnis

• TargetFolder

• Richtung

des zusammengeführten Bildspeicherverzeichnisses

Bildzusammenführungsrichtung, y ist horizontal, n ist vertikal

Beispielcode

const consoleInput = require('@jyeontu/img-concat');
const ImgConcatClass = new ImgConcat();
const p = {
    FolderPath:'.\img', //Ressourcenverzeichnis targetFolder:'.\longImg', //Die Richtung des zusammengeführten Bildspeicherverzeichnisses:'y' //Spleißrichtung, y ist horizontal, n ist vertikal}
// Alle Bilder im Verzeichnis verketten ImgConcatClass.concatAll(p).then(res=>{
    console.log(`Spleißen abgeschlossen, Bildpfad ist ${res}`);
})

Benutzerdefinierte Spleißmatrix,

Parameterbeschreibung,

• Form

der Bildzusammenführungsmatrix, Übergabe des Bildpfads an jeder Position.

Beispielcode

zusammengeführten

• Zielbilds

const p = {
    Form:[['.\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']
        ],
    Ziel:'.\longImg'
};
//Angepasstes Matrix-Spleißbild ImgConcatClass.conCatByMaxit(p).then(res=>{
    console.log(`Spleißen abgeschlossen, Bildpfad ist ${res}`);
});

Quellcode-Adresse

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