Проверка холста перед отправкой

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) ...

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