I'm going to be fast and loose about how to use a canvas. If you don't know anything about using a canvas from javascript, you might want to look at HTML5 Canvas Basics.
In August of 1998, a "data" URL scheme was published as RFC 2397. (If you don't know what an RFC is, see RFCs and a Script to get them) It allows you to embed data in your web page instead of making separate requests across the web. As an example, the image of me you see here is represented in this web page by 166 lines of data that starts like:
I made it by loading the original picture into gimp, setting the graphics mode to indexed with an optimized pallete (to reduce the file size), exporting as a png file (a nice portable open format), and then using the base64 application on linux to encode the result into a text file. Then from my editor (vi), I read it in between the comma and the last quote in:
Another way to get a data url, is to draw anything you want on a canvas, and then ask the canvas to give you back what you've drawn as a data url by calling its toDataURL() method. At that point you can assign the returned value as the src value of anything that you'd normally use image data for. For example you can do this:
Which is just how I got this orange dot to appear. Given the image tag in the document with the id 'bigdot', I can create a canvas, draw the dot on it, ask it for the data url and then set the src field for the img tag to it.
Recently I made a page for minecraft designers that wanted to make circles out of blocks . I had two needs that canvas could meet. First, if the images I needed for grass and stone wouldn't load, I wanted to make blank squares of the appropriate color to substitute, and second, no matter how I got the images, every time someone changed the number of blocks across, I needed to scale the stone and grass images to a particular size to fill up the canvas.
This is a method that uses a canvas to make a rectangle of a particular size. The arguments are:
The first thing we do is deal with our two optional arguments. First, if the border width is not set, we default to 0 pixels, i.e. no border, and then ignore the border color. If border width is specified, then we check to see if the border color is specified, if not we default it to black. Then we make sure our x/ysize arguments are integers.
Create a canvas and set it to the size we were asked to make the image.
Grab the context so we can use it to draw, and then fill the canvas with the requested color.
Now, if they wanted a border, we set the strokeStyle to the passed in border color, and the lineWidth to the passed in border width, and then stroke the edge of the image.
We're almost done. We've gotten the image data from the canvas by calling the canvas' method to DataURL(). We've created a new Image to return to the caller. The only thing left to do is to set the src attribute of the Image to the dataurl. Before we can do that we have to set the onload method of the image. See,
setting the src attribute of an Image object is always asynchronous. That means that if you set it, return the Image and the caller uses it right away, it will probably be blank. That's why we needed to have the caller of our routine pass a callback method. We set the onload of the image to a method that invokes the callback to return the image. Then we set the src attribute of the image.
makerectimage() might be used like this:
We get a reference to an img tag in the html document, set up the callback routine, setdb(), to set the src of the img tag to the src of the returned Image, and then call makerectimage, passing it the arguments that tell it how to draw the image and to callback to our setdb() method when done.
This is a method that takes an image and scales it to a new image. The arguments are:
The first thing we do is to make sure our x/y sizes are integers, make a temporary canvas to draw into, and set its width and height to xsize and ysize.
We draw the image into the canvas at the new size, and voila, we're done scaling the image. Next we need to get it back as an image to return.
The next thing to do is to get the image data from the canvas by calling the canvas' toDataURL() method. Then we only need to create a new Image() set up its onlyad and onerror methods and then assign the dataurl from the canvas to its src attribute. When the image gets done loading it calls the callback passing the scaled image. If there's an error it calls the error callback but returns nothing.
}