Open Source JavaScript API เพื่อเปรียบเทียบรูปภาพ
JavaScript Library ช่วยให้โปรแกรมเมอร์ซอฟต์แวร์สามารถเปรียบเทียบสองภาพในหลายสภาพแวดล้อม เช่น โหนดหรือเบราว์เซอร์ เป็นต้น
บางครั้งจำเป็นต้องเปรียบเทียบภาพสองภาพเพื่อดูว่ามีความคล้ายคลึงกันอย่างไร เป็นกระบวนการที่ซับซ้อนมากและต้องใช้ความรู้ที่ดีในการทำให้สำเร็จ ไลบรารี pixelmatch แบบโอเพ่นซอร์สอาจเป็นทางเลือกที่มีประโยชน์มากสำหรับการเปรียบเทียบภาพสองภาพในสภาพแวดล้อมใดๆ เนื่องจากไลบรารีไม่มีการพึ่งพาและทำงานบนอาร์เรย์ของข้อมูลรูปภาพที่พิมพ์แบบดิบ ดังนั้นจึงสามารถใช้ได้ในหลายสภาพแวดล้อม เช่น โหนดหรือเบราว์เซอร์ เป็นต้น
pixelmatch มีขนาดเล็กมากและใช้งานง่ายมาก แต่เป็นไลบรารีเปรียบเทียบภาพระดับพิกเซลที่รวดเร็วมาก มันเขียนด้วยจาวาสคริปต์และสร้างขึ้นครั้งแรกเพื่อเปรียบเทียบภาพหน้าจอในการทดสอบ ไลบรารีรองรับคุณสมบัติต่างๆ เช่น การตรวจจับพิกเซลแบบลดรอยหยักและการวัดความแตกต่างของสีที่รับรู้
การตรวจจับการลบรอยหยักเป็นคุณลักษณะที่มีประโยชน์มาก เนื่องจากโดยปกติมีการสังเกตว่าการแสดงข้อมูลเดียวกันบนแอปพลิเคชัน อุปกรณ์ หรือระบบปฏิบัติการที่แตกต่างกัน สามารถสร้างผลลัพธ์ที่แตกต่างกันเล็กน้อย แต่โดยส่วนใหญ่ ขอแนะนำให้เพิกเฉยต่อความแตกต่างเล็กๆ น้อยๆ หรือการทดสอบเหล่านี้เพื่อเก็บข้อมูลที่มีความหมายมากขึ้น
เริ่มต้นใช้งาน pixelmatch
วิธีที่แนะนำในการติดตั้ง pixelmatch คือผ่าน NPM โปรดใช้คำสั่งต่อไปนี้เพื่อติดตั้ง
ติดตั้ง pixelmatch ผ่าน NPM
npm install pixelmatch การทดสอบการจับคู่พิกเซลคืออะไร
หากคุณต้องการเปรียบเทียบภาพสองภาพเพื่อตรวจสอบว่ามีความแตกต่างกันหรือไม่ คุณสามารถใช้การทดสอบการจับคู่พิกเซลเพื่อจุดประสงค์นี้ได้ รูปภาพสามารถมีได้สองประเภท ได้แก่ รูปภาพต้นฉบับ และรูปภาพที่ แก้ไข รูปภาพ คุณสามารถใช้แอปพลิเคชันที่สามารถดึงรูปภาพจากภาพหน้าจอของแอปของคุณ และหลังจากนั้น คุณสามารถใช้ไลบรารีเปรียบเทียบรูปภาพเพื่อเปรียบเทียบรูปภาพเหล่านี้และแสดงผลลัพธ์ได้
การเปรียบเทียบภาพผ่าน JavaScript Library
pixelmatch ของไลบรารีโอเพนซอร์สมีฟังก์ชันที่สมบูรณ์สำหรับการเปรียบเทียบภาพภายในแอปพลิเคชัน JavaScript ได้อย่างง่ายดาย นักพัฒนาซอฟต์แวร์จำเป็นต้องจัดเตรียมข้อมูลภาพสำหรับการเปรียบเทียบ รวมถึงตำแหน่งเอาต์พุตที่ต้องการเขียนข้อมูลภาพด้วยความแตกต่าง พวกเขายังต้องระบุขนาดซึ่งเป็นความกว้างและความสูงของภาพทั้งสาม คุณสามารถใช้ตัวเลือกธรณีประตูที่ช่วยให้ภาพมีความแตกต่างกันเล็กน้อย ซึ่งดีมากในบางกรณี โปรดทราบว่าไลบรารี 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 ผ่านพิกเซล
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));
