8

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

enter image description here

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

heltonbiker
  • 26,657
  • 28
  • 137
  • 252
  • Hmm, you have to look very closely, but the image is indeed *not* a solid gray color. – Kirk Woll Dec 20 '11 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 Dec 20 '11 at 19:07
  • algorithmically generating the image seems like overkill. You need it to be different on every page load or something? – Mike Ruhlin Dec 20 '11 at 19:36
  • Here's a webapp you can use to convert your own images into a base64 representation. http://www.greywyvern.com/code/php/binary2base64 You could re-implement it in javascript easily enough, but why bother? – Mike Ruhlin Dec 20 '11 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 Dec 20 '11 at 19:46

4 Answers4

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/

Thomas Guillory
  • 5,719
  • 3
  • 24
  • 47
  • But how to make visual noise? It's much more difficult than making a perfect circle :) – Rudie Dec 20 '11 at 19:48
  • Although I do not know yet how to perform the given steps (a little bit of working code would be nice), this is what I was thinking when I asked, generating (and possibly caching) a small square tile. Visual noise generation is a separate, language-independent algorithm, so when I get a good one, I'll implement it using Canvas. Also, I phylosophically sympathize with the Canvas workflow. But that is debatable, of course. – heltonbiker Dec 20 '11 at 19:54
4

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....';
Kevin Ji
  • 10,479
  • 4
  • 40
  • 63
  • Your answer worked, and I liked the trick. Just one last chance: is it possible/good-practice to algorithmically generate the png data using javascript? – heltonbiker Dec 20 '11 at 19:19
  • It is possible, but for users that have JavaScript disabled, you probably should have a backup image. In this particular case, JavaScript isn't needed. It's probably best to generate an image once, and then save it (if possible). – Kevin Ji Dec 20 '11 at 19:21
2

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

Noisy

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
jshkol
  • 1,777
  • 14
  • 19
1

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.

igl
  • 106
  • 1
  • 2