Comments 22
Спасибо, за пример. Хочется больше материалов про Canvas, JS и HTML5.
+2
в опере полёт нормальный однако замечен баг, оперный видимо если на холсте нарисовать мышинный жест «назад» вниз и влево, то событие mouse up не произойдет и вернувшись на таб с холстом мы продолжим на нём рисовать.
0
По многочисленным просьбам читающих могу перенести это в другой открытый блог. Web-разработка, например.
0
Интересно посмотреть, что там понаотправляли тестирующие демку. Галерею сделайте, что-ли.
0
В своём html5-редакторе я сделал попроще. Передал на сервер base64 как строку и уже на сервере декодировал.
Client-side
Server-side
Кстати, использование в качестве имени
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)
позволяет не дублировать одинаковые картинки (например, когда отправляют на сохранение просто белое изображение)+1
Как подсветку сделать?
0
Так я так и делал. Только посылал это всё не в виде строки, а в файле.
Как бы подумал, что если будут специально отправлять большие данные, то моему скрипту на сервере,
будет пофигу.
Просто думаю, что обычный POST-параметр не сможет принимать такое количество данных,
сколько можно передать в файлах.
Как бы подумал, что если будут специально отправлять большие данные, то моему скрипту на сервере,
будет пофигу.
Просто думаю, что обычный POST-параметр не сможет принимать такое количество данных,
сколько можно передать в файлах.
0
всё, нашёл, как подсветку делать.
0
Кстати, есть два бага.
Первый — это когда тёмная система. У вас не указан background: white, потому я рисую чёрным цветом по чёрному фону
Второй — это когда есть скролл и он сдвинут. Я так понимаю, у вас координаты считаются от левого-верхнего угла и не учитывают сдвиг.
Первый — это когда тёмная система. У вас не указан background: white, потому я рисую чёрным цветом по чёрному фону
Второй — это когда есть скролл и он сдвинут. Я так понимаю, у вас координаты считаются от левого-верхнего угла и не учитывают сдвиг.
0
Можно указать ссылку в топике: www.nihilogic.dk/labs/canvas2image/ близкую к теме
И перенести в блог Javascript
И перенести в блог Javascript
0
Как уже выше писали, можно передать просто base64 как строку методом POST
Скажите, а вы случайно не видели решения, как передать изображение методом GET? Это нужно, например, для передачи изображения с одного домена на другой.
Я для себя решил эту задачу, разделив base64 строку на множество подстрок и отправляя множеством запросов GET (в параметрах так же указываю номер подстроки, чтобы потом можно было склеить изображение целиком).
Однако, изображение не всегда приходит целое.
Скажите, а вы случайно не видели решения, как передать изображение методом GET? Это нужно, например, для передачи изображения с одного домена на другой.
Я для себя решил эту задачу, разделив base64 строку на множество подстрок и отправляя множеством запросов GET (в параметрах так же указываю номер подстроки, чтобы потом можно было склеить изображение целиком).
Однако, изображение не всегда приходит целое.
0
Sign up to leave a comment.
Javascript: Отправка изображения на канвасе на сервер