Javascript: Отправка изображения на канвасе на сервер

Спасибо, за пример. Хочется больше материалов про Canvas, JS и HTML5.

в опере полёт нормальный однако замечен баг, оперный видимо если на холсте нарисовать мышинный жест «назад» вниз и влево, то событие mouse up не произойдет и вернувшись на таб с холстом мы продолжим на нём рисовать.

По многочисленным просьбам читающих могу перенести это в другой открытый блог. Web-разработка, например.

Интересно посмотреть, что там понаотправляли тестирующие демку. Галерею сделайте, что-ли.

В своём html5-редакторе я сделал попроще. Передал на сервер base64 как строку и уже на сервере декодировал.

Client-side

buttons['save'].click(function () {
		new Request({ // MooTools
				url  : 'http://5iton.com/save.php',
				data : { image : canvas.toDataURL() },
				onComplete : function (url) {
						if (confirm('Image saved, url is : \n' + url + '\nDo you want to open it?')) {
								location.href = url;
						}
				}
		}).send();
});

Server-side

$name = md5($data);
$file = __DIR__ . "/uploads/$name.png";
if (!file_exists($file)) {
		$image = str_replace(" ", "+", $data);
		$image = substr($image, strpos($image, ","));
		file_put_contents($file, base64_decode($image));
}
exit("http://5iton.com/uploads/$name.png")

Кстати, использование в качестве имени md5($data) позволяет не дублировать одинаковые картинки (например, когда отправляют на сохранение просто белое изображение)

Кстати, есть два бага.
Первый — это когда тёмная система. У вас не указан background: white, потому я рисую чёрным цветом по чёрному фону
Второй — это когда есть скролл и он сдвинут. Я так понимаю, у вас координаты считаются от левого-верхнего угла и не учитывают сдвиг.

Можно указать ссылку в топике: www.nihilogic.dk/labs/canvas2image/ близкую к теме
И перенести в блог Javascript

Как уже выше писали, можно передать просто base64 как строку методом POST

Скажите, а вы случайно не видели решения, как передать изображение методом GET? Это нужно, например, для передачи изображения с одного домена на другой.
Я для себя решил эту задачу, разделив base64 строку на множество подстрок и отправляя множеством запросов GET (в параметрах так же указываю номер подстроки, чтобы потом можно было склеить изображение целиком).
Однако, изображение не всегда приходит целое.