ssim.js

import { createCanvas, loadImage } from 'canvas'; import ssim from 'ssim.js'; import { readFileSync } from 'fs'; // Load images (replace with actual image paths or buffers) // In a browser, loadImage would be from the DOM, e.g., an <img> element. // For Node.js, we simulate with `canvas` library or direct buffer. async function compareImages() { try { // For this example, we create dummy images or load from disk. // In a real scenario, these would be actual image buffers/data. const imgBuffer1 = readFileSync('./image1.png'); // Ensure you have image1.png and image2.png const imgBuffer2 = readFileSync('./image2.png'); const image1 = await loadImage(imgBuffer1); const image2 = await loadImage(imgBuffer2); // ssim.js expects image data in a specific format (e.g., ImageData or a compatible buffer). // Here we convert the loaded image to a format ssim.js can process. // The `canvas` library helps create a compatible buffer. const canvas1 = createCanvas(image1.width, image1.height); const ctx1 = canvas1.getContext('2d'); ctx1.drawImage(image1, 0, 0, image1.width, image1.height); const imageData1 = ctx1.getImageData(0, 0, image1.width, image1.height); const canvas2 = createCanvas(image2.width, image2.height); const ctx2 = canvas2.getContext('2d'); ctx2.drawImage(image2, 0, 0, image2.width, image2.height); const imageData2 = ctx2.getImageData(0, 0, image2.width, image2.height); const { mssim, performance } = ssim(imageData1, imageData2); console.log(`Structural Similarity (MSSIM): ${mssim}`); console.log(`Calculation Performance: ${performance}ms`); if (mssim > 0.95) { console.log('The images are very similar.'); } else { console.log('The images show significant differences.'); } } catch (error) { console.error('Error comparing images:', error); console.log('Please ensure you have two image files (e.g., image1.png, image2.png) in the same directory and have installed `canvas` (`npm install canvas`).'); } } compareImages();