API جاوا اسکریپت منبع باز برای مقایسه تصاویر

کتابخانه جاوا اسکریپت برنامه نویسان نرم افزار را قادر می سازد تا دو تصویر را در چندین محیط مانند Node یا مرورگرها و غیره مقایسه کنند.

گاهی اوقات لازم است دو تصویر را با هم مقایسه کنید تا ببینید چقدر شبیه هم هستند. این یک فرآیند بسیار پیچیده است و برای انجام آن نیاز به دانش خوبی دارد. کتابخانه pixelmatch منبع باز می تواند انتخاب بسیار مفیدی برای مقایسه دو تصویر در هر محیطی باشد. از آنجایی که کتابخانه هیچ وابستگی ندارد و روی آرایه‌های تایپ شده خام از داده‌های تصویر کار می‌کند، بنابراین می‌تواند در چندین محیط مانند Node یا مرورگرها و غیره استفاده شود.

پیکسل مچ از نظر اندازه بسیار کوچک و استفاده از آن بسیار ساده است، اما یک کتابخانه مقایسه تصویر در سطح پیکسل بسیار سریع است. این در جاوا اسکریپت نوشته شده است و در ابتدا برای مقایسه اسکرین شات ها در تست ها ایجاد شده است. این کتابخانه از ویژگی هایی مانند تشخیص پیکسل های ضد مستعار و معیارهای تفاوت رنگ ادراکی پشتیبانی می کند.

تشخیص Anti-aliasing یک ویژگی بسیار مفید است زیرا معمولاً مشاهده شده است که ارائه داده های یکسان در برنامه ها، دستگاه ها یا سیستم عامل های مختلف می تواند نتایج کمی متفاوت ایجاد کند. اما بیشتر توصیه می‌شود که از این تفاوت‌ها یا آزمایش‌های کوچک چشم پوشی کنید تا داده‌های معنی‌داری بیشتری به دست آورید.

Previous Next

شروع با pixelmatch

روش توصیه شده برای نصب pixelmatch از طریق NPM است. لطفا از دستور زیر برای نصب آن استفاده کنید.

pixelmatch را از طریق NPM نصب کنید

 npm install pixelmatch 

تست Pixel Match چیست؟

اگر نیاز به مقایسه دو تصویر دارید تا بررسی کنید که آیا تفاوتی بین آنها وجود دارد یا خیر، می توانید از تست مطابقت پیکسل برای این منظور استفاده کنید. دو نوع تصویر می تواند وجود داشته باشد، تصویر اصلی و تصویر اصلاح شده تصویر. می توانید از اپلیکیشنی استفاده کنید که می تواند تصاویر را از اسکرین شات اپلیکیشن شما واکشی کند و پس از آن، از کتابخانه مقایسه تصاویر برای مقایسه این تصاویر و نمایش نتایج استفاده شود.

مقایسه تصاویر از طریق کتابخانه جاوا اسکریپت

کتابخانه منبع باز pixelmatch عملکرد کاملی را برای مقایسه تصاویر در داخل برنامه های جاوا اسکریپت به راحتی ارائه کرده است. توسعه‌دهندگان نرم‌افزار باید داده‌های تصویر را برای مقایسه و همچنین محل خروجی را که نیاز به نوشتن داده‌های تصویر با تفاوت‌ها دارد، ارائه دهند. آنها همچنین باید ابعادی را ارائه کنند که عرض و ارتفاع سه تصویر است. می توانید از گزینه آستانه استفاده کنید که اجازه می دهد تصاویر کمی متفاوت باشند که در برخی موارد می تواند عالی باشد. لطفاً توجه داشته باشید که کتابخانه pixelmatch نیاز دارد که تصاویر باید در اندازه‌های یکسان باشند.

مقایسه آنلاین تصاویر از طریق JavaScript API

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

مقایسه تصاویر در Node.js از طریق pixelmatch

 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));
 فارسی