Главная страница>Учебник по веб-дизайну>Учебник по Javascript

Давайте поговорим о том, как использовать Node для реализации плагина склейки изображений.

Автор：Eve Cole Время обновления：2022-08-04 14:50:57
Как использовать node для реализации плагина склейки изображений? В следующей статье вы узнаете, как использовать node для инкапсуляции плагина склейки изображений. Надеюсь, она будет вам полезна!

Обычно, когда мы соединяем изображения, мы обычно используем PS или другие инструменты обработки изображений для их обработки и синтеза. На этот раз возникла необходимость в объединении изображений, и я надеюсь, что мы сможем напрямую использовать код для объединения, поэтому такой инструмент существует. Сумка.

Эффект плагина

. С помощью этого плагина мы можем выполнять следующие операции над изображениями:

1. Склеивать две картинки по горизонтали

следующим образом. У нас есть такие две картинки, и теперь мы можем использовать этот инструмент, чтобы соединить их в одну.

1.png

n1.jpg

2.png

n2.jpg

  • код
const consoleInput = require('@jyeontu/img-concat');
const ImgConcatClass = новый ImgConcat();
константа р1 = {
    слева:'.\img\n1.jpg',
    справа:'.\img\n2.jpg',
    цель:'.\longImg'
}
// Соединяем два изображения по горизонтали ImgConcatClass.collapseHorizontal(p1).then(res=>{
    console.log(`Сращивание завершено, путь к изображению — ${res}`);
});
  • Эффект

3.png

2. Вертикальное соединение двух изображений

по-прежнему аналогично двум изображениям выше. Мы соединим их вертикально с помощью

  • кода
const consoleInput = require('@jyeontu/img-concat');
const ImgConcatClass = новый ImgConcat();
константа р1 = {
    слева:'.\img\n1.jpg',
    справа:'.\img\n2.jpg',
    цель:'.\longImg'
}
//Объединяем два изображения по вертикали ImgConcatClass.collapseVertical(p1).then(res=>{
    console.log(`Сращивание завершено, путь к изображению — ${res}`);
});
  • Эффект

4.png

3. Пакетное объединение

Мы также можем напрямую объединить все изображения в каталоге в длинное изображение, как показано ниже. Теперь мы хотим объединить все изображения в каталоге:

5.png

3.1 Горизонтальное сращивание длинного

  • кода
изображения 
const consoleInput = require('@jyeontu/img-concat');
const ImgConcatClass = новый ImgConcat();
константа р = {
    folderPath:'.\img', //Каталог ресурсов targetFolder:'.\longImg', //Направление каталога хранения преобразованных изображений:'y' //Направление склейки, y — горизонтально, n — вертикально}
// Объединяем все изображения в каталоге ImgConcatClass.concatAll(p).then(res=>{
    console.log(`Сращивание завершено, путь к изображению — ${res}`);
})
  • Эффект

6.png

3.2 Вертикальное сращивание длинного

  • кода
изображения 
const consoleInput = require('@jyeontu/img-concat');
const ImgConcatClass = новый ImgConcat();
константа р = {
    folderPath:'.\img', //Каталог ресурсов targetFolder:'.\longImg', //Направление каталога хранения преобразованных изображений:'n' //Направление склейки, y — горизонтально, n — вертикально}
// Объединяем все изображения в каталоге ImgConcatClass.concatAll(p).then(res=>{
    console.log(`Сращивание завершено, путь к изображению — ${res}`);
})
  • Эффект

7.png

4. Настройте матрицу склейки.

Мы также можем самостоятельно определить матрицу склейки изображений. shape представляет собой двумерный массив и определяет изображения в каждой позиции. Подробности следующие:

  • code
const consoleInput = require('@jyeontu/img). -конкат');
const ImgConcatClass = новый ImgConcat();
константа р = {
    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']
        ],
    цель:'.\longImg'
};
//Настраиваемое изображение сращивания матрицы ImgConcatClass.conCatByMaxit(p).then(res=>{
    console.log(`Сращивание завершено, путь к изображению — ${res}`);
});
  • Эффект

8.png

Плагин реализует

склейку отдельных изображений

и использует GraphicsMagick для склейки изображений

const gm = require('gm');
свернуть (слева, справа, цель, флаг = истина) { 
    вернуть новое обещание((r) => {
      gm(left).append(right,flag).write(target, err => {
            если(ошибка) console.log(ошибка);
            р();
      })
    })
}
Используйте Sharp.js, чтобы получить информацию об изображении

для пакетного склейки

  • , отрегулируйте разрешение и размер изображения.
  • Используйте fs , чтобы получить список файлов.
  • Используйте путь для объединения путей к файлам.
  • Используйте @jyeontu/progress-bar для печати индикатора выполнения
. гм = требуется ('гм');
const fs = require('fs');
константный путь = требуется ('путь');
const ProgressBar = require('@jyeontu/progress-bar');
const {getFileSuffix, getMetadata, resizeImage} = require('./util');

doConcatAll = async(folderPath,targetFolder,direction) => { 
    пусть fileList = fs.readdirSync(folderPath);
    fileList.sort((a, b) => {
      return path.basename(a) - path.basename(b);
    });
    const ExtensionName = getFileSuffix(fileList[0], ".");
    пусть targetFilePath = path.join(targetFolder, new Date().getTime() + '.' + ExtensionName);
    константный барConfig = {
      продолжительность: fileList.length - 1,
      ток: 0,
      блок:'█',
      шоуномер: правда,
      кончик:{
          0: «Сращивание...»,
          100: «Сращивание завершено»
      },
      цвет:'зеленый'
    };
    пусть ProgressBarC = новый ProgressBar (barConfig);
    const imgInfo = await this.getImgInfo(path.join(folderPath, fileList[0]));
    for (let index = 1; index <fileList.length; index++) {
      пусть leftFile = path.join(folderPath, fileList[index - 1]);
      пусть rightFile = path.join(folderPath, fileList[index]);
      const leftPath = ожидайте this.resizeImage({
        путь: левый файл,
        ширина: imgInfo.ширина,
        высота: imgInfo.height
      });
      const rightPath = ожидайте this.resizeImage({
        путь: правый файл,
        ширина: imgInfo.ширина,
        высота: imgInfo.height
      });
      ProgressBarC.run (индекс);
      await this.collapse(index == 1? leftPath: targetFilePath, rightPath, targetFilePath, направление);
      fs.unlinkSync(leftPath);
      fs.unlinkSync(rightPath);
    }
    console.log('');
    вернуть путь к целевому файлу;
  }

Пользовательское сращивание матриц

const gm = require('gm');
const fs = require('fs');
константный путь = требуется ('путь');
const ProgressBar = require('@jyeontu/progress-bar');
const {getFileSuffix, getMetadata, resizeImage} = require('./util');
асинхронный conCatByMaxit (рез) {
    константа {форма} = рез;
    константный tmpList = [];
    константный барConfig = {
      продолжительность: форма[0].длина * форма.длина,
      ток: 0,
      блок:'█',
      шоуномер: правда,
      кончик:{
          0: «Сращивание...»,
          100: «Сращивание завершено»
      },
      цвет:'зеленый'
    };
    const ProgressBarC = новый ProgressBar (barConfig);
    пусть цель = '';
    let ExtensionName = getFileSuffix(shape[0][0], ".");
    const imgInfo = ожидайте 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 = ожидайте this.resizeImage({
          путь: форма[i][j - 1],
          ширина: imgInfo.ширина,
          высота: imgInfo.height
        });
        const rightPath = ожидайте изменения размера изображения({
          путь: форма[i][j],
          ширина: imgInfo.ширина,
          высота: imgInfo.height
        });
        tmpList.push(leftPath, rightPath, цель);
        ProgressBarC.run(shape[i].length * i + j);
        await this.collapse(j == 1 ? leftPath: target,rightPath,target);
      }
      если (я>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(цель,newTarget)
    for(пусть я = 0; я <tmpList.length; я++){
      пытаться{
        fs.unlinkSync(tmpList[i]);
      }поймать(ошибка){
        // console.error(err);
      }
    }
    console.log('');
    вернуть новую цель;
}

Плагин использует

зависимости для введения

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

Соединить два изображения по горизонтали

Описание параметра

  • левый

левый путь к изображению

  • правый

правый целевой путь к изображению

  • Каталог для

сохранения синтетических изображений

Пример кода

const p1 = {
    слева:'.\img\n1.jpg',
    справа:'.\img\n2.jpg',
    цель:'.\longImg'
}
// Соединяем два изображения по горизонтали ImgConcatClass.collapseHorizontal(p1).then(res=>{
    console.log(`Сращивание завершено, путь к изображению — ${res}`);

Вертикальное сращивание двух изображений

описание параметра

  • левый

левый путь к изображению

  • правый

правый путь к изображению

  • целевой
каталог для

сохранения синтезированного изображения

код

const p1 = {
});
    слева:'.\img\n1.jpg',
    справа:'.\img\n2.jpg',
    цель:'.\longImg'
}
// Соединяем два изображения по вертикали ImgConcatClass.collapseVertical(p1).then(res=>{
    console.log(`Сращивание завершено, путь к изображению — ${res}`);
});

Описание параметра

пакетного сращивания.

  • FolderPath.

Каталог файла ресурсов

  • targetFolder.
  • Каталог

сохранения объединенного изображения.

Направление слияния изображений, y — горизонтальное, n — вертикальное.

Пример кода

const consoleInput = require('@jyeontu/img-concat');
const ImgConcatClass = новый ImgConcat();
константа р = {
    folderPath:'.\img', //Каталог ресурсов targetFolder:'.\longImg', //Направление каталога хранения объединенных изображений:'y' //Направление склейки, y — горизонтально, n — вертикально}
// Объединяем все изображения в каталоге ImgConcatClass.concatAll(p).then(res=>{
    console.log(`Сращивание завершено, путь к изображению — ${res}`);
})
Пользовательское

описание параметра

матрицы сращивания

  • формирует

матрицу слияния изображений, передает путь к изображению в каждом месте.

Пример кода

для сохранения пути
  • целевого

объединенного изображения

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']
        ],
    цель:'.\longImg'
};
//Настраиваемое изображение сращивания матрицы ImgConcatClass.conCatByMaxit(p).then(res=>{
    console.log(`Сращивание завершено, путь к изображению — ${res}`);
});

Адрес исходного кода

https://gitee.com/zheng_yongtao/node-scripting-tool/tree/master/src/imgConcat
Связанные статьи