Porównaj obraz z pliku i obrazu utworzonego z płótna

Question

(mam testowanie z Kątomierz i jaśminu, a ja również image-diff i węzła płótnie w moim projekcie.)

trzeba porównać dwa obrazy i uczynić na pewno są takie same. Jedna jest zapisana w mojej strukturze plików, a druga jest tworzona z płótna. Jestem w stanie przekonwertować płótno na obraz, a także załadować obraz z pliku. Oto, co mam:

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

Moje pytanie brzmi: jak porównać dwa obrazy i upewnić się, że są one takie same? Myślałem, że porównanie danych URI będzie działało, ale nie działa. Naprawdę chciałbym użyć obrazu-różnicy, ale nie jestem pewien, jak to zrobić. Proszę pomóż mi!

Answer 1

Oto jak to zrobiłem. Użyłem fs.writeFile, aby zapisać nowy obraz do mojego projektu, a następnie wczytać ten obraz i porównać oba obrazy ze zmianą obrazu.

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

Interfejs API z imagediff, ma funkcję imagediff.equal(a,b), która pobiera 2 Image obiektów, co powinno pomóc w tym przypadku.

Jeśli to ci nie pomoże, zawsze możesz użyć skrótu md5 i upewnić się, że sumy kontrolne są równe, więcej informacji na ten temat: md5, checksum.