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

Question

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

У меня есть этот элемент <canvas id="my-canvas"></canvas>, и я хочу проверить, нарисовано ли на моем холсте что-то нарисованное.

Answer 1

Хороший способ, который я нашел, - это использовать функцию 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!');
});

Вот скрипка

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

Answer 2

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

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

Конечно, «как» зависит от конкретного приложения, так как мы не знаем, как в первую очередь рисуется ваш холст.

Answer 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');
  }
}

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

Answer 4

Вот подсказки от Phrogz: https://stackoverflow.com/a/4649358

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' );

Answer 5

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

И проверить, равны ли каждый пиксель вашего imageData 0 или 255.

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

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

Answer 6

HTML-код:

<canvas id='mainCanvas' style='border:solid'></canvas>
<canvas id='blankCanvas' style='display:none'></canvas>

JS код:

var mainCanvas= new SignaturePad(document.getElementById("mainCanvas"));
if (mainCanvas.toDataURL() == document.getElementById('blankCanvas').toDataURL()) {
                // Canvas is blank
}

Примечание. Если вы предоставляете высоту и ширину для основного холста, то такую ​​же высоту и ширину примените и к пустому холсту.

Answer 7

Я знаю, что это может быть поздний ответ, но попробуйте это решение:

Саймон Саррис говорит, что:

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

Хотя это было бы более эффективно, однако мне удалось найти способ обнаружить холст, чтобы увидеть, нарисован ли он или нарисован, проверяякаждый пиксель.Мне нужно было поэкспериментировать, чтобы увидеть, какие результаты возвращают данные пикселей, когда холст пуст и когда он нарисован.Я обнаружил, что когда холст пуст, все пиксельные данные возвращают 0 во всех позициях индекса массива.Поэтому я использовал это, чтобы определить, есть ли какие-либо 0 или нет, и в результате я сделал это, чтобы он возвращал логическое значение.Если холст был нарисован, он возвращает true, а если нет, то возвращает false.

Вы можете проверить это Здесь на JSfiddle

код:

function isDrawnOn() {
            var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
            var data = imageData.data;
            var result = null;
            var counter = 0;
            var last = data.length - 1;
            for (var i = 0; i < data.length; i++) {
                if (i === last && counter !== 0 && counter === last) {
                    result = false;
                    break;
                } else if (data[i] !== 0 && data[i] > 0) {
                    result = true;
                    break;
                } else {
                    counter++;
                    continue;
                }
            }
            return result;
        }

Надеюсь, это поможет:)

Answer 8

Привет, может быть, поздний ответ на этот вопрос, но я был немного напуган необходимостью дополнительного холста для сравнения. Итак, вот мое решение:

if (canvas.toJSON().objects.length === 0) {
    console.log('canvas is empty');
}

Надеюсь, это поможет, вы можете сделать с ним функцию, но решение намного чище, чем я видел вокруг.