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

YouTube的新布局添加了一个我非常喜欢的背景随机噪音,在其他网站上几乎看到了相同的效果,所以我计划在我的网页原型中使用相同的技术,或者至少有这个“技巧”我的工具箱供将来使用.

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

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

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

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

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

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

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

谢谢阅读！

更新：

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

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

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

解决方法

为了生成客户端映像,我建议你看看HTML5 canvas元素.

您可以使用Javascript在画布上绘图(即使隐藏了画布元素),因此生成您想要的任何内容(包括简单的噪声平铺).

资源学习画布绘图：https://developer.mozilla.org/en/Drawing_Graphics_with_Canvas

之后,您可以使用方法toDataURL(像“data：image / png; base64 ….”这样的字符串)将画布导出为URL,浏览器将其解释为图像的传统URL,因此您可以设置它作为你的身体元素的CSS背景.

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

警告2：画布与分辨率有关,所以我建议你生成一个小块(32 * 32或64 * 64)并重复它

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

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

原文地址：https://www.jb51.cc/js/158872.html