دعونا نتحدث عن كيفية استخدام العقدة لتنفيذ مكون إضافي لربط الصور

عادةً عندما نقوم بربط الصور، نستخدم عادةً PS أو أدوات معالجة الصور الأخرى لمعالجتها وتوليفها. هذه المرة هناك حاجة إلى ربط الصور، وآمل أن نتمكن من استخدام التعليمات البرمجية مباشرة للربط، لذلك توجد مثل هذه الأداة. شنطة.

تأثير المكون الإضافي

من خلال هذا البرنامج الإضافي، يمكننا تنفيذ العمليات التالية على الصور:

1. لصق صورتين أفقيًا

كما يلي، لدينا صورتان، والآن يمكننا استخدام هذه الأداة لربطهما في صورة واحدة

n1.jpg

• رمز

n2.jpg

const consoleInput = require('@jyeontu/img-concat');
const ImgConcatClass = new ImgConcat();
ثابت p1 = {
    اليسار:'.\img\n1.jpg'،
    اليمين:'.\img\n2.jpg'،
    الهدف: '.\longImg'
}
// قم بلصق صورتين أفقيًا ImgConcatClass.collapseHorizontal(p1).then(res=>{
    console.log("اكتمل الربط، مسار الصورة هو ${res}`);
})؛

• تأثير

2. الربط العمودي بين الصورتين

لا يزال هو الصورتين أعلاه، وسوف نقوم بربطهما عموديًا باستخدام

• الكود

const consoleInput = require('@jyeontu/img-concat');
const ImgConcatClass = new ImgConcat();
ثابت p1 = {
    اليسار:'.\img\n1.jpg'،
    اليمين:'.\img\n2.jpg'،
    الهدف: '.\longImg'
}
// انضم إلى صورتين عموديًا ImgConcatClass.collapseVertical(p1).then(res=>{
    console.log("اكتمل الربط، مسار الصورة هو ${res}`);
})؛

• تأثير

3. الربط الدفعي

يمكننا أيضًا لصق جميع الصور الموجودة في الدليل مباشرةً في صورة طويلة، كما هو موضح أدناه، ونريد الآن لصق جميع الصور الموجودة في الدليل:

3.1 الربط الأفقي

• لرمز

const consoleInput = require('@jyeontu/img-concat');
const ImgConcatClass = new ImgConcat();
ثابت ع = {
    FolderPath:'.\img', // دليل الموارد targetFolder: '.\longImg', // اتجاه دليل تخزين الصور المحول: 'y' // اتجاه الربط، y أفقي، n عمودي}
// قم بتسلسل جميع الصور في الدليل ImgConcatClass.concatAll(p).then(res=>{
    console.log("اكتمل الربط، مسار الصورة هو ${res}`);
})

• تأثير

• رمز

الصورة الطويلة للربط عموديًا

const consoleInput = require('@jyeontu/img-concat');
const ImgConcatClass = new ImgConcat();
ثابت ع = {
    FolderPath:'.\img', // دليل الموارد targetFolder: '.\longImg', // اتجاه دليل تخزين الصور المحول: 'n' // اتجاه الربط، y أفقي، n عمودي}
// قم بتسلسل جميع الصور في الدليل ImgConcatClass.concatAll(p).then(res=>{
    console.log("اكتمل الربط، مسار الصورة هو ${res}`);
})

• تأثير

4. تخصيص مصفوفة الربط،

يمكننا أيضًا تحديد مصفوفة ربط الصور بأنفسنا. shape عبارة عن مصفوفة ثنائية الأبعاد وتحدد الصور في كل موضع، والتفاصيل هي كما يلي:

• code

const consoleInput = require('@jyeontu/img -concat');
const ImgConcatClass = new ImgConcat();
ثابت ع = {
    الشكل: [['.\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}`);
})؛

• تأثير

يقوم البرنامج الإضافي بتنفيذ

الربط بين الصور الفردية

ويستخدم GraphicsMagick لربط الصور

const gm = require('gm');
انهيار (يسار، يمين، الهدف، العلم = صحيح) { 
    إرجاع وعد جديد ((ص) => {
      جم (يسار).append (يمين، علم).write (الهدف، يخطئ => {
            if(err) console.log(err);
            ص ()؛
      })
    })
}

للربط الدفعي

• ، واضبط دقة الصورة وحجمها.
• استخدم fs للحصول على قائمة الملفات.
• استخدم المسار لربط مسارات الملفات.
• استخدم @jyeontu/progress-bar لطباعة شريط

التقدم جم = يتطلب('جم');
const fs = require('fs');
مسار ثابت = يتطلب('مسار');
constprogressBar = require('@jyeontu/progress-bar');
const {getFileSuffix,getMetadata,resizeImage} = require('./util');

doConcatAll = async(folderPath,targetFolder,direction) => { 
    Let fileList = fs.readdirSync(folderPath);
    fileList.sort((أ, ب) => {
      إرجاع path.basename(a) - path.basename(b);
    });
    const ExtensionName = getFileSuffix(fileList[0], ".");
    Let targetFilePath = path.join(targetFolder, new Date().getTime() + '.' +extensionName);
    تكوين شريط ثابت = {
      المدة: fileList.length - 1،
      الحالي: 0،
      كتلة:'█'،
      رقم العرض: صحيح،
      نصيحة:{
          0: "الربط..."،
          100:'اكتمل الربط'
      },
      اللون:'أخضر'
    };
    دعprogressBarC = newprogressBar(barConfig);
    const imgInfo = انتظار this.getImgInfo(path.join(folderPath, fileList[0]));
    لـ (دع الفهرس = 1؛ فهرس < fileList.length؛ فهرس ++) {
      Let leftFile = path.join(folderPath, fileList[index - 1]);
      Let rightFile = path.join(folderPath, fileList[index]);
      const leftPath = انتظر this.resizeImage({
        المسار: الملف الأيسر،
        العرض:imgInfo.width،
        الارتفاع: imgInfo.height
      });
      const rightPath = انتظر this.resizeImage({
        المسار: الملف الصحيح،
        العرض:imgInfo.width،
        الارتفاع: imgInfo.height
      });
      progressBarC.run(index);
      انتظر هذا.collapse(index == 1 ? leftPath : targetFilePath,rightPath,targetFilePath,direction);
      fs.unlinkSync(leftPath);
      fs.unlinkSync(rightPath);
    }
    console.log('');
    إرجاع مسار الملف المستهدف؛
  }

ربط المصفوفة المخصصة

const gm = require('gm');
const fs = require('fs');
مسار ثابت = يتطلب('مسار');
constprogressBar = require('@jyeontu/progress-bar');
const {getFileSuffix,getMetadata,resizeImage} = require('./util');
غير متزامن conCatByMaxit(res){
    ثابت {الشكل} = الدقة؛
    const tmpList = [];
    تكوين شريط ثابت = {
      المدة: الشكل[0].الطول * الشكل.الطول،
      الحالي: 0،
      كتلة:'█'،
      رقم العرض: صحيح،
      نصيحة:{
          0: "الربط..."،
          100:'اكتمل الربط'
      },
      اللون:'أخضر'
    };
    constprogressBarC = newprogressBar(barConfig);
    دع الهدف = '';
    Let ExtensionName = getFileSuffix(shape[0][0], ".");
    const imgInfo = انتظار this.getImgInfo(shape[0][0]);
    ل(دع i = 0; أنا <الشكل. الطول; i++){
      target = res.target + '\' + `targetImg${i}.${extensionName}`;
      for(let j = 1; j <الشكل[i].length; j++){
        const leftPath = انتظر this.resizeImage({
          المسار: الشكل [i] [ي - 1]،
          العرض:imgInfo.width،
          الارتفاع: imgInfo.height
        });
        const rightPath = انتظار تغيير الحجم({
          المسار: الشكل [i] [ي]،
          العرض:imgInfo.width،
          الارتفاع: imgInfo.height
        });
        tmpList.push(leftPath,rightPath,target);
        progressBarC.run(shape[i].length * i + j);
        انتظر this.collapse(j == 1 ? leftPath : target,rightPath,target);
      }
      إذا (ط> 0) {
          انتظر 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('');
    إرجاع هدف جديد؛
}

يستخدم المكون الإضافي

التبعيات لتقديم

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

)

;

• ​

​

• ​

​

• ​

​

​

​
const ImgConcatClass = new ImgConcat();
ثابت ع = {
    FolderPath:'.\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