Rendering images with Canvas and outputting elsewhere

HTML5 Canvas is probably the most hyped member of the HTML5 clan because there is so much that can be done with it. It is set to be the way of coding games for the next few years on the web and will be the biggest killer of Flash. A lot of people will use the canvas in the form of the HTML element and draw to it on the fly which is useful, but what do you do if you want to save it or display it in an image object?

Canvas provides a rather useful function that allows you to get the image data which can then either be displayed in an image or sent to the server for conversion. Here is how you can display the canvas content in an image:

document.getElementById("some-img").src = some_canvas_object.toDataURL();

The toDataURL() function can take the image type, which could include image/png, image/jpeg, image/gif, etc. This then returns the data which can then simply be put into an image. This is useful if you need to modify the content of an image. One option for saving the image on a users’ computer would be to use the HTML5 File API but this is still work in progress so instead it is easy to AJAX and PHP to save it to a server. Here is the JavaScript:

var content = canvas.toDataURL();
var ajax = new XMLHttpRequest();
ajax.open("POST", "saveimage.php", false);
ajax.setRequestHeader('Content-Type', 'application/upload');
ajax.send(content);

Here is the PHP script saveimage.php:

if (isset($GLOBALS["HTTP_RAW_POST_DATA"]))
{
$imageData=$GLOBALS['HTTP_RAW_POST_DATA'];
$imageData=substr($imageData, strpos($imageData, ",")+1);
$imageData=base64_decode($imageData);
$fp = fopen( 'test.png', 'wb' );
fwrite( $fp, $imageData);
fclose( $fp );
}

That is all there is to it!

Compressing images for the web

These days the web is full of images. It is almost ironic that they were originally going to get left out of the first HTML standard, however they sensibly got put in. Images are probably the most highly used web media. The problem with images is that they have to be compressed so that they can load more quickly and can be used more efficiently. Compression is not only important client side, but it can also by vital server side if you have a limit on space. Here are a list of ways you could compress your image:

1. Changing the size

This probably seems really dumb to most users, but it actually quite obvious and can really help you. If you have an image that only needs to be shown at 100 by 75 on a website don’t leave it at 1024 by 768 – you are wasting bandwidth considerably. Even if you only upload a low-res version you probably also want to keep a high resolution version as well in case you need to update your site for screens with higher resolutions. For image search you may also want to consider having an image between 640 by 480 and 1024 by 768 as these are common screen sizes. If you do use a small image on the website, link to the bigger version as the bigger version will show up better for search engines.

2. Changing compression options

Compression can make really small files. Most image editors will give you options on how you want to compress your image and what quality you want to save it at. Simply lowering the quality allows for smaller files. If your image is very small you could also consider reducing the color depth from 24-bit to 16-bit or 8-bit. If there are few colors in the image, this can be useful.

3. Changing the format

You are living in the dark ages if you think it is sensible to upload a .BMP file to the web. Please don’t. Different formats offer different forms of compression. The three main formats are PNG, JPEG and GIF. GIF works a little bit like algebra in that it remembers the number of pixels of a certain color. In a very simple image format five red pixels may be stored as RRRRR where as GIF would just save 5R. GIF is also very useful for ugly animation. PNG works in a similar, but more complex, way and allows for 32-bit images with transparency. PNG doesn’t allow for animations. JPEG tends to be the king of the image formats and can generate incredibly small files, however you do lose quality significantly more than in other formats. In my experience GIF tends to be best for small graphics, PNG best for larger graphics that need transparency and JPEG for everything else. I have also found that when exporting a photo from Photoshop PNG files tend to be larger than JPEG files. JPEGs are by far best at photos – especially large ones.

4. On the fly at the server

This is a really stupid technique that just came into my head. Some websites use PHP to create thumbnails as PHP can also generate image files as well as normal text files. There is a library that does this. If you really needed to you could upload the file once and then use PHP to request it at different resolutions, though it would probably easier to run the script once to generate the smaller files.

5. Using new technologies

Websites such as JPEGmini allow you to dramatically compress your images (sometimes making them 5x smaller) by changing compression methods to the most efficient one. This can be very useful. Another option would be to use Google’s WebP technology which is a new image format that allows for incredibly small files – you can read about it on their site.

As well as these five there are many other techniques, though the first three (and maybe JPEGmini) are probably your best bets. The best method, though, is to learn what works for different images.

Full RGB Image

This image shows all the possible colors that can be represented on the RGB color spectrum. It was produced by a simple C# program, and then compressed by Photoshop. The top-left is R0G0B0 and the bottom-right is R255G255B255.

Hint: How to get Ubuntu 11.04 quickly when it is released

I know that I am going to be one of those geeks that downloads Ubuntu 11.04 the day it comes out (or the day after, when I have the day off because of the Royal Wedding) however, I have a variety of options on how to download it. The first is to just update my current installation, and whilst this could be a very sensible approach for most people, I am choosing not to take this because I have three computers that need updating, and I don’t want to have to follow through the procedure three times. Therefore I am going to need to get the ISO.

Because the site will be ludicrously slow, you are going to need a better approach, and there are two. The first is to use a torrent, which could be a very sensible approach because you may end up getting the download from somewhere very nearby – you may even be getting it from someone across your street. I don’t like torrents that much because I’ve had slow experiences with them in the past, however I know that they can be very useful, so I shall still recommend it.

The second, and probably less know approach is to go to the Alternate Download page and then find the ‘location near me’ link. This will bring you through to a download server that is closest to you, meaning that you’ll be able to get it quicker. I strongly advise many people to take this approach, because whilst the Ubuntu servers are generally very good at coping with large amounts of traffic, if people use nearby downloads it will take the strain off all the other servers, so everyone gets it quicker. Lets all be sensible and open about this, and download Ubuntu from different servers…