Question

YouTube的新布局添加了我非常喜欢的背景随机噪音，在其他网站上看到的效果几乎与此类似，所以我计划在我的网页原型中使用相同的技术，或者至少有这个“诀窍“在我的工具箱中以备将来使用。

enter image description here

现在，Youtube通过在源代码中嵌入图像来完成（令人尴尬的相同）相同的效果：

（在Youtube主页上，右键单击背景显示它，然后右键单击图像并“显示图像属性”[ffox]）：

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

我试图发现源代码中这行代码的位置，但由于动态创建，我不能。

所以，我的问题是： “有没有办法将平铺的背景应用于页面，使用生成算法的CLIENT-SIDE生成的png图像？” （最好用javascript）

我是webdev和javascript的初学者，但我喜欢将我的学习基于定义的问题来解决，所以这将是学习一些东西的好方法

感谢阅读！

更新：

对于任何对使用javascript生成平铺纹理感兴趣的人，我发现了这个，这看起来非常有趣：

Answer 1

要生成图像客户端，我建议您查看HTML5 canvas元素。

您可以使用Javascript在画布上绘图（即使隐藏了画布元素），因此生成您想要的任何内容（包括简单的噪音图块）。

之后，您可以使用方法toDataURL（像“data：image / png; base64 ....”这样的字符串）将画布导出为URL，这是由浏览器解释的，如图像的传统URL，所以你可以将它设置为你的身体元素的css背景。

警告1：所有现代浏览器都支持Canvas，您可以使用ExplorerCanvas在IE上模拟它 - 但我不知道ExplorerCanvas是否支持.toDataURL（）

警告2： Canvas与分辨率有关，所以我建议您生成一个小块（32 * 32或64 * 64）并重复它

修改：平铺背景的示例：http://jsfiddle.net/SfzPc/12/

编辑2 ：背景噪音已完整的示例：http://jsfiddle.net/SfzPc/14/

Answer 2

您可以使用CSS显示此图片：

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

您可以通过编辑值white来更改背景的初始颜色。

要使用JavaScript设置CSS，请设置元素的background属性：

document.getElementByID("someimageselector").background = 'white url(data:image/png....';

Answer 3

有两个jQuery插件库可以完全满足您的需求： NoiseGen 和嘈杂。还没有用过，但它们看起来都很不错。

<强> NoiseGen

<强>噪声

Answer 4

Fyi：Base64是以字符串表示的二进制数据。很可能原始图像仍然来自Photoshop，后来编码为Base64。这种技术有助于减少每页视图的http请求数，因为实际的图像数据可以保存并缓存在css或html文档中。