logo标签列表

使用JavaScript创建随机噪点背景图像（png）的方法？

javascripthtmlpngbackground-imageclient-side
8
新的YouTube布局增加了一种我非常喜欢的背景随机噪声效果，我在其他网站上几乎看到了完全相同的效果，因此我计划在我的网页原型中使用相同的技术，或者至少将这个“技巧”放入我的工具箱以备将来使用。
图片如下（来自http://g.raphaeljs.com/barchart.html）:

enter image description here

现在YouTube通过将图像嵌入源代码来实现（令人尴尬地相同）的效果：
（在YouTube主页上，右键单击背景以显示它，然后右键单击图像并选择“显示图像属性”[ffox]）：
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJUAAACVCAAAAAB0....lotsofdata

我试图找出这行代码在源代码中的位置，但由于动态创建，我无法找到。
所以我的问题是：“有没有一种方法可以使用客户端生成的算法png图像将平铺背景应用于页面？”（最好使用javascript）
我在webdev和javascript方面非常初学，但我喜欢围绕着定义的问题来学习，所以这将是一个很好的学习方式。
谢谢阅读！
更新：
对于任何对使用javascript生成瓷砖纹理感兴趣的人，我发现了这个非常有趣的东西：

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

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

嗯，你必须非常仔细地观察，但是这张图片确实不是纯灰色。 - Kirk Woll
是的，将它放在一个平铺模式上，你会得到一种看起来像是纸质的自然纹理。我想知道是否可以用更小尺寸的正方形获得相同的效果。 - heltonbiker
通过算法生成图像似乎有些过头了。你需要每次页面加载时都不同吗？ - Mike Ruhlin
这是一个Web应用程序，您可以使用它将自己的图像转换为base64表示。http://www.greywyvern.com/code/php/binary2base64 您可以轻松地重新实现它以JavaScript形式，但为什么要费这个劲呢？ - Mike Ruhlin
1
将我的名字添加到认为这是一个坏主意的人名单中。生成PNG图像是一项CPU密集型任务，不应在每个页面加载时执行。它应该只执行一次，然后保存为png文件（对于慢速连接的页面加载速度更好，特别是对于大型图像），或者使用base64嵌入（对于快速连接的页面加载速度更好，特别是对于小型图像）。 - Abhi Beckert
4个回答
6

为了在客户端生成图像，我建议您查看HTML5画布元素。

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

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

之后，您可以使用toDataURL方法将画布导出为URL（类似于"data:image/png;base64...."这样的字符串），浏览器会将其解释为图像的传统URL，因此您可以将其设置为body元素的CSS背景。

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

警告2： Canvas的分辨率依赖性很强，因此建议您生成一个小瓷砖（32 * 32或64 * 64）并重复使用它。

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

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

但是如何制造视觉噪点呢？这比画一个完美的圆形要难得多 :) - Rudie
虽然我还不知道如何执行给定的步骤（一点工作代码会很好），但这就是我在提问时所考虑的，生成（并可能缓存）一个小正方形瓷砖。视觉噪声生成是一个独立于语言的算法，因此当我得到一个好的算法时，我将使用Canvas实现它。此外，我在哲学上赞同Canvas的工作流程。当然，这是有争议的。 - heltonbiker
4
您可以使用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....';
你的答案有效，并且我喜欢这个技巧。只有最后一次机会：是否可以/最佳实践是使用JavaScript算法生成PNG数据？ - heltonbiker
这是可能的，但对于禁用 JavaScript 的用户，您可能应该准备一张备用图片。在这种情况下，JavaScript 是不必要的。最好生成一次图像，然后保存它（如果可能）。 - Kevin Ji
2
1

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接