将html5 Canvas 保存为数据到mysql数据库

Question

这可能是不可能的，但对于我的情况来说，这真的非常理想。我正在使用html5画布作为幻灯片演示工具，用户可以在上面进行绘制并将其保存到本地设备。

我的目标是以一种略微不同的方式将其保存到我们的数据库中。

我希望发生的事情：

画布加载幻灯片，然后用户可以在其上绘制。一旦他们点击保存，就会将线条数据保存到我们数据库中的单元格中。当用户登录后查看幻灯片时，它会显示原始幻灯片和注释，然后将其覆盖在上面。

使用这种方法，我不必为每个独特的人存储成千上万的图像，并且他们将有能力擦除过去的注释而不擦除原始幻灯片。

以下是我的上传代码：

画布：

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

<!-- Main Canvas / Main Slide -->
 <div id="main"><canvas id="drop1" class="drop" style=" background-repeat:no-repeat;" width="680" height="510"></canvas></div>

获取原始图像：

var img = new Image();
img.src = 'pdf_images/pdf-save-0.png';
img.onload = function() {
    oCtx.drawImage(img, 0, 0)
}

我需要的是：

• 保存功能，将创建的线条作为数据保存到数据库中
• 上传数据的代码，并在画布上显示之前创建的内容。

我不确定这是否可能，但如果可以的话，那真是太好了，也会节省很多时间！谢谢！

- Dom

---

这只是我的个人意见，但除非你使用的数据库是专门设置用于优化保存大型二进制数据，否则最好不要将图像数据保存在数据库中...如果你正在使用MySQL，则绝对不应该将其存储在其中，它会比仅将其保存到硬盘并存储文件名慢得多。 - Rob Evans

相关链接：JavaScript从数据库中存储的图像数据绘制到画布上 - undefined

Answer 1

< p >Canvas 默认是透明的，因此您可以轻松地将其放在其他图像上并在其上绘制。

使用canvas.toDataURL()获取 canvas 的 base64 编码 png。 您可以将其保存到数据库中。 您可以使用普通的 post 请求将数据发送到服务器。 然后，通过从数据库检索数据并将其设置为 Image 元素的 src ，使用 canvas 2d 上下文的 drawImage 将图像写回 canvas 中来恢复它。

或者您可以记录用户绘制的每个笔画并将其保存在数据库中。 在加载页面时，您只需重新绘制这些笔画即可。

- esamatti

---

没有代码示例，这个描述相当模糊。 - undefined

Answer 2

虽然它旨在捕获签名，但我相信Thomas J Bradley的Signature Pad项目会提供一些有用的信息和代码示例，以保存和再现捕获的图画。

- JustinStolle

---

这看起来像是一个只有链接的回答，而且链接的网页是一个404错误。请参考你的答案在另一个城堡里：什么时候一个答案不是一个答案？。你能在回答中总结一下链接帖子的关键点吗？这是一个随机的Wayback Machine网页快照，我不确定它是否与你提供的链接相关。 - undefined