Open Source JavaScript API להשוואת תמונות

תחילת העבודה עם pixelmatch

הדרך המומלצת להתקנת pixelmatch היא באמצעות NPM. אנא השתמש בפקודה הבאה כדי להתקין אותו.

 npm install pixelmatch 

מהי בדיקת התאמה של פיקסלים?

אם אתה צריך להשוות בין שתי תמונות כדי לבדוק אם יש הבדל ביניהם, אתה יכול להשתמש בבדיקת התאמה של פיקסלים למטרה זו. יכולים להיות שני סוגים של תמונות, התמונה המקורית והתמונה ששונתה התמונה. אתה יכול להשתמש באפליקציה שיכולה להביא תמונות מצילום המסך של האפליקציה שלך ולאחר מכן, ניתן להשתמש בספריית השוואת התמונות כדי להשוות את התמונות הללו ולהציג את התוצאות.

השוואת תמונות באמצעות ספריית JavaScript

ספריית הקוד הפתוח 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));