将html5 Canvas作为数据保存到mysql数据库
这可能是不可能的，这对于我的情况来说非常理想。我使用 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)
}
我需要什么：
- 将创建为数据的行保存到数据库的保存功能/功能
- 上传数据并将其显示在画布上的代码，就像之前创建的一样。
我不确定这是否可能，但伙计，这真的很好，而且可以救命！谢谢！
This might not be possible, it would just be really Ideal for my situation. I'm using an html5 canvas as a slide presenter which the user can draw on and save onto their local machine.
My goal is to instead save this to our database in a some what different way.
What I want to happen:
The canvas loads up the slide and the user then can draw on it. Once they hit save, it saves the data of the lines to a cell in our database. When the user logs back into to see the slide it displays the original slide with the annotations then pulled on top of it.
Using this method I will not have to store thousands of Images for each unique person and they will have the ability to erase past annotations without erasing the original slide.
Here is my code for uploading:
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>
Pulling Original Image:
var img = new Image();
img.src = 'pdf_images/pdf-save-0.png';
img.onload = function() {
oCtx.drawImage(img, 0, 0)
}
What I need:
- The save feature/function to save the lines created as data to the database
- The code to upload data and display it on the canvas as it was created before.
I'm not sure if any of this is possible but man it would be really nice and a life saver! Thanks!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
画布默认是透明的，因此您可以轻松地将其放在其他图像之上并在其上绘图。
使用 canvas.toDataURL() 获取 Base64 编码的 png帆布。您可以将其保存到数据库中。您可以使用正常的后请求将数据发送到服务器。然后，您可以通过从数据库检索数据并将其设置为 Image 元素的 src 并使用 canvas 2d 上下文上的 drawImage 将图像写回画布来恢复它。
或者您可以记录用户绘制的每一笔并将其保存在数据库中。加载页面时，您只需重新绘制笔画即可。
Canvas is transparent by default so you can put it easily on top of other images and draw on it.
Use canvas.toDataURL() to get base64 encoded png of the canvas. You can save that into your database. You can send the data to the server by using normal post-request. Then you can restore it by retrieving the data from you db and setting it as src of an Image element and writing the image back to the canvas using drawImage on canvas 2d context.
Or you can record every stoke that users draws and save those in database. When loading the page you can just redraw the strokes.