Способ создания фонового изображения со случайным шумом (PNG) с помощью JavaScript? - PullRequest
Новая
       20

Способ создания фонового изображения со случайным шумом (PNG) с помощью JavaScript?

8 голосов
/ 20 декабря 2011

В новом макете YouTube добавлен фоновый случайный шум, который мне очень нравится, так как он почти такой же эффект наблюдался на других сайтах, поэтому я планирую использовать ту же технику в прототипах моей веб-страницы, или, по крайней мере, иметь это " трюк "в моем наборе инструментов для будущего использования.

Изображение выглядит так (взято из http://g.raphaeljs.com/barchart.html):

enter image description here

Теперь Youtube выполняет (смущающе идентичный) тот же эффект, внедряя изображение в исходный код:

(на главной странице Youtube щелкните правой кнопкой мыши фон, чтобы отобразить его, затем щелкните правой кнопкой мыши изображение и «отобразите свойства изображения» [ffox]): 

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJUAAACVCAAAAAB0....lotsofdata

Я пытался выяснить, где находится эта строка кода в исходном коде, но из-за динамического создания я не смог.

Итак, мой вопрос: "Есть ли способ применить мозаичный фон к странице, используя изображение png, сгенерированное алгоритмически на стороне клиента?" (желательно с javascript)

Я очень новичок в webdev и javascript, но мне нравится основывать свое обучение на определенных задачах, которые необходимо решить, так что это был бы хороший способ научиться чему-то

Спасибо за чтение!

UPDATE:

Для тех, кто заинтересован в генерации текстур плиток с использованием javascript, я нашел это, что кажется очень интересным:

http://somethinghitme.com/projects/canvasterrain/

http://somethinghitme.com/projects/canvasterrain/js/canvasTerrain.js

Ответы [ 4 ]

6 голосов
/ 20 декабря 2011

Чтобы сгенерировать изображение на стороне клиента, я предлагаю вам взглянуть на элемент холста HTML5.

Вы можете рисовать на холсте с помощью Javascript (даже если элемент холста скрыт) и генерировать что угодно.Вы хотите (включая простую шумовую плитку).

Ресурс для изучения рисования на холсте: https://developer.mozilla.org/en/Drawing_Graphics_with_Canvas

После этого вы можете экспортировать холст как URL с помощью метода toDataURL (строка типа "data: image / png; base64 .... "), который интерпретируется браузерами как традиционный URL-адрес изображения, поэтому вы можете установить его в качестве фона CSS для вашего элемента тела.

Предупреждение 1: Canvas поддерживается всеми современными браузерами, и вы можете эмулировать его в IE с помощью ExplorerCanvas - но я не знаю, поддерживает ли ExplorerCanvas .toDataURL ()

Предупреждение2: Холст зависит от разрешения, поэтому я предлагаю вам создать небольшую плитку (32 * 32 или 64 * 64) и повторить ее

Редактировать: Примерплиточный фон: http://jsfiddle.net/SfzPc/12/

Редактировать 2: Завершенный пример с шумным фоном: http://jsfiddle.net/SfzPc/14/

4 голосов
/ 20 декабря 2011

Вы можете использовать CSS для отображения этого изображения: 

#someimageselector {
    background: white url('data:image/png;base64,iVBOR...lots of data') repeat scroll left top;
}

Вы можете изменить исходный цвет фона, отредактировав значение white.

Чтобы установить CSS с JavaScript, установите свойство background элемента: 

document.getElementByID("someimageselector").background = 'white url(data:image/png....';
2 голосов
/ 27 июня 2013

Есть две библиотеки плагинов jQuery, которые делают именно то, что вы ищете: NoiseGen и Noisy .Еще не использовал, но они оба выглядят довольно хорошо.

NoiseGen

Шумно

1 голос
/ 20 декабря 2011

Fyi: Base64 - это двоичные данные, представленные в виде строки.Скорее всего, исходное изображение все еще вышло из Photoshop и позже было закодировано в Base64.Этот метод помогает сократить количество http-запросов на просмотр страницы, поскольку фактические данные изображения могут быть сохранены и кэшированы в документе CSS или HTML.

...