Как проверить, что-то нарисовано на холсте

Ответ 1

Вместо того, чтобы проверять каждый пиксель, может быть намного эффективнее просто записывать каждый раз, когда холст заполняется или гладит.

После заполнения или инсульта или произошло, вы знаете, что что-то было нарисовано.

Конечно, "как" очень специфично для приложения, так как мы не знаем, как нарисован ваш холст.

Ответ 2

Хорошим способом, который я нашел, является использование функции toDataURL() и сравнение ее с другим пустым холстом. Если они разные, чем тот, на котором вы сравниваете это, есть что-то на нем. Что-то вроде этого:

canvas = document.getElementById('editor');
ctx = canvas.getContext('2d');

canvas.addEventListener('mousemove',function(e){
    ctx.lineTo(e.pageX,e.pageY);
    ctx.stroke();
});

document.getElementById('save').addEventListener('click',function(){
    if(canvas.toDataURL() == document.getElementById('blank').toDataURL())
        alert('It is blank');
    else
        alert('Save it!');
});

Вот fiddle

Я не могу поверить в это, я просто наткнулся на это, и он исправил мою проблему. Возможно, в какой-то момент это поможет кому-то.

Ответ 3

Я не видел такого вопроса в Stackoverflow до сих пор.. но интересный Один, чтобы ответить..

Единственный способ (я думаю) - проверить пиксель за пикселем, т.е. проверить R, G, B, A каждого пикселя,
если эти значения равны нулю, то можно сказать, что пиксель пуст..
Это метод, который я использовал для написания нижеприведенного фрагмента кода. Просто пройдите через него.

window.onload = function() {
  var canvas  = document.getElementById('canvas');
  if(!canvas.getContext) return;
  var ctx     = canvas.getContext('2d');
  var w       = canvas.width = canvas.height = 100;
  var drawn   = null;
  var d       = ctx.getImageData(0, 0, w, w); //image data 
  var len     = d.data.length;
  for(var i =0; i< len; i++) {
    if(!d.data[i]) {
      drawn = false;
    }else if(d.data[i]) {
      drawn = true;
      alert('Something drawn on Canvas');
      break;
    }
  }
  if(!drawn) {
    alert('Nothing drawn on canvas.. AKA, Canvas is Empty');
  }
}

Протестируйте его здесь

Ответ 4

Чтобы получить пиксели холста, вы должны использовать getImageData(); метод → ссылка getImageData()

И чтобы проверить, находятся ли все пиксели ваших изображений в 0 или 255.

У вашей ImageData будет 4 ячейки на пиксель, r g b a и вы получите доступ к каждому пикселю, увеличив ваш счет на 4 и посмотрев каждые 4 следующих числа, чтобы получить ваше значение rgba.

Вы также можете получить пустое изображение DataURL и сравнить свой холст DataURL с ним, чтобы увидеть, пуст ли он:)

Ответ 5

Вот советы от Phrogz: fooobar.com/info/244144/...

function eventOnDraw( ctx, eventName ){
  var fireEvent = function(){
    var evt = document.createEvent("Events");
    evt.initEvent(eventName, true, true);
    ctx.canvas.dispatchEvent( evt );
  }
  var stroke = ctx.stroke;
  ctx.stroke = function(){
    stroke.call(this);
    fireEvent();
  };
  var fillRect = ctx.fillRect;
  ctx.fillRect = function(x,y,w,h){
    fillRect.call(this,x,y,w,h);
    fireEvent();
  };
  var fill = ctx.fill;
  ctx.fill = function(){
    fill.call(this);
    fireEvent();
  };
}
...
var myContext = someCanvasElement.getContext('2d');
someCanvasElement.addEventListener( 'blargle', myHandler, false );
eventOnDraw( myContext, 'blargle' );