Сохранение HTML5 холста как данных в базе данных MySQL

Question

Это может быть невозможно, это было бы просто идеально для моей ситуации. Я использую холст html5 в качестве слайдера, который пользователь может рисовать и сохранять на своем локальном компьютере.

Моя цель - вместо этого сохранить это в нашей базе данных каким-то другим способом.

Что я хочу, чтобы произошло:

Холст загружает слайд, и пользователь может рисовать на нем. Как только они нажимают сохранить, он сохраняет данные строк в ячейку в нашей базе данных. Когда пользователь снова входит в систему, чтобы увидеть слайд, он отображает оригинальный слайд с аннотациями, а затем тянет поверх него.

При использовании этого метода мне не нужно будет хранить тысячи изображений для каждого уникального человека, и у них будет возможность стирать прошлые аннотации без стирания исходного слайда.

Вот мой код для загрузки:

Canvas:

<input type="button" id="savepngbtn" value="Save Slide">

<!-- Main Canvas / Main Slide -->
 <div id="main"><canvas id="drop1" class="drop" style=" background-repeat:no-repeat;" width="680" height="510"></canvas></div>

Потянув исходное изображение:

var img = new Image();
img.src = 'pdf_images/pdf-save-0.png';
img.onload = function() {
    oCtx.drawImage(img, 0, 0)
}

Что мне нужно:

• Функция / функция сохранения для сохранения строк, созданных в виде данных, в базу данных
• Код для загрузки данных и отображения их на холсте в том виде, в котором они были созданы ранее.

Я не уверен, возможно ли что-либо из этого, но, черт возьми, это было бы очень мило и спасло бы жизнь! Спасибо!

Answer 1

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

Используйте canvas.toDataURL () , чтобы получить закодированный в base64 png холста. Вы можете сохранить это в своей базе данных. Вы можете отправить данные на сервер, используя обычный пост-запрос. Затем вы можете восстановить его, извлекая данные из вашей базы данных и устанавливая его как src элемента Image и записывая изображение обратно на холст, используя контекст drawImage on canvas 2d.

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

Answer 2

Хотя он предназначен для сбора подписей, я уверен, что проект Томаса Дж. Брэдли Signature Pad будет содержать некоторую полезную информацию и примеры кода для сохранения и восстановления захваченных чертежей.