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