如何将用sketch.js修改的html画布保存到MySQL数据库中答案

【问题标题】：How to save html canvas modified with sketch.js into MySQL database如何将用sketch.js修改的html画布保存到MySQL数据库中
【发布时间】：2015-09-10 05:23:10
【问题描述】：

好的，所以我有 一个包含 html 表单的 php 页面。填写完这个 html 表单后，我正在使用 PHP 将数据保存到 MySQL 数据库中（都在同一页面上）。

在这个表单中，我有一个 HTML 画布，我正在使用 Sketch.js

进行绘制

http://intridea.github.io/sketch.js/

<canvas id="tcInjuryImageFront" width="283px" height="629px" style="background-image: url('includes/images/image001.png'); float: left;"></canvas>

我想将此画布保存为图像，并将其与我的 MySQL 数据库中的其余表单数据一起放置（使用 PHPMyAdmin）。

我该怎么做呢？我已经尝试过这里发布的方法：how can we save html5 canvas image to database in php；但是，我收到以下错误：

XMLHttpRequest 无法加载 http://test.com/index.php。请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，Origin 'http://www.test.com' 不允许访问。响应的 HTTP 状态代码为 404。

当我使用以下 javascript 函数时：

function saveCanvas()
{
var frontCanvas = document.getElementById("tcInjuryImageFront");
var dataUrl = frontCanvas.toDataURL();

$.ajax({
    type: "POST",
    url: "http://test.com/index.php",
    data: {image: dataUrl}
})
.done(function(respond){alert("done: "+respond);})
.fail(function(respond){alert("fail");})
.always(function(respond){alert("always");})
} //end saveCanvas

当我运行它时，我会收到 fail 和 always 的警报。这对我来说没有任何意义，因为这是我目前使用的完全相同的 url，所以它肯定在同一个域内。

坦率地说，尽管这种方法对我的目的来说似乎不正确，因为我没有尝试将这些数据加载到新页面中，我只是想让它在当前页面中的 PHP 中访问，这样我就可以将其与其余的表单数据一起保存到 MySQL 数据库中。

想法？

【问题讨论】：

如果是同一个域，请尝试离开域
没有区别，如果我使用 index.php 我会得到完全相同的错误，就好像我离开了域一样。

标签： javascript php mysql post html5-canvas

【解决方案1】：

好的，我明白了。我无法将信息保存到同一页面，因此我创建了一个新的 php 页面，并在其余表单数据的插入语句完成后出现所有这些画布代码。

然后我将图像数据插入到带有更新语句的 BLOB 字段中，然后重新显示它，并且从 sketch.js 中绘制的草图正确显示。

【讨论】：