Фон с шумом(не картинка)

higimo · October 23, 2011

Здравствуйте,

Мне надо сделать noise на фоне. Как это сделать средствами css3? Если это не возможно, то напишите решение хоть какое-то кроме картинки. Если это javaScript, то, пожалуйста, объясните как это использовать, потому что ранее дел не имел со скриптами.

Зарание спасибо.

Edited October 23, 2011 by higimo

SelenIT · October 23, 2011

Оно?

higimo · October 24, 2011

Оно?

Как этим пользоваться? Я тоже умею искать и видел это. Но за неумение, таки обратился сюда.

SelenIT · October 25, 2011

Функция вставляется в тег <script>. А вызывается по загрузке картинки, например, так:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Накладываем шум на картинку через Canvas</title>
  <script>

function addNoise(img, alpha) {
    var canvas = document.createElement('canvas');
    canvas.width = img.width;
    canvas.height = img.height;

    var ctx = canvas.getContext('2d');
    ctx.drawImage(img, 0, 0);

    var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    var pixels = imageData.data, r, g, b, origR, origG, origB;
    var alpha1 = 1 - alpha

    for (var i = 0, il = pixels.length; i < il; i += 4) {
        // генерируем пиксель «шума»
        var color = Math.random();

        origR = pixels[i];
        origG = pixels[i + 1];
        origB = pixels[i + 2];

        // высчитываем итоговый цвет в режиме multiply без альфа-композиции
        r = origR * color;
        g = origG * color;
        b = origB * color;

        // альфа-композиция
        pixels[i] =     r * alpha + origR * alpha1;
        pixels[i + 1] = g * alpha + origG * alpha1;
        pixels[i + 2] = b * alpha + origB * alpha1;
    }

    ctx.putImageData(imageData, 0, 0);
    // подменяем исходную картинку созданным Canvas-ом
    img.parentNode.replaceChild(canvas,img);
}

  </script>

</head>
<body>
  А теперь берем любую картинку (с этого же домена!), и как только она загрузится (по событию onload) накладываем на нее же (первый параметр функции) шум с прозрачностью 20% (второй параметр функции):
<img src="image.jpg" onload="addNoise(this, 0.2)">
</body>
</html>

Тут я чуть поменял последнюю строчку функции - у Чикуенка она дописывала созданный Canvas к <body> (т.к. там он служил фоном, а картинка грузилась только в память и сама по себе не отображалась), а здесь он подменяет собой исходную картинку. Но принцип от этого не меняется...

Sign In

Фон с шумом(не картинка)

Question

higimo

Link to comment

Share on other sites

3 answers to this question

Recommended Posts

SelenIT

Link to comment

Share on other sites

higimo

Link to comment

Share on other sites

SelenIT

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information