html5 Canvas как кэш для изображений

[JAre]

А можно ли сделать атлас из иконок, градиентов, картинок кнопок всех страниц сайта, как в Играх делают атлас текстур:


и порезать его на изображение которые будут натянуты на эти кнопки, иконки, градиенты и прочие? Естественно нам еще понадобится карта -инструкция, которая будет указывать где какое изображение в этом атласе.

[JAre]

Конечно, ускорит это только первую загрузку сайта, так как потом все эти картинки попадут в кеш. Но если это сайт портфолио то все равно клиент на него зайдет только раз и получит определенное впечатление. Так что в некоторых случаях этот первый раз самый важный. Конечно, для порталов вроде http://javascript.ru это может и не нужно, но с другой стороны это еще и трафик уменьшит. Ведь можно будет сжать изображение сильнее и ну нужно будет передавать не только хэддеры страниц но и самих изображений! А для небольших иконок сама шапка файла может занимать больше места чем байты изображения.

[kobezzza]

Да конечно, почитай про CSS спрайты и DATA:URI. "Карта инструкция" не нужна)

[JAre]

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

[kobezzza]

Ну попробуй) Мб чёнить и выйдет)

[trikadin]

А что вы спрашиваете, собственно? Вы пробуйте)

[JAre]

Проблема в том, что у сanvas есть только метод toDataURL() который позволяет создать png который уже можно применять как хочешь. Но тогда опять же возвращаемся к лимиту DataURL.... То есть ели нужно получить картинку большой кнопки из атласа, то можно просто не поместится в этот лимит. Конечно можно попробовать определить лимит текущего браузера и попробовать загрузить кнопку как набор более мелких картинок и визуально слепить их вместе. Но это уже какой-то бред Хотя если попробовать использовать сами сanvas как изображение для кнопок и тп...