Сохранив картинку от холста браузера
Я в настоящее время разрабатываю веб-сайт в ASP.NET MVC, и я требую, чтобы функциональность для пользователя смогла нарисовать изображение на холсте, который может быть сохранен в базе данных. Каков лучший метод для того, чтобы сделать это? предпочтительно очень легкое решение. Я думал, что флэш-память будет самой доступной платформой и могут быть некоторые хорошие бесплатные решения.
Спасибо
5 ответов
Flash справляется с этим довольно легко, хотя вам придется настроить серверную часть, чтобы включить его.По сути, вы можете нарисовать что угодно на своей сцене в байтовый массив пиксельных данных, а затем закодировать этот байтовый массив в соответствии, например, со спецификацией .PNG. Затем вы отправляете весь пакет на свой сервер в виде массива байтов и убедитесь, что ваши серверные сценарии знают, что нужно записать его в виде файла .png на ваш сервер, а затем сохраните местоположение в своей базе данных. Имеет ли это смысл?
Общий пример можно найти здесь, в Flex Cookbook: http://cookbooks.adobe.com/post_Creating_a__png_file_from_a_webcam_image-12732.html
Вы можете сделать это в DotNet с помощью холста.
canvas.SaveAs(dstfile, "Quality=high");
Вот руководство: http://www.websupergoo.com/helpig6net/source/3-examples/1-drawimage.htm
Нет необходимости использовать Flash.
Вы должны уметь делать что-то подобное в Silverlight ... Silverlight должен уметь чтобы без труда переводить движения мыши в штрихи. Я не знаю, есть ли решение на чистом JavaScript.
Отличный способ сохранить изображение - использовать собственный метод 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');
Изменить: О, и, конечно, я забыл сказать, что IE не поддерживает холст, поэтому нет toDataURL метод. Даже с обходным решением для холста проводника.
Используйте события MouseUp,mouseDown и MouceMove вместе с событиями LintTo,MoveTO холста (все javascript) для рисования картинки, а затем используйте canvas.toDataURL() для сохранения этой картинки в строке base64 в базе данных.