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

Question

这可能是不可能的，这对我的情况来说真的很理想。我使用 html5 Canvas 作为幻灯片演示器，用户可以在其上绘制并保存到他们的本地计算机上。

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

我想要发生的事情:

Canvas 载入幻灯片，然后用户可以在上面绘图。一旦他们点击保存，它就会将行的数据保存到我们数据库中的一个单元格中。当用户重新登录查看幻灯片时，它会显示带有注释的原始幻灯片，然后将其拉到上面。

使用这种方法，我不必为每个独特的人存储数千张图片，他们将能够在不删除原始幻灯片的情况下删除过去的注释。

这是我的上传代码:

Canvas :

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

我需要什么:

• 将创建的行作为数据保存到数据库的保存特性/函数
• 上传数据并将其显示在之前创建的 Canvas 上的代码。

我不确定这是否可行，但伙计，这真的很棒而且可以挽救生命!谢谢!

Answer 1

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

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

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