2017-07-07 111 views
1

我編寫了一個黑色代碼&白色圖像並檢查特定區域(具有正方形形狀)中的像素,最後返回其中有多少個像素的總和,每個像素該區域的讀入到對於像下面的例子循環:在特定計算機上運行速度非常慢的JavaScript

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++; 
      } 
     } 
    } 

正如你可以在裏面的看到for循環我認爲這種驗證的功能,如果特定像素是相當黑:

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

你可以想象,這是一點點計算量很大。但問題是,在我的電腦上,突然變得比別人慢(即使是最差的處理器)。我已經檢查了RAM內存和處理器,並且它們都沒有被使用超過30%,並且運行代碼之前的處理器接近0%。

而且不知道在哪裏看。我很欣賞一些幫助,另外如果有人知道如何做到這一點更快將高度apreciated

+3

調用'getImageData'爲每當圖像總是相同時,像素看起來相當不必要。不確定畫布是否有一些優化,但是有疑問。與電腦之間的差異無關。 – ASDFGerte

+0

你們每個人使用相同的瀏覽器嗎?這可能會比電腦產生更大的影響,除非電腦的速度異常緩慢。 – Carcigenicate

+0

我爲所有人使用chrome。我甚至只是unistall並再次安裝它,但沒有工作 – Javier

回答

0

我會嘗試一個室內用調用getImageData的建議通過@ASDFGerte:

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; 
    } 
}; 
相關問題