将canvas绘制的图像保存到mysql数据库

发布于 2024-11-10 07:53:46 字数 553 浏览 0 评论 0原文

我想知道解决这个问题的最佳方法。我正在尝试将 HTML5 画布上的用户绘制图像保存到我的数据库中，以便稍后检索它。

我使用以下代码为图像创建了 base64 数据字符串，并连接到一个简单的按钮点击处理程序：

var image_data = $("#drawing_canvas").get(0).toDataURL('image/png');

我计划将该数据保存到我的数据库中，然后使用类似这样的内容稍后检索它：

var myImage = new Image();
myImage.src = imgData;
ctx.drawImage(myImage, 0, 0);

但是，这些 base64 “字符串”似乎包含大量数据。我想知道是否有更好的方法将这些图像保存到我的数据库中？我还没有找到将实际图像保存为 .png 的方法。我可以让它在新的浏览器选项卡中以 png 格式打开，但这就是我目前陷入的困境。

或者将这些 base64 数据字符串存储在我的数据库中（我想是“文本”列）是否可以？

提前致谢。

原文

I was wondering about the best way to tackle this. I'm trying to save a user-drawn image on a HTML5 canvas to my database so I can retrieve it later.

I got as far as creating the base64 data string for the image with the following code, hooked to a simple button clickhandler:

var image_data = $("#drawing_canvas").get(0).toDataURL('image/png');

I was planning on saving that data to my database and then retrieving it later on with something like this:

var myImage = new Image();
myImage.src = imgData;
ctx.drawImage(myImage, 0, 0);

However, these base64 'strings' seem to contain a lot of data. I was wondering if there's a better way to save these images to my database? I have yet to figure out a way to save the actual image as a .png. I could get it to open as a png in a new browser tab, but that's where I'm stuck at the moment.

Or would it be fine to store these base64 data strings in my database (in, I suppose, a 'text' column)?

Thanks in advance.

分享到QQ

分享到微博