Не спрайт CSS / Javascript для обработки множества маленьких изображений

Question

Привет, ребята: Я ищу технику для веб-страниц, которая позволила бы мне предоставить одно большое изображение, содержащее много маленьких изображений (возможно, сотен), которые будут использоваться в качестве фоновых изображений для определенных div или li.

Это звучит как работа для CSS-спрайтов , за исключением одного: спрайты полагаются на вложенный div (или блок), чтобы показать только одно изображение.

Однако я хочу использовать изображения в областях, которые произвольно больше, чем отдельные изображения спрайтов (и любое пространство, которое я мог бы оставить между ними). Это тот случай, который рассматривается в предложении медиа-фрагментов для CSS3, которое, похоже, еще не реализовано широко.

Кроме того, эти взломы изображений выглядят полезными, но работают только тогда, когда можно добавить дополнительный диапазон (или: перед механизмом).

Предположим, что кто-то хочет избежать этого, возможно, есть метод, позволяющий сделать это с помощью какого-нибудь умного javascript? Например, есть ли практическая техника для отправки одного большого изображения в браузер, чтобы javascript разрезал его в памяти и назначил отдельные изображения различным фоновым правилам CSS?

Answer 1

Например, есть ли практическая техника для отправки одного большого изображения в браузер, чтобы JavaScript разрезал его в памяти и назначил отдельные изображения различным фоновым правилам CSS?

В современных браузерах должна быть возможность использовать HTML5 Canvas для загрузки изображения, скопировать его части во второй Canvas, а затем сохранить полученный спрайт в data: URI.

Answer 2

Использовать data-url.Кодирование множества изображений в одну строку данных и декодирование отдельного изображения в строку.

Вы можете выполнить поиск по «спрайту изображения data-url», чтобы получить больше идей.