如何将用 sketch.js 修改的 html canvas 保存到 MySQL 数据库中

Question

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

在此表格中，我有一个 HTML canvas，我正在使用 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>

我想将此 canvas 另存为图像并将其与其余表单数据一起放入我的 MySQL 数据库（使用 PHPMyAdmin）。

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

XMLHttpRequest 无法加载 http://test.com/index.php. No 'Access-Control-Allow-Origin' header is present on the requested resource. 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 数据库中。

想法？

Answer 1

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

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

如何将用 sketch.js 修改的 html canvas 保存到 MySQL 数据库中

How to save html canvas modified with sketch.js into MySQL database

javascript

php

mysql

post

html5-canvas