Сохранение картинки из холста браузера

Question

В настоящее время я занимаюсь разработкой веб-сайта в ASP .NET MVC, и мне требуются функциональные возможности, чтобы пользователь мог рисовать рисунок на холсте, который можно сохранить в базе данных. Каков наилучший метод для этого? желательно очень легкое решение. Я думал, что flash будет самой доступной платформой, и могут быть хорошие бесплатные решения.

Спасибо

Answer 1

Отличный способ сохранить изображение - использовать собственный метод 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 не поддерживает canvas, поэтому нет метода toDataURL. Даже с обходным приемом explorer canvas.

Answer 2

Вы можете сделать это в DotNet, используя canvas.

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

Вот учебник: http://www.websupergoo.com/helpig6net/source/3-examples/1-drawimage.htm

Нет необходимости использовать Flash.

Answer 3

Flash может сделать это довольно легко, хотя вам придется настроить свой бэкэнд, чтобы включить его. По сути, вы можете нарисовать что-нибудь на своей сцене в виде байтового массива данных пикселей, а затем кодировать этот байтовый массив, чтобы соответствовать, например, спецификации .PNG. Затем вы отправляете весь пакет на бэкэнд в виде байтового массива и убедитесь, что ваши серверные сценарии знают, как записать его в виде файла .png на ваш сервер, а затем сохраните местоположение в вашей базе данных. Имеет ли это смысл?

Широкий пример можно найти здесь, в Flex Cookbook: http://cookbooks.adobe.com/post_Creating_a__png_file_from_a_webcam_image-12732.html

Answer 4

Пользовательские события MouseUp, mouseDown и MouceMove вместе с событиями LintTo, MoveTO canvas (все в формате javascript) для рисования изображения и последующего использования canvas.toDataURL () для сохранения этого изображения в строке base64 в базе данных yr.

Answer 5

Вы должны иметь возможность делать что-то подобное в Silverlight ... Silverlight должен без труда переводить движения мыши в штрихи. Я не знаю, есть ли чистое решение JavaScript тоже.