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
最佳答案
要在客户端生成图像，我建议您看看 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/
关于javascript - 一种使用 javascript 创建随机噪声背景图像 (png) 的方法？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8580541/