Question

我正在尝试将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;
        }
    }

Answer 1

如果您想将它们保存为单个图像，则需要在画布中创建“背景图像”部分。

你可以尝试类似的东西：

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

然后允许用户添加注释并保存。

Answer 2

它不应该是背景图像。

您应该使用提供的画布DrawImage来绘制图像。这样做非常简单，只需创建一个新的图像元素（即。new Image()，将onload事件设置为调用DrawImage并将其自身作为参数，然后设置.src }属性，以便它实际加载）。

显然这应该是你做的第一件事，因为图像对于画布的工作方式至关重要。您可以在onload中添加一个额外的挂钩，以便在图像加载之前不允许用户进行任何绘图。

html5画布绘图/保存

2 个答案: