html5画布绘图/保存答案

【问题标题】：html5 canvas drawing / savinghtml5画布绘图/保存
【发布时间】：2011-10-26 15:17:10
【问题描述】：

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

【问题讨论】：

标签： html html5-canvas

【解决方案1】：

如果您想将它们保存为单个图像，则需要将“背景图像”作为画布的一部分。

你可以试试：

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

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

【讨论】：

我该如何做与我已经做的不同的事情？

【解决方案2】：

它不应该是背景图片。

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

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

【讨论】：