将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)
}

我需要什么：

• 用于将作为数据创建的行保存到数据库的保存功能/功能
• 上传数据并在之前创建的画布上显示的代码。

我不确定这是否有可能，但是男人会非常好并且可以节省生命！谢谢！

Answer 1

默认情况下，Canvas是透明的，因此您可以将其轻松放在其他图像上并在其上绘图。

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

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

Answer 2

虽然它的目的是捕获签名，但我确信Thomas J Bradley的Signature Pad项目会有一些有用的信息和代码示例，用于保存和重新生成捕获的图纸。