getImageData her zaman dönüyor 0

Question

HTML5 ve Javascript'te iki resmi karşılaştıran bir komut dosyası oluşturmaya çalışıyorum. Ancak bazı garip nedenlerden dolayı, görüntüler her zaman aynıdır.

Ve sorunun ne olabileceğine baktığımızda, her bir pikselin her veri değerinin bazı garip nedenlerden dolayı "0" döndüğünü öğrendim.

Peki, yanlış yaptığım şey hakkında bir fikrin var mı?

Bazı nedenlerden ötürü çok basit bir şeymiş gibi hissediyorum, ama tuval elemanını öğrendim, yani evet. Ben sorunun görüntü verileri muhtemelen Tuval için kullanmayı denediği noktada hazır olmadığını olduğundan şüpheleniyorsanız

function compareImg() { 
    var c1 = document.getElementById("c"); 
    var ctx1 = c1.getContext("2d"); 
    var c2 = document.getElementById("c2"); 
    var ctx2 = c2.getContext("2d"); 

    var match = 0; 

    var img1 = new Image(); 
    img1.src = "cat.jpg"; 
    img1.onload = function() { 
     ctx1.drawImage(img1, 0, 0); 
    } 
    var img2 = new Image(); 
    img2.src = "bird.jpg"; 
    img2.onload = function() { 
     ctx2.drawImage(img2, 0, 0); 
    } 


    for(var x = 0; x<c1.width; x++) { // For each x value 
     for(var y = 0; y<c1.height; y++) { // For each y value 
      var data1 = ctx1.getImageData(x, y, 1, 1); 
      var data2 = ctx2.getImageData(x, y, 1, 1); 
      if (data1.data[0] == data2.data[0] && data1.data[1] == data2.data[1] && data1.data[2] == data2.data[2]) { 
       match++; 
      } 
     } 
    } 
    var pixels = c1.width*c1.height; 
    match = match/pixels*100; 
    document.getElementById("match").innerHTML = match + "%"; 
} 

Answer 1

Karşılaştırma işleminizi gerçekleştirmeden önce resimlerinizin yüklenip çizilmesini beklemezsiniz. Bu deneyin:

var img = new Image; 
img.onload = function(){ 
    ctx1.drawImage(img,0,0); 
    var img = new Image; 
    img.onload = function(){ 
    ctx2.drawImage(img,0,0); 
    // diff them here 
    }; 
    img.src = 'cat.jpg'; 
}; 
img.src = 'cat.jpg'; 

Yukarıda gösterildiği gibi, her zaman set your srcafter your onload gerekir.

Answer 2

:

Bu

benim kodudur. Eğer onload işleyicileri, yani kendiliğinden gelir (muhtemelen) yardım bu kodu ertelemek durumunda:

var img1 = new Image(), count = 2; 
img1.src = "cat.jpg"; 
img1.onload = function() { 
    ctx1.drawImage(img1, 0, 0); 
    checkReadiness(); 
} 
var img2 = new Image(); 
img2.src = "bird.jpg"; 
img2.onload = function() { 
    ctx2.drawImage(img2, 0, 0); 
    checkReadiness(); 
} 

function checkReadiness() { 
    if (--count !== 0) return; 

    for(var x = 0; x<c1.width; x++) { // For each x value 
    for(var y = 0; y<c1.height; y++) { // For each y value 
     var data1 = ctx1.getImageData(x, y, 1, 1); 
     var data2 = ctx2.getImageData(x, y, 1, 1); 
     if (data1.data[0] == data2.data[0] && data1.data[1] == data2.data[1] && data1.data[2] == data2.data[2]) { 
      match++; 
     } 
    } 
    } 
    var pixels = c1.width*c1.height; 
    match = match/pixels*100; 
    document.getElementById("match").innerHTML = match + "%"; 
} 

Tüm yaptığım Kodunuzdaki etrafında bir işlev sarmalayıcı eklemek oldu. Bu fonksiyon eklediğim görüntü sayımı değişkenini ve sadece sıfır olduğunda (yani, her iki görüntü yüklendikten sonra) çalışmayı kontrol eder.

(Bu olabilir hurafe, ama her zaman önce "onload" işleyicisi atamak ben "src" set özelliği. Ben, belki de sadece geçmişte, tarayıcılar işleyicisi eğer çalıştırmak başarısız olabilir bu fikrin var Görüntü zaten önbellekte.)

Şimdi başka bir şey: muhtemelen görüntü verisini bir kez almalı ve sonra geri verilmiş veriler üzerinde yinelemelisiniz. Her bir piksel için "getImageData()" çağırmak, tarayıcının yapması gereken çok iş olacaktır.