Guardar una imagen desde un lienzo del navegador

Question

Actualmente estoy desarrollando un sitio web en ASP .NET MVC y requiero la funcionalidad para que un usuario pueda dibujar una imagen en un lienzo que se puede guardar en una base de datos. ¿Cuál es el mejor método para hacer esto? preferiblemente una solución muy ligera. Pensaba que el flash sería la plataforma más accesible y que podría haber algunas buenas soluciones gratuitas.

Gracias

Answer 1

Flash puede hacerlo bastante fácilmente, aunque tendrá que configurar su back-end para habilitarlo. Básicamente puede dibujar cualquier cosa en su escenario a través de una serie de datos de píxeles, y luego codificar esa bytearray para cumplir, por ejemplo, con la especificación .PNG. Luego, envía todo el paquete a su back-end como una matriz de bytes y se asegura de que sus scripts del lado del servidor sepan que lo escribe como un archivo .png en su servidor, y luego guarda la ubicación en su base de datos. ¿Tiene sentido?

Una amplia ejemplo se puede encontrar aquí en el libro de cocina de Flex: http://cookbooks.adobe.com/post_Creating_a__png_file_from_a_webcam_image-12732.html

Answer 2

Usted debe ser capaz de hacer algo como esto en Silverlight Silverlight ... deben ser capaces de, sin dificultad, traducir los movimientos del ratón en la línea de trazos. No sé si también hay una solución de JavaScript pura.

Answer 3

Puede hacer esto en DotNet usando el lienzo.

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

Aquí está el tutorial: http://www.websupergoo.com/helpig6net/source/3-examples/1-drawimage.htm

No hay necesidad de utilizar el flash.

Answer 4

Una excelente manera de ahorrar una imagen es utilizar el método nativo toDataURL.

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

Desde allí se puede colocar de forma asíncrona con el servidor

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

y convertirla en una imagen utilizando 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'); 

Editar: Ah, y por supuesto se me olvidó decir que IE no es compatible con lienzo, por lo tanto, no hay método toDataURL. Incluso con la solución de lona del explorador.

Answer 5

Usuario MouseUp, mouseDown y MouceMove eventos junto con LintTo, MoveTO eventos de canvas (todos javascript) para dibujar una imagen y luego utilizar canvas.toDataURL() para guardar esta imagen en una cadena base64 en la base de datos yr.