canvas getImageData возвращает слишком много пикселей

Question

Я создаю мобильную веб-игру, которая позволяет пользователю пронести по экрану, чтобы очистить его. Я пытаюсь написать умную функцию, которая обнаруживает, когда почти весь холст прозрачен.

У меня есть интервал, который вызывает функцию ниже каждой секунды, чтобы выполнить проверку. То, как это должно работать, заключается в том, что я беру сектор холста шириной 20 пикселей и высок, как холст.

Эта функция должна работать довольно гладко, но по какой-либо причине функция getImageData возвращается к множеству пикселей. Мой сектор всегда имеет ширину 20 пикселей и имеет одинаковую высоту, поэтому он должен возвращать одинаковое количество пикселей каждый раз. Конечно, поскольку getImageData возвращает большее и большее число, мой цикл становится медленнее и медленнее.

Кто-нибудь знает, что вызывает это? Я неправильно понял функцию getImageData так, как она работает?

isCanvasTransparent: function (fromX, toX, currentIteration) { 

     if(currentIteration < this.clearedIterations) { // If a sector is already clear, we dont need to check it again 
      this.isCanvasTransparent(fromX + 20, toX + 20, currentIteration + 1); 
      return; 
     } else { 
      var data = this.context.getImageData(fromX, 0, toX, parseInt(this.canvas.style.width)).data; 
      var counter = 0; 
      var i = 0; 

      // For some reason, the length increases, but the diff between fromX and toX is always 20 
      console.log(data.length); 

      for(i=0;i<(data.length);i+=4) { 
       if(data[i+3]!==0){ 
        counter++; 
        // I stop iterating, since there are too many non transparent pixels 
        if(counter > 10) { 
         break; 
        } 
       } 
      } 

      // I accept that 10 pixels in each sector is not transparent 
      if((counter < 10) && !this.alerted) { 
       this.clearedIterations++; // Here we increase clearedIterations, since this sector is clear 

       // There are no more iterations, so we are done 
       if(currentIteration === this.maxIterations) { 
        // this is the interval that calls isCanvasTransparent(0, 20, 0) 
        // in the first place. The interval is called each second. But as soon the whole view 
        // is transparent, we clear it, so that isCanvasTransparent is no longer called 
        clearInterval(this.checkCanvasTimeout); 
        this.alerted = true; 
        TouchHelpers.removeTouchEvents(); 
        this.levelCompleted(); 
        return; 
       } else { 
        // this sector is clear, but we need to check the next one, since we are not at the end 
        this.isCanvasTransparent(fromX + 20, toX + 20, currentIteration + 1); 
       } 
      } 
     } 
    }, 

Answer 1

Это не уверен, не видя, как вы установили fromX/Tox, но, похоже, вы не давая getImageData правильные параметры.

context.getImageData имеет следующие параметры:

• х: начиная Координата для извлечения,
• у: начиная координату для извлечения,
• ширина: извлечь блок это много пикселей в ширину,
• высота: извлечь блок это много пикселей высокий

[Дополнение: bas ред на дополнительной информации]

Если вы хотите равные по размеру куски пиксельных данных, ваш первый звонок

var data=getImageData(0,0, 20, canvas.height).data; 

И ваш второй вызов будет:

// Note: the width arguement remains at 20, not increase to 40 

var data=getImageData(20,0, 20, canvas.height).data;