HTML5 холст рисунок / сохранение

Question

Я пытаюсь превратить холст html5 в аннотатор слайдов. Моя цель - загрузить изображение слайда, разрешить пользователю рисовать на нем, а затем сохранить его.

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

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

Есть ли способ сохранить холст в изображение и сохранить в нем фон слайда? Возможно, это не должно быть фоновое изображение?

Вот мой код:

Кнопка Canvas +:

<div id="main">
<canvas id="drop1" class="drop" style="  background: url(pdf_images/pdf-save-0.png); background-repeat:no-repeat;">
</canvas>
</div>

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

Сохранение холста:

document.getElementById("savepngbtn").onclick = function() {
        saveCanvas(oCanvas, "PNG");
    }

function saveCanvas(pCanvas, strType) {
        var bRes = false;
        if (strType == "PNG")
            bRes = Canvas2Image.saveAsPNG(oCanvas);
        if (!bRes) {
            alert("Sorry, this browser is not capable of saving " + strType + " files!");
            return false;
        }
    }

Answer 1

Это не должно быть фоновое изображение.

Вы должны использовать предоставленный холст DrawImage, чтобы нарисовать изображение. Это довольно просто сделать, просто создайте новый элемент изображения (т. Е. new Image(), установите для события onload вызов DrawImage с самим собой в качестве параметра, а затем установите атрибут .src, чтобы он действительно загружался) .

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

Answer 2

вам нужно будет сделать 'background-image' частью холста, если вы хотите сохранить их как одно изображение.

Вы можете попробовать что-то вроде:

var ctx = yourcanvas.getContext('2d');
var img = new Image();
img.src = 'http://yourimage.png';
img.onload = function() {
    ctx.drawImage(img, 0, 0)
}

, затем разрешите пользователю добавлять аннотации и сохранять.