tuval

Question

oluşturulan dosya ve görüntüden görüntüyü karşılaştırın (ı Açı ölçer ve Yasemin ile test ediyorum ve ben de image-diff ve projeme düğüm-tuvali ekledik.)

ben iki resim karşılaştırmak ve yapmak gerekir aynı oldukları kesin. Biri dosya yapımda kaydedilirken diğeri tuvalden oluşturulur. Tuvali görüntüye dönüştürebilir ve ayrıca görüntüyü dosyadan yükleyebilirim. İki görüntü karşılaştırmak ve aynı olduğundan emin olun nasıl

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

Sorum şu: Burada ne var? URI veri çalışmasının karşılaştırılacağını düşündüm ama değil. Resim-diff kullanmayı gerçekten çok isterdim ama nasıl yapacağımı bilmiyorum. Lütfen bana yardım et!

Answer 1

Yaptığım işi bitirdim. Yeni görüntüyü projeme kaydetmek için fs.writeFile'u kullandım ve daha sonra bu görüntüyü yükledim ve her iki görüntüyü de görüntü farklılığıyla karşılaştırdım.

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 API'si, bu durumda size yardımcı olması gereken 2 Image nesnesini alan imagediff.equal(a,b) işlevine sahiptir.

Eğer bu size yardımcı olmazsa, her ikisini de md5'e ekleyebilir ve sağlama toplamlarının eşit olduğundan emin olabilirsiniz, bu md5, checksum hakkında daha fazla bilgi edinebilirsiniz.