Открыть список
Как стать автором
Обновить

Комментарии 22

Спасибо, за пример. Хочется больше материалов про Canvas, JS и HTML5.
в опере полёт нормальный однако замечен баг, оперный видимо если на холсте нарисовать мышинный жест «назад» вниз и влево, то событие mouse up не произойдет и вернувшись на таб с холстом мы продолжим на нём рисовать.
Cпасибо, запретил рисование правой кнопкой мыши. Перезалил исходные коды.
Я добавил в обработчик нажатия клавиши
if (e.button != 0) {
return;
}
зря, я зарепортил баг, как проверят то? ) может вернуть?
По многочисленным просьбам читающих могу перенести это в другой открытый блог. 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) позволяет не дублировать одинаковые картинки (например, когда отправляют на сохранение просто белое изображение)
Как подсветку сделать?
Так я так и делал. Только посылал это всё не в виде строки, а в файле.
Как бы подумал, что если будут специально отправлять большие данные, то моему скрипту на сервере,
будет пофигу.
Просто думаю, что обычный POST-параметр не сможет принимать такое количество данных,
сколько можно передать в файлах.
всё, нашёл, как подсветку делать.
Кстати, есть два бага.
Первый — это когда тёмная система. У вас не указан background: white, потому я рисую чёрным цветом по чёрному фону
Второй — это когда есть скролл и он сдвинут. Я так понимаю, у вас координаты считаются от левого-верхнего угла и не учитывают сдвиг.
ага, спасибо, исправлю.
спасибо, добавил в статью.

Но у них есть пресловутый баг, когда начинаешь рисовать и заводишь
мышку за канвас, потом её отпускаешь вне канваса и возвращаешь обратно мышка все равно рисует.
Как уже выше писали, можно передать просто base64 как строку методом POST

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