홈페이지>웹 디자인 튜토리얼>자바스크립트 튜토리얼

노드를 사용하여 그림 접합 플러그인을 구현하는 방법에 대해 이야기해 보겠습니다.

저자：Eve Cole 업데이트 시간：2022-08-04 14:50:57
노드를 사용하여 그림 접합 플러그인을 구현하는 방법은 무엇입니까? 다음 기사에서는 노드를 사용하여 그림 접합 플러그인을 캡슐화하는 방법을 소개합니다. 도움이 되기를 바랍니다.

보통 사진을 접합할 때 PS나 다른 이미지 처리 도구를 사용하여 처리하고 합성하는 경우가 많습니다. 이번에는 이미지 접합이 필요한데, 코드를 직접 사용하여 접합할 수 있으면 좋겠다고 해서 그런 도구가 있습니다. 가방.

플러그인 효과

이 플러그인을 통해 사진에 대해 다음 작업을 수행할 수 있습니다.

1.

다음과 같이 두 개의 사진을 가로로 연결합니다. 이제 두 개의 사진이 있으며 이제 이 도구를 사용하여 하나로 연결할 수 있습니다.

1.png

n1.jpg

2.png

n2.jpg

  • 코드
const consoleInput = require('@jyontu/img-concat');
const ImgConcatClass = new ImgConcat();
const p1 = {
    왼쪽:'.\img\n1.jpg',
    오른쪽:'.\img\n2.jpg',
    대상:'.\longImg'
}
// 두 그림을 가로로 연결합니다. ImgConcatClass.collapseHorizontal(p1).then(res=>{
    console.log(`접합 완료, 사진 경로는 ${res}`);
});
  • 효과

3.png

2. 두 그림을 수직으로 연결하는 것은

여전히 ​​위의 두 그림입니다.

const
  • consoleInput
= require('@jyontu/img-concat');
const ImgConcatClass = new ImgConcat();
const p1 = {
    왼쪽:'.\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('@jyontu/img-concat');
const ImgConcatClass = new ImgConcat();
const p = {
    folderPath:'.\img', //리소스 디렉터리 targetFolder:'.\longImg', //이미지 저장 디렉터리 방향으로 변환:'y' //접합 방향, y는 가로, n은 세로}
// ImgConcatClass.concatAll(p).then(res=>{ 디렉터리의 모든 이미지를 연결합니다.
    console.log(`접합 완료, 사진 경로는 ${res}`);
})
  • 효과

6.png

3.2 긴 이미지
  • 코드

수직 연결

const consoleInput = require('@jyontu/img-concat');
const ImgConcatClass = new ImgConcat();
const p = {
    폴더 경로:'.\img', //리소스 디렉터리 targetFolder:'.\longImg', //이미지 저장 디렉터리 방향으로 변환됨:'n' //접합 방향, y는 가로, n은 세로}
// ImgConcatClass.concatAll(p).then(res=>{ 디렉터리의 모든 이미지를 연결합니다.
    console.log(`접합 완료, 사진 경로는 ${res}`);
})
  • 효과

7.png

4. 스플라이싱 행렬을 사용자 정의합니다.

shape 2차원 배열이며 각 위치의 이미지를 정의합니다.

  • code
const consoleInput = require('@jyontu/img) -연결');
const ImgConcatClass = new ImgConcat();
const p = {
    모양:[['.\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');
축소(왼쪽,오른쪽,대상,플래그 = true) { 
    새로운 약속을 반환((r) => {
      gm(왼쪽).append(오른쪽, 플래그).write(대상, 오류 => {
            if(err) console.log(err);
            아르 자형();
      })
    })
}

일괄 접합을 위한

이미지 정보를 얻으려면 Sharp.js를 사용하고
  • ,
  • 파일
  • 목록을 얻으려면 fs를 사용하십시오.
  • 진행률 표시줄을 인쇄하려면 @jyontu/progress-bar를 사용하십시오
. gm = 요구('gm');
const fs = require('fs');
const path = require('경로');
const ProgressBar = require('@jyontu/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 = {
      기간: fileList.length - 1,
      현재: 0,
      블록:'█',
      쇼번호: 사실,
      팁:{
          0: '접합...',
          100:'접합 완료'
      },
      색상:'녹색'
    };
    let ProgressBarC = new ProgressBar(barConfig);
    const imgInfo = wait 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 = this.resizeImage({를 기다립니다.
        경로:왼쪽파일,
        너비:imgInfo.너비,
        높이:imgInfo.높이
      });
      const rightPath = this.resizeImage({를 기다립니다.
        경로:rightFile,
        너비:imgInfo.너비,
        높이:imgInfo.높이
      });
      ProgressBarC.run(index);
      wait this.collapse(index == 1 ? leftPath : targetFilePath,rightPath,targetFilePath,direction);
      fs.unlinkSync(leftPath);
      fs.unlinkSync(rightPath);
    }
    console.log('');
    targetFilePath를 반환합니다.
  }

사용자 정의 행렬 접합

const gm = require('gm');
const fs = require('fs');
const path = require('경로');
const ProgressBar = require('@jyontu/progress-bar');
const {getFileSuffix,getMetadata,resizeImage} = require('./util');
비동기 conCatByMaxit(res){
    const {모양} = 해상도;
    const tmpList = [];
    const barConfig = {
      기간: 모양[0].길이 * 모양.길이,
      현재: 0,
      블록:'█',
      쇼번호: 사실,
      팁:{
          0: '접합...',
          100:'접합 완료'
      },
      색상:'녹색'
    };
    const ProgressBarC = 새로운 ProgressBar(barConfig);
    목표 = '';
    let ExtensionName = getFileSuffix(shape[0][0], ".");
    const imgInfo = wait this.getImgInfo(shape[0][0]);
    for(let i = 0; i < 모양.길이; i++){
      target = res.target + '\' + `targetImg${i}.${extensionName}`;
      for(let j = 1; j < 모양[i].length; j++){
        const leftPath = this.resizeImage({를 기다립니다.
          경로:모양[i][j - 1],
          너비:imgInfo.너비,
          높이:imgInfo.높이
        });
        const rightPath = resizeImage({
          경로:모양[i][j],
          너비:imgInfo.너비,
          높이:imgInfo.높이
        });
        tmpList.push(leftPath,rightPath,target);
        ProgressBarC.run(shape[i].length * i + j);
        wait this.collapse(j == 1 ? leftPath : target,rightPath,target);
      }
      만약(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(대상,newTarget)
    for(let i = 0; i < tmpList.length; i++){
      노력하다{
        fs.unlinkSync(tmpList[i]);
      }잡음(오류){
        // console.error(err);
      }
    }
    console.log('');
    newTarget을 반환합니다.
}

플러그인은

종속성을

사용하여 
const consoleInput = require('@jyontu/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}`);
});

일괄 접합

매개변수 설명

  • 폴더 경로

리소스 파일 디렉터리

  • targetFolder

병합 이미지 저장 디렉터리

  • 방향

이미지 병합 방향, y는 가로, n은 세로

예제 코드

const consoleInput = require('@jyontu/img-concat');
const ImgConcatClass = new ImgConcat();
const p = {
    폴더 경로:'.\img', //리소스 디렉터리 targetFolder:'.\longImg', //병합된 이미지 저장 디렉터리 방향:'y' //접합 방향, y는 가로, n은 세로}
// ImgConcatClass.concatAll(p).then(res=>{ 디렉터리의 모든 이미지를 연결합니다.
    console.log(`접합 완료, 사진 경로는 ${res}`);
})

사용자 정의 접합 행렬

매개변수 설명

  • 모양

이미지 병합 행렬은 각 위치의 이미지 경로를 전달합니다.

병합된
  • 대상

이미지

의 저장 경로에 대한

샘플 코드

const p = {
    모양:[['.\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
관련 기사