Мне показалось немного странным, желание автора этого поста, генерировать изображения на сервере, в то время как современные браузеры позволяют делать это на клиенте. Поэтому хочу предложить другой, а точнее даже два других способа генерации фона.
Сразу оговорюсь что, скорее всего, без доработки они будут работать не во всех современных браузерах (тестировал только в Chrome 24 и FF 16 под Linux).
Как известно у background-image в CSS3 можно указывать несколько файлов фонового изображения, а в background-position их координаты. Следовательно, «смещая» всего две небольших картинки можно сгенерировать случайный лабиринт, например таким кодом:
Думаю не сложно догадаться, что такой лабиринт довольно просто динамически обновлять, например, как-то вот так:
Серьёзный минус этого способа в том, что он раздувает элемент до неприличных размеров, кроме того он довольно медленный (похоже по той же причине).
Немного подумав, я решил, что можно сделать реализацию на Canvas+Blob. Суть примерно такая:
Полученный URL присваиваем свойству body.style.backgroundImage:
Правда и здесь не обошлось без недостатка. При обновлении значения backgroundImage фон на мгновение исчезает. Хотя это довольно легко устраняется, например наложением картинок на время подгруздки:
Пример 1 (background-image)
Пример 2 (Canvas+Blob)
На этом, пожалуй, всё. Я не ставил цель сделать готовое, стабильное, кроссбраузерное (и т.п.) решение мне хотелось лишь описать более рациональный, на мой взгляд, подход к решению задачи генерации фонового изображения.
p.s. Опыта написания статей почти не имею, так что сильно не ругайтесь, ежели чего не так.
Сразу оговорюсь что, скорее всего, без доработки они будут работать не во всех современных браузерах (тестировал только в Chrome 24 и FF 16 под Linux).
background-image
Как известно у background-image в CSS3 можно указывать несколько файлов фонового изображения, а в background-position их координаты. Следовательно, «смещая» всего две небольших картинки можно сгенерировать случайный лабиринт, например таким кодом:
var images = []; // имена файлов картинок
var positions = []; // координаты
var l = 26; // размер картинок (для простоты квадратные)
var src = ['1.png', '2.png'];
var body = document.getElementsByTagName('body')[0];
var w = body.scrollWidth/l;
var h = body.scrollHeight/l;
for(var i=0;i<h;i++){
for(var j=0;j<w;j++){
images.push('url('+src[Math.round(Math.random())]+')'); // выбираем случайную картинку
positions.push(j*l+'px '+i*l+'px'); // и её координаты
}
}
// склеиваем и присваиваем
body.style.backgroundImage = images.join(', ');
body.style.backgroundPosition = positions.join(', ');
body.style.backgroundRepeat = "no-repeat";
Думаю не сложно догадаться, что такой лабиринт довольно просто динамически обновлять, например, как-то вот так:
for(var i=0;i<images.length*0.05;i++){
images[Math.floor(images.length*Math.random())]=('url('+src[Math.round(Math.random())]+')');
}
body.style.backgroundImage = images.join(', ');
body.style.backgroundPosition = positions.join(', ');
body.style.backgroundRepeat = "no-repeat";
Серьёзный минус этого способа в том, что он раздувает элемент до неприличных размеров, кроме того он довольно медленный (похоже по той же причине).
Canvas+Blob
Немного подумав, я решил, что можно сделать реализацию на Canvas+Blob. Суть примерно такая:
- создаём холст и устанавливаем у него размер равный размеру элемента, для которого создаём фон;
- заполняем холст рисунком;
- с помощью JavaScript-Canvas-to-Blob конвертируем содержимое в Blob;
- и с помощью URL.createObjectURL получаем URL блоба.
Полученный URL присваиваем свойству body.style.backgroundImage:
var body = document.getElementsByTagName('body')[0];
canvas.toBlob(function(blob){
var url = URL.createObjectURL(blob);
body.style.backgroundImage = "url('" + url + "')";
})
Правда и здесь не обошлось без недостатка. При обновлении значения backgroundImage фон на мгновение исчезает. Хотя это довольно легко устраняется, например наложением картинок на время подгруздки:
var url = URL.createObjectURL(blob);
body.style.backgroundImage += ", url('" + url + "')";
body.style.backgroundRepeat = "no-repeat";
setTimeout(function(){
body.style.backgroundImage = "url('" + url + "')";
},200);
Пример 1 (background-image)
Пример 2 (Canvas+Blob)
На этом, пожалуй, всё. Я не ставил цель сделать готовое, стабильное, кроссбраузерное (и т.п.) решение мне хотелось лишь описать более рациональный, на мой взгляд, подход к решению задачи генерации фонового изображения.
p.s. Опыта написания статей почти не имею, так что сильно не ругайтесь, ежели чего не так.