Блог

Возможно ли установить ширину и высоту элемента холста и настроить существующий масштаб содержимого в соответствии с этими новыми размерами?

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

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

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

Существует много способов вызова drawImage

Один из них:

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

Где dx, dy, dw, dh — это целевые значения x, y, ширина и высота.

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

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

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