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

Posted 2023-05-09

【中文标题】将 html5 Canvas 作为数据保存到 mysql 数据库

【英文标题】：Saving html5 Canvas as Data to mysql Database

【发布时间】：2011-12-15 21:14:16

【问题描述】：

这可能是不可能的，这对我的情况来说真的很理想。我使用 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;"  ></canvas></div>

拉取原始图像：

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

我需要什么：

将创建的行作为数据保存到数据库的保存特性/功能 上传数据并将其显示在画布上的代码，就像之前创建的一样。

我不确定这是否可能，但伙计，这真的很好，可以挽救生命！谢谢！

【问题讨论】：

只需我的 2 美分，但除非您使用的数据库是专门为优化保存大型 blob 而设置的，否则我会远离在该数据库中保存图像数据...如果您使用的是 mysql那么你绝对不应该将它存储在那里，它会比将它保存到 HD 并存储文件名要慢得多。

【参考方案1】：

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

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

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

【参考方案2】：

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