Приложение Paint в Flask
Flask - это легкий фреймворк для веб-приложений, написанный на Python. Flask также известен как микро-фреймворк и основан на наборе инструментов Werkzeug WSGI и движке шаблонов Jinja2.
Приложение для рисования может быть создано с использованием холста HTML5 и JavaScript. PostgreSQL используется как серверная база данных. Это приложение можно использовать для рисования изображения и его сохранения.
Это обычный макет моего приложения для рисования. Только содержимое блока (между {% block content%} и {% endblock%}) изменяется от страницы к странице.
Наша домашняя страница - paint.html. Это холст для рисования картины. Предоставляются основные инструменты, такие как карандаш, линия, прямоугольник, круг, ластик. Также доступен инструмент сброса холста. На выбор доступны 64 различных цвета. Фигуры можно рисовать как в стиле контура, так и в стиле заполнения. Для увеличения пикселя в инструментах предусмотрены кнопки «Пиксель +» и «Пиксель-». Доступна опция сохранения изображения.
Это элемент холста для рисования картинок.
<canvas id="paint" width="750" height="450" style="border: 5px solid #000000;">Update your browser to support HTML5 Canvas</canvas>
Ниже приводится скрытый код JavaScript.
Инструменты приведены ниже.
Инструмент «Карандаш» выбран для демонстрации работы. Когда мы нажимаем на кнопку карандаша, вызывается функция карандаша ().
canvas.onmousedown, canvas.onmousemove, canvas.onmouseup, canvas.onmouseout эти четыре функции обработки событий мыши на холсте используются для отслеживания мыши внутри области холста. Функция draw () используется для рисования изображения в соответствии с событиями мыши. Эта функция рисования также подталкивает начальные, конечные координаты и толщину, цвет, выбранный для объекта JSON, который позже будет использоваться для перерисовки изображения.
Это функция цвета, используемая для выбора цвета.
Это функции, используемые для увеличения и уменьшения пикселей рисунка.
Функции fill (), outline () используются для выбора стиля рисования фигур внутри холста.
Эта функция save () используется для сохранения нарисованного изображения. Требуется имя файла, введенное в текстовое поле имени файла. JQuery используется для отправки информации об имени файла и объекте JSON на страницу «/».
Это функция просмотра. При получении запроса GET он просто отображает страницу paint.html. Функция сохранения отправляет информацию в эту функцию просмотра. Таким образом, также предоставляется код для обработки этого запроса POST. Вставка информации в базу данных происходит внутри этого блока.
База данных настраивается следующим образом.
Также предусмотрена возможность просмотра сохраненного изображения. Когда мы нажимаем на ссылку галереи, она приводит нас к списку сохраненных изображений. Выбрав имя, мы можем просмотреть изображение. Вставленный в базу данных объект JSON используется для перерисовки изображения. Перерисовка аналогична рисованию внутри холста.
Вот весь код.
Первоначально опубликовано на http://nidhinp.wordpress.com 19 февраля 2014 г.
