Saving an image from a browser canvas

Question

I am currently developing a website in ASP.NET MVC and require that the user can draw an image on the canvas that can be saved to the database. What is the best method to do this? preferably a very easy solution. I thought flash would be the most affordable platform, and there might be some good free solutions.

thank

Answer 1

Flash can do this quite easily, although you will need to set up your background server to enable it. Basically, you can draw something on your scene based on the pixel data, and then encode that the bytearray matches, for example, the .PNG specification. Then you send the whole package to your back as a byte array and make sure your server scripts know to write it as a .png file to your server and then save the location in your database. It makes sense?

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

Answer 2

You can do this in DotNet using the canvas.

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

: http://www.websupergoo.com/helpig6net/source/3-examples/1-drawimage.htm

Flash.

Answer 3

toDataURL.

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

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

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: , , , , IE canvas, , toDataURL. .

Answer 4

- Silverlight... Silverlight . , JavaScript.

Answer 5

Custom MouseUp, mouseDown, and MouceMove events along with LintTo, MoveTO canvas events (total javascript) to draw an image, and then use canvas.toDataURL () to save that image to base64 string in the yr database.