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

Я использую холст 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, чтобы поместить его на фронтальный холст, он отображается с черным фоном. Как мне сохранить прозрачность?

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

2 ответа

Решение

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

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

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

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

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

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

context.fillStyle = 'rgba(0,0,0,0)';
context.fillRect(0, 0, width, height);
Другие вопросы по тегам