Как определить, является ли изображение, созданное с помощью холста пустым (прозрачный PNG)?

Я работаю над приложением, в котором изображение создается/редактируется на холсте HTML5, а затем сохраняется в файл-хранилище/облако. Проблема заключается в "эффективности экономии". При сохранении пустого холста, то есть полностью прозрачный пустой PNG отправляется с toDataURL(). Один из способов обнаружения пустого PNG заключается в переключении логического значения после щелчка любой функции редактирования/рисования и повторной передачи этого значения на экране с четким отображением.

Однако такой метод не является надежным, потому что пользователь может сохранить изображение после нажатия на функцию рисования/редактирования и все же ничего не рисовать. Есть ли более собственный подход к обнаружению, если canvas возвращает двоичную строку, которая была изменена с момента открытия в браузере? Или каким-либо другим способом обеспечить обнаружение прозрачного PNG на стороне клиента?

Ответ 1

HTML:

<canvas id="canvas_img" width="300" height="200" border="0"></canvas>

SCRIPT:

isCanvasTransparent(document.getElementById("canvas_img"));

function isCanvasTransparent(canvas) { // true if all pixels Alpha equals to zero
  var ctx=canvas.getContext("2d");
  var imageData=ctx.getImageData(0,0,canvas.offsetWidth,canvas.offsetHeight);
  for(var i=0;i<imageData.data.length;i+=4)
    if(imageData.data[i+3]!==0)return false;
  return true;
}

UPDATE

Не используйте объявления стиля CSS, такие как border: 1px solid black; для CANVAS, потому что граница включена в изображение холста, и, как результат, альфа-канал всегда не равен нулю.

Ответ 2

Это не является родным, но это должно работать, потому что пустой холст всегда генерирует один и тот же URL-адрес данных.

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

Демо. Сначала нажмите "Сохранить" , не переходя холст. Затем перейдите к нему, а затем нажмите save. Тада!