一种使用javascript创建随机噪声背景图像（png）的方法？ [英] A way to create random-noise background image (png) with javascript?

问题描述

YouTube的新版本增加了一个我非常喜欢的背景随机噪音，几乎在其他网站上看到了相同的效果，所以我打算在我的网页原型中使用相同的技术，或者至少有这样的技巧在我的工具箱中供将来使用。

图像就像这样（摘自

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

解决方案

为了生成客户端图像，我建议你看看HTML5 canvas元素。

你可以在Javascript上画一个画布（即使画布元素被隐藏），等等灌输任何你想要的东西（包括一个简单的噪音瓦片）。

学习画布的资源： https://developer.mozilla.org/en/Drawing_Graphics_with_Canvas 然后，您可以将画布导出为URL使用方法toDataURL（像data：image / png; base64 ....这样的字符串），它被浏览器解释为一个图像的传统URL，因此您可以将它设置为您的body元素的css背景。 p>

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

警告2： Canvas是依赖于分辨率的，所以我建议你生成一个小块（32 * 32，或64 * 64）并重复它

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

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

The new layout of YouTube added a background random-noise which I like very much, having seen almost exactely the same effect on other sites, so I plan to use the same technique in my webpage prototypes, or at least have this "trick" in my toolbox for future use.

The image is like this (taken from http://g.raphaeljs.com/barchart.html):

Now Youtube accomplishes the (embarrassingly identical) same effect by embedding the image in source code:

(on Youtube main page, right click background to display it, then right click the image and "display image properties" [ffox]):

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

I tried to discover where this line of code is in the source code, but due to the dynamic creation, I couldn't.

So, my question is: "Is there a way to apply a tiled background to a page, using a png image generated algorithmically CLIENT-SIDE?" (preferrably with javascript)

I am very beginner in webdev and javascript, but I like to base my learning around defined problems to be solved, so this would be a nice way to learn something

Thanks for reading!

UPDATE:

For anyone interested in tile texture generation using javascript, I found this, which seems very interesting:

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

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

解决方案

To generate image client-side, I suggest you to have a look to HTML5 canvas element.

You can draw on a canvas with Javascript (even if the canvas element is hidden), and so generate anything you want (including a simple noise tile).

Resource to learn Canvas drawing : https://developer.mozilla.org/en/Drawing_Graphics_with_Canvas

After that, you can export your canvas as URL with the method toDataURL (a string like "data:image/png;base64....") which is interpreted by browsers like a traditionnal url for an image, so you can set it as css background for your body element.

Warning 1 : Canvas is supported by all modern browsers and you can emulate it on IE with ExplorerCanvas - but I don't know if ExplorerCanvas support .toDataURL()

Warning 2 : Canvas is resolution-dependant, so I suggest you to generate a little tile (32*32, or 64*64) and repeat it

Edit : An example of tiled background : http://jsfiddle.net/SfzPc/12/

Edit 2 : An completed example with a noisy background : http://jsfiddle.net/SfzPc/14/

这篇关于一种使用javascript创建随机噪声背景图像（png）的方法？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！