Confronta immagini da file e immagine creata dalla tela

Question

(sto testando con goniometro e Jasmine, e ho incluso anche image-diff e linfonodo tela nel mio progetto.)

ho bisogno di confrontare due immagini e fare certo che sono uguali Uno è salvato nella mia struttura di file e l'altro è creato dalla tela. Sono in grado di convertire la tela in immagine e anche caricare l'immagine dal file. Ecco quello che ho:

var imagediff = require('../node_modules/js-imagediff/js/imagediff.js'); 
var Canvas = require('canvas'); 
var fs = require('fs'); 
var path = require('path'); 
beforeEach(function() { 
    jasmine.addMatchers(imagediff.jasmine); 
}); 
function loadImage (url, callback) { 
    var image; 
    fs.readFile(url, function (error, data) { 
    if (error) throw error; 
    image = new Canvas.Image(); 
    image.onload = function() { 
     callback(image); 
    }; 
    image.src = data; 
    }); 
    return image; 
} 
it('should work', function() { 
//executeScript is needed to get the canvas element and convert it 
browser.driver.executeScript(function() { 
    var can = document.querySelector('#workspace-canvas'); 
    var ctx = can.getContext("2d"); 
    var data = can.toDataURL("image/png"); 
    var img = new Image(); 
    img.src = data; 
    //this code below shows that the image was converted properly 
    // var link = document.createElement('a'); 
    // link.href = img.src; 
    // link.download = 'image1.png'; 
    // link.click(); 
    return data; 
    }).then(function(result) { 
    newData = result; 
    var imgPath = path.join(__dirname, './images/image1.png'); 
    loadImage(imgPath, function(image) { 
     console.log('loadImage'); 
     var canvas = new Canvas(); 
     canvas.width = image.width; 
     canvas.height = image.height; 
     var ctx = canvas.getContext("2d"); 
     ctx.drawImage(image, 0, 0); 
     var data = canvas.toDataURL("image/png"); 
     oldData = data; 
     //TODO: do a comparison here! 
     done(); 
    }); 
    }); 

mia domanda è come faccio a confrontare le due immagini e assicurarsi che siano tutti uguali? Ho pensato che confrontare l'URI dei dati avrebbe funzionato, ma non è così. Mi piacerebbe davvero usare image-diff, ma non sono sicuro di come farlo. Mi aiuti per favore!

Answer 1

Ecco come ho finito per farlo. Ho usato fs.writeFile per salvare la nuova immagine nel mio progetto e quindi caricare quell'immagine e confrontare entrambe le immagini con image-diff.

var imagediff = require('../node_modules/js-imagediff/js/imagediff.js'); 
var Canvas = require('canvas'); 
var fs = require('fs'); 
var path = require('path'); 
beforeEach(function() { 
    jasmine.addMatchers(imagediff.jasmine); 
}); 
function loadImage (url, callback) { 
    var image; 
    fs.readFile(url, function (error, data) { 
    if (error) throw error; 
    image = new Canvas.Image(); 
    image.onload = function() { 
     callback(image); 
    }; 
    image.src = data; 
    }); 
    return image; 
} 
function writeFile (buffer, fileName) { 
    fs.writeFile(fileName, buffer, function (err) { 
    if(err) { console.log('ERROR', err); } 
    }); 
} 
function dataURItoBuffer (dataURI, fileName) { 
    var byteString = dataURI.split(',')[1]; 
    var buffer = new Buffer(byteString, 'base64'); 
    writeFile(buffer, fileName); 
} 
it('should work', function() { 
    //fileName is defined somewhere else 
    var filePath = './images' + fileName + '.png'; 
    //executeScript is needed to get the canvas element and convert it 
    browser.driver.executeScript(function() { 
    var can = document.querySelector('#workspace-canvas'); 
    var ctx = can.getContext("2d"); 
    var data = can.toDataURL("image/png"); 
    return data; 
    }).then(function(result) { 
    dataURItoBuffer(result, fileName); 
    var oldImagePath = path.join(__dirname, './images/' + fileName + '.png'); 
    var newImagePath = path.join(__dirname, filePath); 
    loadImage(oldImagePath, function(image) { 
     image1 = image; 
     loadImage(newImagePath, function(image){ 
     image2 = image; 
     expect(imagediff.equal(image1, image2, 50)).toBeTruthy(); // 50 pixel tolerance 
     done(); 
     }); 
    }); 
    }); 
}); 

Answer 2

L'API di imagediff, ha la funzione imagediff.equal(a,b), che ottiene 2 oggetti Image, che in questo caso dovrebbero essere di aiuto.

Se questo non ti aiuta, puoi sempre md5 hash entrambi e assicurarti che i checksum siano uguali, maggiori informazioni su questo md5, checksum.