फ़ाइल और छवि कैनवास

Question

से बनाया से छवि की तुलना (मैं कोणमापक और चमेली के साथ परीक्षण कर रहा हूँ, और मैं भी 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; 
} 
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(); 
    }); 
    }); 

मेरा प्रश्न यह है कि मैं दो छवियों की तुलना कैसे करूं और सुनिश्चित करूँ कि वे वही हैं? मैंने सोचा कि यूआरआई डेटा काम करेगा लेकिन यह नहीं करता है। मैं वास्तव में छवि-diff का उपयोग करना चाहता हूं लेकिन मुझे यकीन नहीं है कि यह कैसे करें। कृपया मेरी मदद करें!

Answer 1

यहां बताया गया है कि मैं इसे कैसे समाप्त कर रहा हूं। मैंने अपनी परियोजना में नई छवि को सहेजने के लिए fs.writeFile का उपयोग किया और फिर उस छवि को लोड किया और छवि-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

imagediff का एपीआई, imagediff.equal(a,b) फ़ंक्शन है, जो 2 Image ऑब्जेक्ट्स प्राप्त करता है, जो आपको इस मामले में मदद कर सकता है।

यदि यह आपकी मदद नहीं करेगा, तो आप हमेशा उन दोनों में md5 हैश कर सकते हैं और यह सुनिश्चित कर सकते हैं कि चेकसम बराबर हैं, md5, checksum पर अधिक जानकारी।