Задать высоту и ширину холста HTML5 и содержимое в масштабе

Question

Можно ли установить ширину и высоту элемента canvas и иметь существующий масштаб содержимого, чтобы соответствовать этим новым измерениям?

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

1. Пользователь загружает изображение размером 1600 x 1200 пикселей (не сохраняется на сервере)
2. Данные отправляются прямо на объект холста html5
3. Высота и ширина холста устанавливаются на 800 x 600, а содержимое изображения соответствующим образом масштабируется, а затем отображается.

Прямо сейчас, если я установлю ширину и высоту холста, он просто обрезает изображение в этом измерении, не меняя размеры, как мне бы хотелось. Спасибо!

Answer 1

Есть много способов позвонить drawImage

Один из них:

ctx.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)

Где dx, dy, dw, dh - пункт назначения x, y, ширина и высота.

Если вы сделаете dw и dh всегда 800x600, изображение будет всегда автоматически масштабироваться до 800x600.

Вот небольшой пример, который всегда будет рисовать изображение любого размерадо 800x600 http://jsfiddle.net/jAT8Y/

Answer 2

Другой альтернативой является использование функции context.scale.Качество вашего изображения останется лучше, если вы будете использовать масштаб.