افتح المصدر JavaScript API لمقارنة الصور

الشروع في العمل مع pixelmatch

الطريقة الموصى بها لتثبيت pixelmatch هي عبر NPM. الرجاء استخدام الأمر التالي لتثبيته.

 npm install pixelmatch 

ما هو اختبار مطابقة البكسل؟

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

مقارنة الصور عبر مكتبة جافا سكريبت

توفر pixelmatch للمكتبة مفتوحة المصدر وظائف كاملة لمقارنة الصور داخل تطبيقات JavaScript بسهولة. يحتاج مطورو البرامج إلى توفير بيانات الصورة للمقارنة بالإضافة إلى مكان الإخراج حيث يحتاج إلى كتابة بيانات الصورة مع الاختلافات. يحتاجون أيضًا إلى توفير البعد الذي يمثل عرض الصور الثلاث وارتفاعها. يمكنك استخدام خيار الحد الذي يسمح للصور أن تكون مختلفة قليلاً ، والتي يمكن أن تكون رائعة في بعض الحالات. يرجى ملاحظة أن مكتبة pixelmatch تحتاج إلى أن تكون الصور بنفس الأحجام.

 const img1 = img1Context.getImageData(0, 0, width, height);
const img2 = img2Context.getImageData(0, 0, width, height);
const diff = diffContext.createImageData(width, height);
pixelmatch(img1.data, img2.data, diff.data, width, height, {threshold: 0.1});
diffContext.putImageData(diff, 0, 0);

 const fs = require('fs');
const PNG = require('pngjs').PNG;
const pixelmatch = require('pixelmatch');
const img1 = PNG.sync.read(fs.readFileSync('img1.png'));
const img2 = PNG.sync.read(fs.readFileSync('img2.png'));
const {width, height} = img1;
const diff = new PNG({width, height});
pixelmatch(img1.data, img2.data, diff.data, width, height, {threshold: 0.1});
fs.writeFileSync('diff.png', PNG.sync.write(diff));