Мне показалось немного странным, желание автора этого поста, генерировать изображения на сервере, в то время как современные браузеры позволяют делать это на клиенте. Поэтому хочу предложить другой, а точнее даже два других способа генерации фона.
Сразу оговорюсь что, скорее всего, без доработки они будут работать не во всех современных браузерах (тестировал только в 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. Опыта написания статей почти не имею, так что сильно не ругайтесь, ежели чего не так.
Автор: g1t5