HTML5 Canvas. Рисование мышкой. Часть 3

Дата публикации:4 мая 2013 г. 22:28:37

Здравствуйте! Первая часть здесь, вторая часть здесь. Если вы их еще не читали, то советую прочесть. Итак, сегодня мы добавим возможность очистки холста и научимся сохранять наше итоговое изображение на сервере. Приступим.

Для начала, добавим кнопку в наш html. Пишем:

<input type = "button" id = "clear" name = "clear" value = "Очистить" />

Затем идем в наш JS файл и добавляем в него:

document.getElementById('clear').addEventListener('click', function() {
    context.clearRect(0, 0, canvas.width, canvas.height);
}, false);

Все, теперь при нажатии на кнопку, холст будет очищаться. Осталось научиться сохранять итоговое изображение. Я буду писать для Django. Итак, открываем наше представление, которое будет принимать POST запрос, но перед этим создайте форму (не забудьте добавить csrf_token). В представлении пишем:

import re
import os
from django.conf import settings

def ваше_представление(request):
...
    if request.method == 'POST':
        if request.POST.get('canvasData'):
            data = request.POST['canvasData']
            img_data = re.search(r'base64,(.*)', data).group(1)
            img_file = open(os.path.join(settings.MEDIA_ROOT, 'photo.png'), 'wb')
            img_file.write(img_data.decode('base64'))
            img_file.close()
...

В наш JS файл добавьте в функцию img_update() следующую строчку (причем добавьте ее в начало функции):

document.getElementById("canvasData").value = canvas.toDataURL("image/png");

Теперь html. Нам нужно создать форму и два input. Один скрытый, значение которого мы будем передавать через POST запрос и submit. Итак, пишем:

<form method = "POST" action = "" enctype = "multipart/form-data">{% csrf_token %}
    <input type = "text" id = "canvasData" name = "canvasData" />
    <input type = "submit" value = "Сохранить" />
</form>

Собственно, это все. :) Спасибо за внимание!

Метки:python, django, js, html5, canvas, урок