Как масштабировать изображение до большего размера в html5, холсте, javascript?

Question

Я знаю, что это может звучать новичком, но есть много ответов, которые просто не делают этого.

У меня есть .png изображение размером 10 000 пикселей в высоту и вы хотите масштабировать его до высоты 30 000 пикселей. Это может быть просто растяжение до высоты.

img = new Image(800, 30000); 
    img.src = path; 

Но когда он выходит, он не масштабирует изображение вообще. Похоже, что расширение изображения на пикселях размером более 10 000 пикселей является невидимым.

Знает ли другое, как это сделать должным образом?

Любые советы будут признательны. Благодарю.

Answer 1

У вас возникнут проблемы с этим. Единственная причина, по которой вы хотите масштабировать ее до этого размера, - это если вы хотите ее распечатать. Вам нужно распечатать его, тогда вам понадобится другое решение.

Reality Дело в том, что вы можете когда-либо видеть, насколько дисплей может представить, поэтому создание образа этого большого является пустой тратой ресурсов и борьба против пределов браузеров.

Решение. Загрузите изображение как обычно, но не добавляйте его в DOM. Добавьте элемент div с высотой, установленной на 30000 пикселей, это даст полосу прокрутки. Затем создайте холст с высотой и шириной, установленный на window.innerWidth и window.innerHeight, и добавьте стиль CSS { position:fixed; top:0px; right:0px; } к этому холсту, который зафиксирует положение холста, но при этом даст полосу прокрутки через div фона.

Используйте requestAnimationFrame, чтобы вызвать вашу функцию, которая проверяет обновленную позицию прокрутки и, если ее изменить, визуализирует соответствующую часть изображения на холсте.

Использование этого метода позволит ему казаться, что изображение очень велико, но вы только когда-либо показываете, что можно увидеть. Если вы выбрали, вы можете реализовать свой собственный свиток и с помощью небольшой фантастической математики вы можете сделать изображение таким же большим, как вселенная. Думайте о картах google при максимальном увеличении, что это такое? это не имеет значения, потому что вы можете видеть только часть его, чтобы они только отображали ту часть, которую вы видите.