javascript - 一种使用 javascript 创建随机噪声背景图像 (png) 的方法？

Question

YouTube 的新布局添加了我非常喜欢的背景随机噪声，在其他网站上看到几乎完全相同的效果，所以我打算在我的网页原型(prototype)中使用相同的技术，或者至少有这个“技巧”在我的工具箱中以备将来使用。

图片是这样的(取自http://g.raphaeljs.com/barchart.html):

现在 Youtube 通过在源代码中嵌入图像来实现(令人尴尬的相同)相同效果:

(在 Youtube 主页上，右键单击背景以显示它，然后右键单击图像和“显示图像属性”[ffox]):

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

我试图在源代码中找到这行代码的位置，但是由于动态创建，我找不到。

所以，我的问题是:“有没有办法使用客户端算法生成的 png 图像将平铺背景应用于页面？” (最好使用 javascript)

我是 webdev 和 javascript 的初学者，但我喜欢围绕要解决的已定义问题进行学习，所以这是学习一些东西的好方法

感谢阅读!

更新:

对于任何对使用 javascript 生成图 block 纹理感兴趣的人，我发现了这个，它看起来很有趣:

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

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

Answer 1

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

您可以使用 Javascript 在 Canvas 上绘图(即使 Canvas 元素是隐藏的)，因此可以生成任何您想要的东西(包括简单的噪声图 block )。

学习 Canvas 绘图的资源:https://developer.mozilla.org/en/Drawing_Graphics_with_Canvas

之后，您可以使用 toDataURL 方法将 Canvas 导出为 URL(类似于“data:image/png;base64....”的字符串)，浏览器将其解释为图像的传统 url，因此您可以将其设置为 body 元素的 css 背景。

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

警告 2:Canvas 与分辨率有关，所以我建议您生成一个小图 block (32*32 或 64*64)并重复

编辑:平铺背景示例:http://jsfiddle.net/SfzPc/12/

编辑 2: 背景嘈杂的完整示例:http://jsfiddle.net/SfzPc/14/