将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并将其保存在数据库中.加载页面时,您只需重绘笔画即可.