Alright so I have a single php page that contains an html form. After this html form is filled out, I'm using PHP to save the data into a MySQL database (all on the same page).
Within this form, I have an HTML canvas that I am drawing on with 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>
I want to save this canvas as an image and put it with the rest of the form data within my MySQL database (using PHPMyAdmin).
How would I go about doing this? I've tried the method posted here: how can we save html5 canvas image to database in php ; however, I get the following error:
XMLHttpRequest cannot load http://test.com/index.php. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://www.test.com' is therefore not allowed access. The response had HTTP status code 404.
when I use the following javascript function:
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
When I run this I get the alerts for fail and always. This doesn't make any sense to me because this is the exact same url that I'm currently on, so it's definitely within the same domain.
Frankly, though this method seems incorrect for my purposes anyways as I'm not trying to load this data into a new page, I'm just trying to make it accessible in PHP within the current page so I can save it into the MySQL database with the rest of the form data.
Ideas?
