I am trying to save a captured image from HTML5/Canvas with a mobile. I am using PHP (symfony2).
I followed the instructions from this post (How to save a PNG image server-side, from a base64 data source) but I get a dark empty image saved instead of what I captured.
Here is my JavaScript post code:
var dataUrl = canvas.toDataURL();
$.ajax({
type: "POST",
url: "{{ path("personne_photo_capture",{"id":entity.personne.id}) }}",
data: {
imgBase64: dataUrl
}
}).done(function (msg) {
$('#msg').html(msg);
}).fail(function (xhr, textStatus, errorThrown) {
$('#msg').html(xhr.responseText);
});
And the PHP saving code :
$rawData = $_POST['imgBase64'];
if (isset($rawData)) {
$filteredData = explode('base64,', $rawData);
$data = base64_decode($filteredData[1]);
$filename = "profil.png";
file_put_contents('picts/small/' . $filename, $data);
}
First of all, make sure to specify the datatype on the cliente side as
dataType: 'text',
On the server side replace your first two statements with :
$data = base64_decode(preg_replace('#^data:image/\w+;base64,#i', '', $data));
For further pointers take a loop at previously asked question
How to save a PNG image server-side, from a base64 data string
Related
I'm trying to add a file upload option to my page.
And I use Ajax for this purpose that sends the file to the server (where it is saved)
And should get back the file name
Everything works well except that when I print what comes back instead of just getting the array I send from the server I also get extra information.
Does anyone know where this supplement comes from? and how I can get rid of it?
here is my ajax:
$("#upload_file").change(function(input){
console.log(" in upload_file");
var file_data = $('#upload_file').prop('files')[0];
var form_data = new FormData();
form_data.append('file', file_data);
$.ajax({
type: 'POST',
url: '<?php echo base_url(); ?>organizer/save_event_file',
// dataType: 'text',
cache: false,
contentType: false,
processData: false,
data: form_data,
beforeSend: function(){
$('#progress_spinner').show();
$('body').addClass('disable_body');
},
success: function(response,status){
console.log(response);
},
complete: function(){
$('#progress_spinner').hide();
$('body').removeClass('disable_body');
}
}).fail(function (xhr, status, error) {
alert("error");
});//fail;
});
this is my server function:
enter code here
public function save_event_file(){ // to add check and prommision
$filePath = $_FILES['file']['tmp_name'];
$type=$_FILES['file']['type'];
//adding to the name with the current date in the end
$date = new DateTime();
$name = substr($_FILES['file']['name'],0,strpos($_FILES['file']['name'],'.')). '__' .$date>format('d.m.y').substr($_FILES['file']['name'],strpos($_FILES['file']['name'],'.'));
$data = array('file' => curl_file_create($filePath, $type, $name));
$response = $this->organizer_model->save_file($data); // save the file with the new name
$result = array('alertcode'=>1,'response'=>$response,'name'=>$name);
echo json_encode($result);
}
this is what I expect to be the response:
{"alertcode":1,"response":true,"name":"old db function__21.03.21.txt"}
this is the real response (The other part is the " {"alertcode":1}" in the beginning):
{"alertcode":1}{"alertcode":1,"response":true,"name":"old db function__21.03.21.txt"}
I have no problem cutting this information and then making a parse as follows:
var ans = JSON.parse(response.substring(response.indexOf('{"alertcode',10),response.length));
But I want to understand where this is coming from - in case this addition changes - and then it will cut the string badly.
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'm using JCrop and the code provided here How should I crop the image at client side using jcrop and upload it?, which is working great except I don't know how to upload the cropped image to the server.
Here's the most relevant piece of the javascript/ajax
$("#form").submit(function(e) {
e.preventDefault();
formData = new FormData($(this)[0]);
var blob = dataURLtoBlob(canvas.toDataURL('image/png'));
//---Add file blob to the form data
formData.append("cropped_image[]", blob);
$.ajax({
url: "sendImage.php",
type: "POST",
data: formData,
contentType: false,
cache: false,
processData: false,
success: function(data) {
alert("Success");
},
error: function(data) {
alert("Error");
},
complete: function(data) {}
});
});
The canvas is added to a div 'views'.
<div id="views"></div>
And here's what php I have so far to try to upload the image
//File destination
$destination = '../Images/Uploads/';
//Get uploaded image file it's temporary name
$image_tmp_name = $_POST["formData"];
//Move temp file to final destination
move_uploaded_file($image_tmp_name, $destination);
I know I'm way off but any pointers would be great, thank you so much!
I know I'm wrong with the temp filename $image_tmp_name = $_POST["formData"];, should that be "views" instead of "formData"?
Edit to add:
$upload_dir = '../Images/uploads/';
$img = $_FILES['views'];
$img = str_replace('data:image/jpg;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$data = base64_decode($img);
$file = $upload_dir."image_name.jpg";
$success = file_put_contents($file, $data);
Is this any closer? I realised I was using 'image/png' when my images are jpg so I've changed the png's to jpg's. Still getting a blank jpg when I try to save it. I've scoured stackoverflow all day for an answer and haven't got any further, please can anyone give me a hint as to what to do? Thank you!
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 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';
)};