Сохраните содержимое холста HTML5, включая перетаскиваемые изображения

Question

Я использую холст для загрузки фонового изображения, а затем, используя пользовательский интерфейс jQuery, вызываю функцию droppable () на холсте и draggable () для нескольких изображений PNG на экране (которые не находятся вхолст).После того, как пользователь перетаскивает одно или несколько изображений на холст, я разрешаю ему сохранять содержимое в файл, используя следующую функцию:

function saveCanvas() {
    var data = canvas.toDataURL("image/png");
    if (!window.open(data)) {
        document.location.href = data;
    }
}

Это успешно открывает другое окно с изображением, которое, к сожалению, содержит толькоисходное фоновое изображение, а не перетаскиваемые изображения.Я хотел бы сохранить изображение, представляющее финальную стадию холста.Что мне здесь не хватает?

Спасибо за ваше время.

Answer 1

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

Вот живой пример:

http://jsfiddle.net/6YV88/244/

Чтобы попробовать, перетащите котенкаи поместите его где-нибудь поверх холста (это квадрат над котенком).Затем переместите котенка снова, чтобы увидеть, что он нарисован на холсте.

Пример - просто показать, как изображение будет нарисовано на холсте.В вашем приложении вы бы не использовали метод draggable stop.Скорее, при сохранении времени вы бы перебирали pngs, рисуя их на холсте.Обратите внимание, что метод jQuery offset() используется для определения положения холста и изображений относительно документа.

Answer 2

Вы сохраняете конечное состояние холста. У вас есть изображения на холсте, и холст не знает о них.

Единственный способ сохранить результат, который вы видите, состоит в том, чтобы перед вызовом toDataUrl вы должны вызвать ctx.drawImage с каждым из изображений и фактически нарисовать их на холсте.

Получение правильных координат для вызова drawImage может быть сложным, но это не невозможно. Возможно, вам придется использовать координаты pageX и pageY изображения, а затем нарисовать их на холсте относительно собственных страниц X и pageY холста.