文章源自:http://simeonvisser.hubpages.com/hub/HTML5-Tutorial-How-To-Use-Canvas-toDataURL

HTML5 Tutorial: How to Get and Set a Base64 Image on Canvas using toDataURL

What is base64?

Base64 is a way of representing data using only readable characters like letters, numbers and some symbols like the plus symbol. This data can be anything, like an image or a file, but commonly it is data that is not plain text (otherwise there is not much point in converting it to base64, is there?).

This representation, also known as a base64 string, is very useful because it can be used anywhere that normal text can also be used. It makes it easier to store the images - you can have several images in a plain text file for example.

The exact details of how base64 works are not relevant for this tutorial. All that matters is that base64 is a different way of representing the same visual image data but in a textual way. I'll refer the interested reader to the base64 article on Wikipedia if you want to know more.

How to get canvas image data using toDataURL()

The canvas in HTML5 has a method called toDataURL() that you can call to turn a HTML5 canvas into a PNG image and to get the image data of that canvas. By default it will give you a base64 representation of the image in PNG format. In simpler terms: you will get a PNG image but it has been encoded in base64. For the toDataURL() method, the PNG format is the only image format that is supported by all HTML5-compliant web browsers. Some browsers support multiple image formats.

You can call toDataURL with an argument, such as "image/jpeg" or "image/png" if you want to specify which image format you want. We don't need to worry about this and we can simply call toDataURL without arguments to get a PNG image in base64 representation. Be aware that the HTML5 standard only requires browsers to support PNG for toDataURL so it is best to use that image format if you want to make your code work in all web browsers.

In the following code we have a canvas and we are calling the toDataURL() method to get the image data:

<canvas id="mycanvas" width="300" height="300">
</canvas>
<script type="text/javascript">
var canvas = document.getElementById('mycanvas');
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(100, 100, 50, 1.5 * Math.PI, 0.5 * Math.PI, false);
ctx.lineWidth = 10;
ctx.stroke();
var imgData = canvas.toDataURL();
</script>

The variable imgData now contains a base64 representation of the image currently on the canvas. It looks something like this: data:image/png;base64,iVBORw0 ... AAAElFTkSuQmCC. I have only shown the beginning and the end of the data because it would be too much to show it all. As you can see it starts with "data:", then the image type ("image/png"), then the encoding ("base64") and finally all the data of the image in text.

Simply by calling toDataURL() we have turned the image into a textual representation. That's a good thing because text is a lot easier to share or to send. In fact, if you were to copy this whole textual representation of the image and you would send it to someone else, they can paste it into the address bar of their browser and they will see the image.

How to load base64 image data on a HTML5 canvas

You now also want to do the reverse: if you have a base64 representation of an image, how can we load that base64 image data onto a HTML5 canvas? This is not difficult because we can simply create an Image, assign the data to that image and then draw the image. Here is the JavaScript code to do just that:

var myImage = new Image();
myImage.src = imgData;
ctx.drawImage(myImage, 0, 0);