Рисование/сохранение холста html5

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

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

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

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

Вот часть моего кода:

Кнопка «Холст +»:

<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;
        }
    }

html html5-canvas
person Dom    schedule 26.10.2011    source источник

Ответы (2)


arrow_upward
0
arrow_downward

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

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

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

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

person gthmb    schedule 26.10.2011
comment
Как мне сделать это по-другому, чем я уже сделал? - person Dom; 26.10.2011

arrow_upward
0
arrow_downward

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

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

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

person Rudi Visser    schedule 26.10.2011