HTML5-кэширование изображений на холсте / вопросы putImageData

Question

Я использую холст HTML5 для загрузки одного экземпляра изображения, которое затем многократно копирую на одном холсте. Изображение нуждается в небольшом манипулировании на основе пикселей, чтобы настроить его. Мой первоначальный план атаки состоял в том, чтобы загрузить изображение, скопировать его на фоновый холст, нарисовать поверх него мои модификации, а затем взять данные изображения и кэшировать его для будущего использования.

Вот код, который я написал для этого:

context.drawImage(img, 0, 0);
context.fillStyle = '#ffffff';
context.fillRect(0, 0, 2, 2);  // Draw a 2x2 rectangle of white pixels on the top left of the image

imageData = context.getImageData(0, 0, img.width, img.height);
cusomImage = imageData;

Хотя это работает, я заметил, что мое изображение (которое представляет собой прозрачный PNG) не поддерживает прозрачность. Вместо этого, при использовании putImageData для помещения его на фронтальный холст, он отображается с черным фоном. Как мне сохранить прозрачность?

Любые предложения приветствуются!

Answer 1

putImageData () не делает то, что вы могли бы сначала ожидать: http://dropshado.ws/post/1244700472/putimagedata-is-a-complete-jerk

putImageData () переопределяет пиксели холста. Поэтому, если вы нарисуете что-то еще на том же холсте, он не будет рисовать «поверх» него, вместо этого он заменит пиксели холста в области его пикселями.

Я столкнулся с этой проблемой и, наконец, выяснил, почему.

Что касается решения, я еще не пробовал это, но кажется многообещающим: Почему putImageData такой медленный?

[РЕДАКТИРОВАТЬ]: Я проверил этот метод, и он отлично работает для меня, мои данные теперь правильно отображают прозрачность.

Answer 2

Холст после создания становится черным.Сначала сделайте его прозрачным с помощью:

context.fillStyle = 'rgba(0,0,0,0)';
context.fillRect(0, 0, width, height);