Bir tarayıcı tuvalinden resim kaydetme

Question

Şu anda ASP .NET MVC'de bir web sitesi geliştiriyorum ve bir kullanıcının bir veritabanına kaydedilebilecek bir tuval üzerine resim çizebilmesi için işlevsellik isterim. Bunu yapmak için en iyi yöntem nedir? tercihen çok hafif bir çözümdür. Flaşın en erişilebilir platform olacağını düşünüyordum ve bazı iyi ücretsiz çözümler olabilir.

Teşekkür

Answer 1

Flash, bunu yapmak için arka taraf kurulumunuzu almanız gerekmesine rağmen oldukça kolay bir şekilde yapabilir. Temel olarak, sahnenizde bir piksel veriye kadar herhangi bir şey çizebilir, daha sonra, örneğin .PNG belirtimine uymak için bu bytearray'i kodlayabilirsiniz. Sonra tüm paketi bir bayt dizisi olarak arka ucunuza gönderirsiniz ve sunucu tarafı komut dosyalarınızın sunucunuza bir .png dosyası olarak yazıldığından emin olun, ardından veritabanınızdaki konumu kaydedin. bu mantıklı mı?

geniş bir örnek

Flex Cookbook'u burada bulunabilir: http://cookbooks.adobe.com/post_Creating_a__png_file_from_a_webcam_image-12732.html

Answer 2

Sen Silverlight böyle bir şey yapmak gerekir ... Silverlight, zorlanmadan, muktedir hat vuruşları içine fare hareketleri tercüme edilmelidir. Ben de saf bir JavaScript çözümü olup olmadığını bilmiyorum.

Answer 3

Bunu DotNet'te tuvali kullanarak yapabilirsiniz. http://www.websupergoo.com/helpig6net/source/3-examples/1-drawimage.htm

Flash kullanmaya gerek yok: İşte

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

öğretici olduğunu.

Answer 4

bir görüntü kaydetme mükemmel bir yol doğal toDataURL yöntemini kullanmaktır.

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

Oradan sunucu

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

için uyumsuz olarak yayınlayabilirsiniz ve görüntüye dönüştürmek 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'); 

Düzenleme: unuttum Oh ve tabii ki IE'nin tuvali desteklemediğini, dolayısıyla toDataURL yöntemini desteklemediğini söyleyin. Kaşif tuval çözümü ile bile.

Answer 5

Kullanıcı MouseUp, mouseDown ve MouceMove olayları ile birlikte LintTo, bir resim çizmek için tuval hareketlerini (tüm javascript) ve ardından paint.toDataURL() öğesini kullanarak bu resmi yr veritabanındaki base64 dizesine kaydedin.