HTML5 canvas - Масштабирование изображений при загрузке?

Question

Хорошо, так что я делаю html5 холст, и мне нужно все время рисовать изображения с измененным размером (это все пиксель-арт). К сожалению, изменение размера drawImage делает текущие браузеры довольно медленными, поэтому я пытаюсь изменить размер при загрузке, а затем просто нарисовать предварительно измененное изображение.

Я пытался нарисовать изображения с измененным размером в скрытом контексте и затем сделать ctx.getImageData, но затем я застрял с байтовым массивом, и нет никакого способа конвертировать в изображение. Я могу сделать putImageData, чтобы перенести его в окончательный контекст, но это медленно, и я, очевидно, теряю альфа-канал.

Другим вариантом может быть предварительное масштабирование на сервере, но я бы хотел этого избежать, если это вообще возможно.

Есть идеи?

Answer 1

В объекте canvas (не в контексте) есть метод toDataURL (string mimeType), который преобразует содержимое холста в двоичную строку изображения в кодировке base64. Вы можете использовать это как атрибут src любого элемента изображения.

ctx.drawImage(originalImage, 0, 0, originalImage.width, originalImage.height, 0, 0, 200, 200);
var scaledImage = new Image();
scaledImage.onload = ...;
scaledImage.src = canvas.toDataURL("image/png");

Теперь вы можете нарисовать свое масштабированное изображение нормальным.