onsdagen den 27:e oktober 2010

HTML 5 Canvas and .toDataURL

the Canvas object in HTML 5 contains alot of great things
one of the interesting things is that it has a implemented method to get the data inside the canvas as a base64 encoded string.

So if you would
var img1=new Image();
img1.src="Image1.jpeg";
var img2=new Image();
img2.src="Image2.jpeg";
var canvas=document.createElement('canvas');
canvas.width=300;
canvas.height=300;
var canvas2d=canvas.getContext("2d");
canvas2d.drawImage(img1,0,0);
canvas2d.drawImage(img2,100,100);
var data=canvas.toDataURL();

Data will now contain a png image with both the images.
Encoded using base64 easy to send using ajax or store in a field.
You can draw images, plot dots, draw lines, boxes.

There is some online painting sites that already is using this.


Enhanced by Zemanta

Inga kommentarer:

Skicka en kommentar