Saving a picture from a browser canvas.

Question

Hello

I'm currently developing a website in ASP .NET MVC and I require functionality for a user to be able to draw a picture on a canvas which can be saved in a database. What is the best method for doing this? preferably a very lightweight solution. I was thinking flash would be the most accessible platform and there may be some good free solutions.

Thanks

Answer 1

Hey,

You should be able to do something like this in Silverlight... Silverlight should be able to, without difficulty, translate the mouse movements into line strokes. I don't know if there is a pure JavaScript solution too.

Answer 2

if you want to draw using a paint like program try using OEKAKI. you can't save but it looks very nice

Answer 3

You can do this in DotNet using the canvas.

canvas.SaveAs(dstfile, "Quality=high");

Here is the tutorial: http://www.websupergoo.com/helpig6net/source/3-examples/1-drawimage.htm

No need to use Flash.

Answer 4

Flash can do it pretty easily, though you'll have to get your back-end set up to enable it. Basically you can draw anything on your stage to a bytearray of pixel data, then encode that bytearray to comply with for instance the .PNG specification. Then you send the whole package over to your back end as a byte array and make sure that your server-side scripts know to write it as a .png file to your server, then save the location in your database. Does that make sense?

A broad example can be found here on the Flex Cookbook: http://cookbooks.adobe.com/post_Creating_a__png_file_from_a_webcam_image-12732.html

Answer 5

An excellent way of saving an image is to use the native toDataURL method.

var element = document.getElementById('drawingCanvas');
var data = element.toDataURL();
// data holds the base64 encoded image of the canvas

From there you can post it asynchronously to the server

$.ajax({
    'type': 'post',
    'dataType': 'json',
    'data': {'image': data},
    'url': '/json/image_converter.php'
});

and convert it to an image using ImageMagick:

list($header, $data) = explode(',', $_POST['image']);
$image = base64_decode($data);

$magick = new Imagick();
$magick->setFormat('png');

$magick->readImageBlob($image);

$magick->writeImage('/home/dude/imagefile.png');

Edit: Oh, and of course I forgot to say that IE doesn't support canvas, hence no toDataURL method. Even with explorer canvas workaround.

Answer 6

User MouseUp,mouseDown and MouceMove events along with LintTo,MoveTO events of canvas (all javascript) to draw a picture and then use canvas.toDataURL() to save this picture in a base64 string in yr database.