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

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

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


javascript html5-canvas
person Marvin Danig    schedule 03.11.2011    source источник

Ответы (2)


arrow_upward
15
arrow_downward

HTML:

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

СЦЕНАРИЙ:

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;
}

ОБНОВЛЕНИЕ:

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

person Andrew D.    schedule 03.11.2011
comment
Ого! Это собственный подход :-) Итак, что является лучшим ответом с точки зрения использования ресурсов? Я считаю, что сравнение dataURL будет дешевле, чем обнаружение через альфа / прозрачность, не так ли? - person Marvin Danig; 03.11.2011
comment
@marvindanig - ›Ваш код сначала работает, когда холст еще не нарисован, но когда холст нарисован и очищен. Обнаружение пустого холста не удается? Почему это было? - person alyssaeliyah; 18.05.2015
comment
Ваш код сначала работает, когда холст еще не нарисован, но когда холст был нарисован и очищен. Обнаружение пустого холста не удается? Почему это было? - person alyssaeliyah; 18.05.2015
comment
@Alyssa Gono Что ты имеешь в виду под "очищено"? Вы имеете в виду CanvasRenderingContext2D.clearRect ()? Проверьте только что созданный простой пример: jsbin.com/xepipayalo/1/edit?html, js, output Он протестирован в FireFox и Chrome и работает должным образом. - person Andrew D.; 18.05.2015
comment
Вы находитесь в такой ситуации ?: stackoverflow.com/a/2390361/605396 (Просто догадываюсь!) - person Marvin Danig; 19.05.2015

arrow_upward
9
arrow_downward

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

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

Демо. Во-первых, нажмите "Сохранить", не переходя холст. Затем пройдите по нему и нажмите "Сохранить". Тада!

person Some Guy    schedule 03.11.2011
comment
+1 В качестве побочного примечания, вы выстраиваете свой путь, который с каждым разом становится все более и более сложным. Лучше сбрасывать его после каждого удара: jsfiddle.net/pimvdb/rX572/1 . - person pimvdb; 03.11.2011
comment
Кроме того, вам, вероятно, следует кэшировать пустой URL-адрес данных - person Casey Chu; 14.08.2012