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/
You can use CSS to display this image:
#someimageselector {
background: white url('data:image/png;base64,iVBOR...lots of data') repeat scroll left top;
}
You can change the initial color of your background by editing the value white.
To set CSS with JavaScript, set the background property of an element:
document.getElementByID("someimageselector").background = 'white url(data:image/png....';
There are two jQuery plugin libraries that do exactly what you are looking for: NoiseGen and Noisy. Haven't used either yet but they both look pretty good.
NoiseGen
- Project: http://primegap.net/2011/10/20/noisegen-generate-background-noise-with-jquery/
- Demo: http://www.lucaongaro.eu/demos/noisegen/
Noisy
Fyi: Base64 is binary data represented as a string. Most likely the original image still came out of Photoshop and was later encoded into Base64. This technique helps having less http-requests per page view, as the actual image data can be saved and cached inside the css or html document.
来源：https://stackoverflow.com/questions/8580541/a-way-to-create-random-noise-background-image-png-with-javascript