ホーム>Web デザインのチュートリアル>JavaScript チュートリアル

ノードを使用して画像スプライシング プラグインを実装する方法について話しましょう

著者：Eve Cole 更新時間：2022-08-04 14:50:57
ノードを使用して画像スプライシング プラグインを実装するにはどうすればよいですか?次の記事では、node を使用して画像結合プラグインをカプセル化する方法を紹介します。お役に立てば幸いです。

通常、写真を繋ぎ合わせる場合はPSなどの画像処理ツールを使って加工・合成することが多いのですが、今回は画像を繋ぎ合わせる必要があり、直接コードを使って繋ぎ合わせられればと思っているので、そのようなツールがあります。バッグ。

プラグイン効果

このプラグインを介して、画像に対して次の操作を実行できます。

1.

次のように 2 つの画像を水平に結合します。このような 2 つの画像があるので、このツールを使用してそれらを 1 つに結合できます。

1.png

n1.jpg

2.png

n2.jpg

  • コード
const consoleInput = require('@jyeontu/img-concat');
const ImgConcatClass = 新しい ImgConcat();
const p1 = {
    左: '.\img\n1.jpg',
    右: '.\img\n2.jpg'、
    ターゲット:'.\longImg'
}
// 2 つの画像を水平方向に結合 ImgConcatClass.collapsehorizo​​ntal(p1).then(res=>{
    console.log(`スプライシングが完了しました。画像のパスは ${res}`);
}）;
  • 効果

3.png

2. 2 つの画像を垂直に結合するのは、

上記の 2 つの画像のままです。

const consoleInput = require('@jyeontu/img-concat');
  • というコード
を使用してそれらを垂直に結合し
ます。
const ImgConcatClass = 新しい ImgConcat();
const p1 = {
    左: '.\img\n1.jpg',
    右: '.\img\n2.jpg'、
    ターゲット:'.\longImg'
}
// 2 つの画像を垂直に結合 ImgConcatClass.collapseVertical(p1).then(res=>{
    console.log(`スプライシングが完了しました。画像のパスは ${res}`);
}）;
  • 効果

4.png

3. バッチ結合

以下に示すように、ディレクトリ内のすべての画像を長い画像に直接バッチ結合することもできます。

5.png

3.1 長い画像
  • コード

の水平結合

const consoleInput = require('@jyeontu/img-concat');
const ImgConcatClass = 新しい 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('@jyeontu/img-concat');
const ImgConcatClass = 新しい ImgConcat();
const p = {
    folderPath:'.\img', //リソースディレクトリ targetFolder:'.\longImg', //変換画像格納ディレクトリ方向:'n' //結合方向、yは横、nは縦}
// ディレクトリ内のすべての画像を連結します ImgConcatClass.concatAll(p).then(res=>{
    console.log(`スプライシングが完了しました。画像のパスは ${res}`);
}）
  • 効果

7.png

4. スプライシング マトリックスをカスタマイズします。

画像のスプライシング マトリックスを自分で定義することもできます。 shape 2 次元配列であり、各位置に画像を定義します。

  • code
const consoleInput = require('@jyeontu/img)。 -連結');
const ImgConcatClass = 新しい 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) { 
    return new Promise((r) => {
      gm(left).append(right,flag).write(target, err => {
            if(err) console.log(err);
            r();
      })
    })

バッチ結合のための

画像情報を取得するには
、
sharp.js を使用します
。
  • ファイル
  • リスト
  • を取得するには、 fsを使用します。
  • 進行状況バーを出力するには、 @jyeontu/progress-barを使用します。
gm = require('gm');
const fs = require('fs');
const パス = require('パス');
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) => {
      パス.ベース名(a) - パス.ベース名(b)を返します。
    });
    const extensionName = getFileSuffix(fileList[0], ".");
    let targetFilePath = path.join(targetFolder, new Date().getTime() + '.' + extensionName);
    const barConfig = {
      期間: fileList.length - 1、
      現在: 0、
      ブロック: '█'、
      showNumber: true、
      ヒント：{
          0: 'スプライシング中...',
          100:「スプライシング完了」
      }、
      色:「緑」
    };
    let progressBarC = 新しい progressBar(barConfig);
    const imgInfo = await this.getImgInfo(path.join(folderPath, fileList[0]));
    for (let インデックス = 1; インデックス < fileList.length; インデックス++) {
      let leftFile = path.join(folderPath, fileList[index - 1]);
      let rightFile = path.join(folderPath, fileList[index]);
      const leftPath = await this.resizeImage({
        パス:左ファイル、
        幅:imgInfo.width、
        高さ:imgInfo.height
      });
      const rightPath = await this.resizeImage({
        パス:右ファイル、
        幅:imgInfo.width、
        高さ:imgInfo.height
      });
      progressBarC.run(インデックス);
      await this.collapse(index == 1 ? leftPath : targetFilePath,rightPath,targetFilePath,direction);
      fs.unlinkSync(leftPath);
      fs.unlinkSync(rightPath);
    }
    console.log('');
    ターゲットファイルパスを返します。
  カスタム

行列のスプライシング

const gm = require('gm');
const fs = require('fs');
const パス = require('パス');
const progressBar = require('@jyeontu/progress-bar');
const {getFileSuffix,getMetadata,resizeImage} = require('./util');
非同期 conCatByMaxit(res){
    const {形状} = 解像度;
    const tmpList = [];
    const barConfig = {
      期間: 形状[0].長さ * 形状.長さ,
      現在: 0、
      ブロック: '█'、
      showNumber: true、
      ヒント：{
          0: 'スプライシング中...',
          100:「スプライシング完了」
      }、
      色:「緑」
    };
    const progressBarC = 新しい progressBar(barConfig);
    ターゲット = '';
    let extensionName = getFileSuffix(shape[0][0], ".");
    const imgInfo = await 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 = await this.resizeImage({
          パス:形状[i][j - 1]、
          幅:imgInfo.width、
          高さ:imgInfo.height
        });
        const rightPath = サイズ変更を待ちます({
          パス:形状[i][j]、
          幅:imgInfo.width、
          高さ: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(ターゲット,新しいターゲット)
    for(let i = 0; i < tmpList.length; i++){
      試す{
        fs.unlinkSync(tmpList[i]);
      }キャッチ(エラー){
        // console.error(err);
      }
    }
    console.log('');
    新しいターゲットを返します。

このプラグインは

依存関係を

使用して
const consoleInput = require('@jyeontu/img-concat');
を導入します
。
const ImgConcatClass = new ImgConcat();

2枚の画像を水平に結合

パラメータ説明

  • 左

画像パス

  • 右

右画像パス

ターゲット
  • 合成

画像保存ディレクトリ

コード例

const p1 = {
    左: '.\img\n1.jpg',
    右: '.\img\n2.jpg'、
    ターゲット:'.\longImg'
}
// 2 つの画像を水平方向に結合 ImgConcatClass.collapsehorizo​​ntal(p1).then(res=>{
    console.log(`スプライシングが完了しました。画像のパスは ${res}`);
});

2枚の画像を垂直に結合する

パラメータの説明

  • 左

左画像パス

  • 右

右画像パス

  • ターゲット

合成画像保存

ディレクトリ コード例

const p1 = {
    左: '.\img\n1.jpg',
    右: '.\img\n2.jpg'、
    ターゲット:'.\longImg'
}
// 2 つの画像を垂直に結合 ImgConcatClass.collapseVertical(p1).then(res=>{
    console.log(`スプライシングが完了しました。画像のパスは ${res}`);
});

バッチスプライシング

パラメータの説明

  • folderPath

リソースファイルディレクトリ

  • targetFolder

結合画像保存ディレクトリ

  • 方向

画像結合方向、y は水平、n は垂直

コード例

const consoleInput = require('@jyeontu/img-concat');
const ImgConcatClass = 新しい ImgConcat();
const p = {
    folderPath:'.\img', //リソースディレクトリ targetFolder:'.\longImg', //結合画像格納ディレクトリ Direction:'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
関連記事