Могу ли я изменить размеры изображений с помощью JavaScript (не масштабировать, реальное изменение размера)

Question

Мне нужно динамически загружать и выводить на экран огромное количество изображений - это может быть что-то вроде 1000–3000. Обычно эти картинки имеют разный размер, и я получаю их URL от пользователя. Так, некоторые из этих картинок могут иметь размер 1024х800 или 10х40 пикселей.

Я написал хороший JS-скрипт, показывающий их красиво на одной странице (аля стиль поиска картинок Google), но они все еще сильно загружены ОЗУ (сто 500К изображений на одной странице не годятся), поэтому я подумал возможность действительно изменять размеры изображений. Например, сделать изображение размером 1000x800 пикселей, например, 100x80, а затем забыть (освободить оперативную память) исходного изображения.

Можно ли это сделать с помощью JavaScript (без обработки на стороне сервера)?

Answer 1

Я бы предложил другой подход: используйте нумерацию страниц.

Отображение, скажем, 15 изображений.Затем пользователь нажимает «Следующая страница» и отображается следующая страница.

Или, что еще лучше, вы можете написать скрипт, который, когда пользователь достигает конца страницы, автоматически загружает следующую страницу.

Если это не то, что вы хотите сделать.Может быть, вы хотите сделать коллаж из изображений, тогда, возможно, вы можете проверить CSS3 преобразования.Я думаю, что они должны быть быстрыми.

Answer 2

То, что вы хотите сделать, это принять некоторое давление со стороны клиента, чтобы он мог обрабатывать все изображения.Разрешение изменения размера всех изображений (JavaScript на стороне клиента) будет происходить с точностью до наоборот, потому что изменение размера изображения обычно намного дороже, чем просто его отображение (и в любом случае это невозможно в браузере JS).

Обычно естьвсегда лучшее решение, чем показ такого количества предметов одновременно.Одним из них может быть динамическая загрузка, например, когда пользователь прокручивает страницу вниз (как это делают новые профили в Facebook) или использует нумерацию страниц.Я не могу себе представить, что все изображения 1k - 3k будут видны одновременно.

Answer 3

Я (довольно) уверен, что это можно сделать в браузерах, которые поддерживают canvas. Если это путь, по которому вы хотели бы пойти, вы должны начать здесь .

Я вижу возможные проблемы с подходом canvas:

1. Вероятно, потребуется очень много времени (условно говоря), чтобы изменить размер многих изображений. Из-за этого вам, вероятно, придется изучить использование веб-работников .
2. Действительно ли браузер освободит память, если вы удалите изображение из DOM и / или delete / null все ссылки на эти изображения? Я не знаю.

И несколько красивых картинок с измененным размером холста:

этот ответ нуждается в ниндзя: -> Qk

Answer 4

Нет собственного способа JS сделать это.Возможно, вы сможете что-то взломать с помощью Flash, но вам действительно следует изменить размер изображений на сервере, потому что:

1. Вы сэкономите на пропускной способности, передавая эти большие изображения размером 500 КБ клиенту.
2. Клиент сможет кэшировать эти изображения.
3. Вы получите более быструю загрузку страницы.
4. Вы сможете разместить в памяти намного больше миниатюрных изображений и, следовательно, потребуется меньшенумерация страниц.
5. подробнее ...