html - A way to create random-noise background image (png) with javascript? - Stack Overflow

admin管理员组

文章数量:1221386

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 .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:

/

.js

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

• javascript
• html
• png
• background-image
• client-side

Share Improve this question Follow edited Dec 20, 2011 at 20:07 heltonbiker asked Dec 20, 2011 at 19:00 heltonbikerheltonbiker 27.6k3030 gold badges149149 silver badges267267 bronze badges 5

• Hmm, you have to look very closely, but the image is indeed not a solid gray color. – Kirk Woll Commented Dec 20, 2011 at 19:02
• Yeah, put it on a tiling pattern, and you end up with something that seems "paperish" natural texture. I wonder if the same effect could be obtained with a much smaller-sized square. – heltonbiker Commented Dec 20, 2011 at 19:07
• algorithmically generating the image seems like overkill. You need it to be different on every page load or something? – Mike Ruhlin Commented Dec 20, 2011 at 19:36
• Here's a webapp you can use to convert your own images into a base64 representation. greywyvern.com/code/php/binary2base64 You could re-implement it in javascript easily enough, but why bother? – Mike Ruhlin Commented Dec 20, 2011 at 19:38
• 1 Add my name to the list of people who thinks this is a bad idea. Generating a PNG image is a CPU-intensive task, and should not be done on every page load. It should be done once and then saved as a png file (better for page load speed over a slow connection, especially with large images), or embedded with base64 (better for page load speed over a fast connection, especially with small images). – Abhi Beckert Commented Dec 20, 2011 at 19:46

Add a comment  | 

4 Answers 4

Sorted by: Reset to default 6

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: http://primegap.net/2011/10/20/noisegen-generate-background-noise-with-jquery/

Noisy: https://github.com/DanielRapp/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.

本文标签： htmlA way to create randomnoise background image (png) with javascriptStack Overflow