JavaScript läuft ziemlich langsam in bestimmten Computer

Question

Ich schreibe einen Code, der eine schwarze & White Bild und überprüfen Sie die Pixel in einem bestimmten Bereich (mit einer quadratischen Form) und schließlich die Summe, wie viele von ihnen sind balck, jedes Pixel die Fläche ist in einem For-Schleife wie das nächste Beispiel lesen:

function is_box_black_corner(x,y,width,heigth){ 
    var counter=0; 
    for (var i=x; i<(x+width); i++){ 
     for (var j=y; j<(y+heigth); j++){ 
      if(my_isblack(i,j)==1){ 
       counter++; 
      } 
     } 
    } 

Und wie Sie innerhalb der for-Schleife eine nenne ich eine Funktion, wenn das spezifische Pixel überprüft, ist ziemlich schwarz sehen:

function my_isblack(x,y){ 
     var p = ctx.getImageData(x, y, 1, 1).data; 
     if(p[0]<50 && p[1]<50 && p[2]<50){ 
      return 1; 
     } 
     else{ 
      return 0; 
     } 
    } 

Wie Sie sich vorstellen können, ist dies ein wenig rechnerisch teuer. aber das Problem ist, dass es mit meinem Computer plötzlich viel langsamer als andere (sogar mit schlechtesten Prozessoren) wurde. Ich überprüfe bereits den RAM-Speicher und den Prozessor und keiner von ihnen wurde mehr als 30% verwendet, und der Prozessor vor der Ausführung des Codes ist in der Nähe von 0%.

Und weiß nicht, wo sonst zu suchen. Ich schätze etwas Hilfe, auch wenn jemand weiß, wie dies viel schneller zu tun, wird es sehr

Answer 1

apreciated ich wiht ein Aufruf an getImageData wird versuchen, wie @ASDFGerte vorgeschlagen:

var x=10; var y=10; var width=50; var height=50; 
var counter=0; 
var image; 
var p; //global data 

function init(){ 
    var c = document.getElementById("myCanvas"); 
    var ctx = c.getContext("2d"); 
    ctx.fillStyle = "black"; 
    ctx.fillRect(10, 10, 50, 50);  //this is just a black square 

    image = ctx.getImageData(x, y, width, height);  //Load the image 
    p = image.data;          //get the data of the image 
    is_box_black_corner(); 
}; 

function is_box_black_corner(){ 
    for (var i=x; i<(x+width); i++){ 
     for (var j=y; j<(y+height); j++){ 
      if(my_isblack(i,j)==1){ 
      counter++; 
      } 
     } 
    } 
    console.log(counter); 
}; 

function my_isblack(x,y){ 
    if(p[0]<50 && p[1]<50 && p[2]<50){ //check the global data 
     return 1; 
    } 
    else{ 
     return 0; 
    } 
};