Salvataggio di un'immagine da un'area del browser

Question

Attualmente sto sviluppando un sito Web in ASP .NET MVC e ho bisogno di funzionalità per consentire all'utente di disegnare un'immagine su una tela che può essere salvata in un database. Qual è il metodo migliore per farlo? preferibilmente una soluzione molto leggera. Stavo pensando che Flash sarebbe la piattaforma più accessibile e potrebbero esserci alcune buone soluzioni gratuite.

Grazie

Answer 1

Flash può farlo abbastanza facilmente, anche se sarà necessario impostare il back-end per attivarlo. Fondamentalmente puoi disegnare qualsiasi cosa sul tuo palcoscenico con un alone di dati pixel, quindi codificare che bytearray rispetti, ad esempio, le specifiche .PNG. Quindi si invia l'intero pacchetto al proprio back-end come array di byte e si assicura che gli script sul lato server sappiano di scriverlo come file .png sul server, quindi salvare la posizione nel database. Ha senso?

Un'ampia esempio può essere trovato qui sul Flex Cookbook: http://cookbooks.adobe.com/post_Creating_a__png_file_from_a_webcam_image-12732.html

Answer 2

si dovrebbe essere in grado di fare qualcosa di simile in Silverlight ... Silverlight dovrebbe essere in grado di, senza difficoltà, tradurre i movimenti del mouse in linea di colpi. Non so se esiste anche una pura soluzione JavaScript.

Answer 3

È possibile farlo in DotNet utilizzando la tela.

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

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

Non c'è bisogno di utilizzare Flash.

Answer 4

Un ottimo modo di salvare un'immagine è quello di utilizzare il metodo nativo toDataURL.

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

Da qui è possibile inviare in modo asincrono al server

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

e convertirla in un'immagine utilizzando 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, e, naturalmente, ho dimenticato di dire che IE non supporta canvas, quindi nessun metodo toDataURL. Anche con la soluzione per la tela di Explorer.

Answer 5

Utente MouseUp, mouseDown e MouceMove eventi insieme a LintTo, MoveTO eventi di canvas (tutto javascript) per disegnare un'immagine e quindi utilizzare canvas.toDataURL() per salvare questa immagine in una stringa base64 nel database yr.