I know this question was already here a lot, but none of solutions looks to be working for me.
So, I am using Kinetics.js and I have build an canvas application where people can draw their images (pretty simple). The idea is that when image is ready user would go to the next page, but I need his drawing to be saved as a file at server.
Here is my code:
JavaScript:
$('#someButton').click(function(){
hiddenCanvas.toDataURL({
callback:function(dataUrl){
$.ajax({
type: "POST",
url: "scripts/imgsave.php",
data: {image: dataURL}
});
}
});
window.location = 'scripts/imgsave.php';
)};
And PHP:
if ( isset($_POST["image"]) && !empty($_POST["image"]) ) {
$dataURL = $_POST["image"];
$parts = explode(',', $dataURL);
$data = $parts[1];
$data = base64_decode($data);
$fp = fopen('../images/test.png', 'w');
fwrite($fp, $data);
fclose($fp);
}
The problem is, that whatever I do, PHP saves empty file on my server. So I guess the dataURL is not send properly. What could be the issue here?
Your casing is incorrect:
The callback function creates dataUrl while your ajax call sends dataURL
BTW, it's good practice to extend your ajax call with .done and .fail callbacks ;)
Updated code:
$('#someButton').click(function(){
hiddenCanvas.toDataURL({
callback:function(dataUrl){
$.ajax({
type: "POST",
url: "scripts/imgsave.php",
data: {image: dataUrl}
});
}
});
window.location = 'scripts/imgsave.php';
)};
Related
Hi this is my first time posting here and I need a bit of help, I am having problem echoing back the result from php to ajax. I want to show the filename once new canvas is created and store to server.
AJAX
$.ajax({
url: 'save_map.php',
data: { img_data:img_data },
type: 'post',
dataType: 'json',
success: function (response) {
window.location.reload();
}
From this PHP I want to print the name of new image that has been just created. I want to get the string value created in $filename and then print it.
PHP
<?php
$result = array();
$imagedata = base64_decode($_POST['img_data']);
$filename = md5(date("dmYhisA"));
//Location to where you want to created sign image
$file_name = './doc_map/'.$filename.'.png';
file_put_contents($file_name,$imagedata);
$result['status'] = 1;
$result['file_name'] = $file_name;
echo json_encode($result);
?>
You are reloading the page after a successful request.
You should use the response variable to display whatever you return back from your PHP code.
success: function (response) {
window.location.reload();
}
Try instead:
success: function (response) {
alert(response.file_name);
}
So I am having some issues using jQuery to POST data to a php script. I am passing the image data from a canvas to php that will in turn save the image to the server. I am wanting this to stay as a string when sending to make it easy when the php gets it. I have tried send in json as well and no success with that. The issue is I am not getting anything in return. I have no errors in the console and php isn't leaving any errors for me either to find. I also am for the time being writing the info passed to a txt file as well to verify that data is being passed and it as well is empty. What am I doing wrong? Also I have verified the DataURL var has info in it using an alert and it contains a nice string.
var dataURL = Grabcanvas.toDataURL();
$.ajax({
url: 'upload.php',
method: 'POST',
dataType : 'text',
data: {Image:dataURL},
success : function(data) {
console.log("sucessfull sending:");
console.log(data);
},
error : function() {
console.log('failed');
}
The php code
$writeDir = "dir/text/";
$upload_dir = "dir/image/";
$img = $_REQUEST['Image'];
$myfile = fopen($writeDir."newfile.txt", "w") or die("Unable to open file!");
$txt = $img . "\n";
fwrite($myfile, $txt);
fclose($myfile);
$img = str_replace('data:image/png;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$data = base64_decode($img);
$file = $upload_dir . mktime() . ".png";
file_put_contents($file, $data);
In your ajax call you have the key as Image {Image:dataURL} but in your php script your trying to access image $_REQUEST['image'], the key is case sensitive. change the one in ajax to image
you may try this
var dataURL = Grabcanvas.toDataURL();
var data = new FormData(); // added this line
data.append('Image', dataURL); // I have added this line
$.ajax({
url: 'upload.php',
method: 'POST',
dataType : 'text',
data: data, //I have changed this
success : function(data) {
console.log("sucessfull sending:");
console.log(data);
},
error : function() {
console.log('failed');
}
In PHP code change the following
$img = $_REQUEST['Image']; //you have used image, mind it it is case sensitive
This fixed it. Apparently I was explained to by a user here that toDataURL() is used for native javascript DOM but not jQuery DOM which I am using jQuery. So after code was rewritten to reflect this it now works correctly and sends without failing
`$.ajax({
url: 'upload.php',
type: 'POST',
dataType : 'text',
data: {Image: $('#name of canvas')[0].toDataURL()}, //CHANGED
cache: false,
contentType: false,
processData: false,
success: function(data) {
console.log("sucessful send:");
console.log(data);
},
error: function(d) {
console.log('error');
console.log(d);
console.log(d.responseText);
}`
I have read a lot of Q&As on here and can't seem to figure out what I am doing wrong...
Here is AJAX
var color = $('#fontcolor').val();
var size = $('#fontsize').val();
var text = $('#imagetext').val();
var fileToUpload = $('#fileToUpload').val();
var placement = $('#placement').val();
$.ajax({
type: "POST",
url: 'upload.php',
data: {color:color, size:size, text:text, fileToUpload:fileToUpload},
success: function(data)
{
window.alert(data);
},
cache: false,
contentType: false,
processData: false,
error: function()
{
window.alert('error');
}
});
And then php, I am just trying to simply see my data from now, but it shows empty...
<?php
$fontSize = $_POST['size'];
echo $fontSize;
echo "Test";
?>
I know that data is coming from form, I have tested variables after data is received, but just can't get it to post... I was using FormData object originally, but decided to simplify for troubleshooting purposes... Still nothing, seems very straightforward, but have been on this for a few days now...
So it seems I might not be able to pass the image alongside the other parameters, though perhaps there is a way I cannot find. Instead, I will pass image to upload.php, then in response return the image path. Then I will have it trigger success function that passes other parameters to another function that modifies the image accordingly. Works for me.
I'm using kinetic js to create a canvas and it also saves the canvas to an image file using this ajax:
stage.toDataURL({
callback: function(dataUrl) {
var url = 'export.php';
$.ajax({
type: "POST",
url: url,
dataType: 'text',
data: {
base64data : dataUrl
}
});
I need to also pass some form variables to export.php - whats the best way to do that?
Thanks!
Zoe
Your JS part is correct:
function upload() {
stage.toDataURL({
callback: function (dataUrl) {
$.ajax({
type: "POST",
url: 'export.php',
dataType: 'text',
data: {
base64data: dataUrl
}
});
}
});
}
In PHP, data arrive with the following pattern: 'data:image/png;base64,...characters'; ... So you have to extract the image part.
<?php
$data = $_POST['base64data'];
list($type, $data) = explode(';', $data);
list(, $data) = explode(',', $data);
$data = base64_decode($data);
file_put_contents('image.png', $data);
Note that this solution is not specific to kineticjs. It can be used with any HTML5 canvas, provided that you replace stage.toDataURL() call by canvas.toDataURL().
I'm trying to delete a file with jQuery's $.ajax and php. I have the following.
/js/whatever.js
$('.deleteimage').live('click', function() {
$imagefile = 'http://domain.com/images/1/whatever.jpg';
$imagethumb = 'http://domain.com/images/1/thumbnail/whatever.jpg';
$.ajax({
type: 'POST',
data: {
action: 'deleteimage',
imagefile: $imagefile,
imagethumb: $imagethumb,
},
url: 'script.php',
success: function(msg) {
alert(msg);
}
})
})
/php/script.php
<?php
if($_GET["action"]=="deleteimage")
{
$imagefile = $_REQUEST['imagefile'];
$imagethumb = $_REQUEST['imagethumb'];
$imagefileend = '../images'.end(explode('images',$imagefile)); //This will get me the path to the image ../images/1/whatever.jpg without the domain which is the correct path to the file. I tried that path directly and it deleted the file.
$imagethumbend = '../images'.end(explode('images',$imagethumb));
unlink($imagefileend);
unlink($imagethumbend);
}
?>
All path are correct. In firebug i see the post variables are being sent correctly to script.php, however files are not being deleted. What am i doing wrong.
In jQuery you use POST but in PHP you use GET. Change to if($_POST["action"]=="deleteimage") and please don't use $_REQUEST but $_POST