настроить два изображения и сохранить холст

Question

Я пытаюсь загрузить холст с двумя или тремя изображениями из базы данных.

У меня есть работающая страница, поэтому я могу перемещать изображения и изменять их размер следующим образом ... http://www.html5canvastutorials.com/labs/html5-canvas-drag-and-drop-resize-and-invert-images/

но теперь мне бы хотелось, чтобы под холстом была кнопка (сохранить изображение), чтобы после перемещения и настройки изображений на холсте можно было сохранить холст как один jpg

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

Мне не нужны какие-либо необычные приложения для редактирования изображений, именно то, что в примере выше

спасибо

Answer 1

Сохранение холста как изображения является одной из особенностей Canvas и довольно проста.Вы можете использовать простой обработчик событий или обработчик отправки формы в javascript для реализации этого.Вот пример кода с использованием jQuery для получения холста и перенаправления в png содержимого холста.Ключевой функцией является toDataURL ().Подробнее об этом здесь http://www.w3.org/TR/html5/the-canvas-element.html#dom-canvas-todataurl

canvas = $("#maincanvas").get(0);

.. your drawing operations here ...

// The save image button event handler 
var toPNG = function() {
  return window.location = canvas.toDataURL('image/png');
};
$('button#save').click(toPNG);