Canvas Проверьте перед отправкой

Question

У меня есть страница, на которой пользователь может рисовать на холсте и сохранять изображение в файл на сервере. Холст имеет черный фон по умолчанию. Есть ли способ проверить, что пользователь нарисовал что-либо на холсте, прежде чем отправить представление URL-адреса данных изображения холста с помощью функции toDataURL()? Поэтому, если пользователь не рисует что-либо на холсте (это будет пустой холст с черным фоном), изображение не будет создано на сервере. Должен ли я прокручивать каждый пиксель холста, чтобы определить это? Вот что я делаю в данный момент:

var currentPixels = context.getImageData(0, 0, 600, 400); 
    for (var y = 0; y < currentPixels.height; y += 1) { 

     for (var x = 0; x < currentPixels.width; x += 1) { 
       for (var c = 0; c < 3; c += 1) { 

       var i = (y*currentPixels.width + x)*4 + c; 

       if(currentPixels.data[i]!=0) 
       break; 

       } 

     } 

    } 

Answer 1

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

Например с помощью JQuery:

var canvasDrawnOn = false; 

$("#canvas").click(function(){ 
    canvasDrawnOn = true; 
}); 

Answer 2

Я пришел с этим некоторое время назад, но это не подходит моим целям.

Сначала я беру данные изображения в base64:

var imgdata = canvas.toDataURL(); 

Тогда я получаю MD5 хэш (я делаю это в PHP, но это не имеет значения, чтобы сделать это в JavaScript вы должны использовать библиотека, такие как this) данных изображения:

var h = $.md5(imgdata); 

После этого, вы можете сравнить MD5 с заранее рассчитанным хэш пустой холст:

if(h == EMPTYCANVAS) ... 

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