Develop Reference

Having an issue whilst saving JPEG, from html5 canvas, to server

I have an image loaded to the browser in a HTML canvas wrapper.
<canvas id="image1" class="" width="213" height="213" style="width: 213px; height: 213px;"></canvas>
When I try to save this to the server via AJAX, it works fine but when the file is a JPEG, it doesn't redirect from the AJAX.
Here's my ajax
var imageName = $('#image_name').val();
var canvas = document.getElementById('image1');
var dataURL = canvas.toDataURL();
$.ajax({
type: "POST",
url: "script.php",
data: {
imgBase64: dataURL
}
}).done(function(data) {
alert(data);
window.location.replace("http://****.co.uk/dither/step3.php?id="+data)
});
Here's my php
<?php
define('UPLOAD_DIR', 'images/');
$img = $_POST['imgBase64'];
$img = str_replace('data:image/png;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$data = base64_decode($img);
$file = UPLOAD_DIR . uniqid() . '.png';
$success = file_put_contents($file, $data);
echo $file;
?>
If the image is a png file, then the redirect works, but if it's a JPEG it just returns back to the same page.
If I alert the 'dataURL' before the ajax call it returns a array with the first part as 'data:image/png;base64' no matter what type of file extension.
I don't know enough about the base64 stuff to figure this out.

as javascript is asynchronous the ajax was firing before the file upload had completed an thats why it was failing.

Use this sample of code to create create image from string, this will fix the issue
imagecreatefromstring($n) then imagejpeg($r,$y) or imagepng($r,$y);
and
imagedestroy($r);

I have a canvas that I am trying to send the dataURL with javascript to php using ajax post

I have a page with a canvas. I'm using signaturPad to capture a signature. I now need to send this signature to the php page to process and save
var saveButton = document.getElementById('save');
var cancelButton = document.getElementById('clear');
saveButton.addEventListener('click', function (event) {
var canvas = document.getElementById('signature-pad');
var dataURL = canvas.toDataURL();
console.log(dataURL);
$.ajax({
type: "POST",
url: "user_group_start_paperwork_esign2.php?group_id=1389",
data: dataURL,
//dataType: "html",
cache: false,
success: function(data){//console.log(data)
}
});
And on the PHP side
define('UPLOAD_DIR', 'images/');
$img = $_POST['data'];
$img = str_replace('data:image/png;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$data = base64_decode($img);
$file = UPLOAD_DIR . uniqid() . '.png';
$success = file_put_contents($file, $data);
print $success ? $file : 'Unable to save the file.';
But I don't seem to be sending anything. The console.log is getting the data but the $_POST['data'] seems to be empty. Thanks

How Can Inline IMG SRC data:image Be Transferred With JavaScript to PHP?

Below is an element that contains inline base64 image data (abbreviated to fit here). How can JavaScript get the inline data and send it to PHP? It would be good if an intermediate canvas can be avoided, since the raw data is already available.
In the page:
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEU4Xoy9WY9k6" id="photo">
The JavaScript I'm currently using to click on the element to trigger the transfer to PHP, which saves a 0 byte .png file to disk:
$("#photo").click(function() {
var xhr = new XMLHttpRequest();
xhr.open('POST', 'uploadPhoto.php', true);
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
var data = 'image=' + this.src;
xhr.send(data);
});
uploadPhoto.php, which receives the data and writes it to disk:
<?php
if ($_POST) {
define('UPLOAD_DIR', '/photos/');
$img = $_POST['image'];
$img = str_replace('data:image/jpeg;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$data = base64_decode($img);
$file = UPLOAD_DIR . uniqid() . '.png';
$success = file_put_contents($file, $data);
print $success ? $file : 'Unable to save the file.';
} else {
print 'Unable to save ' . $_POST['image'];
}
?>
What's missing?
SOLUTION UPDATE
Per #EhsanT, the png format of the raw data was not matched in the php, so this line in the php now has png where jpeg used to be:
str_replace('data:image/png;base64,', '', $img);

The only thing you are doing wrong in this particular sample code you have provided is that you have a PNG base64 image data, and in your uploadPhoto.php file you are expecting a JPG file.
So in the uploadPhoto.php file just change this line:
$img = str_replace('data:image/jpeg;base64,', '', $img);
to this:
$img = str_replace('data:image/png;base64,', '', $img);
and you are good to go

canvas..toDataURL and upload it

Am working on converting canvas to image and upload it to server when the user submit the form.
The image posted correctly but it appears empty in the server.
Here is my code, (Am using phonegap)
.drawImage ()is in the main.js .. but canvas..toDataURLis in a script in the html
<script>
function insert()
{
var img = document.getElementById("myCanvas")[0].toDataURL("image/jpeg");
$.ajax({
type: "POST",
url: "http://*******************/create.php?title="+ ($("#myTitle").val())+"&description="
+$("#myDesc").val()+"&price="+$("#myPrice").val(),
data: {img: img},
success: function(data)
{
alert("inserted");
}});
</script>
php
$img = $_POST['img'];
$img = str_replace('data:image/png;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$data = base64_decode($img);
$file = uniqid() . '.png';
$success = file_put_contents($file, $data);
print $success ? $file : 'Unable to save the file.';
Any idea ?
EDIT !!!
Finally it is UPLOADING!!!
Thanks to Jack Franzen for his suggestion.
I've changed the php code to
$img = $_POST['img'];
$img = str_replace('data:image/jpeg;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$data = base64_decode($img);
$file = uniqid() . '.jpg';
$success = file_put_contents($file, $data);
and it is working as charm! :)

I Know your problem! Your PHP code is looking for a "PNG", but your javascript is generating a "JPG"
Just switch toDataURL("image/jpeg") To toDataURL()

DOM created screenshots as PNG files

I am using html2canvas.js to create a screenshot of a webpage. The only thing is that I don't know how to transfer this data to an image file format so that I can save it and link it in the database.
This is my current code:
<script language="Javascript">
setInterval(function() {
html2canvas(document.body, {
onrendered: function(canvas2) {
context.drawImage(video, 0, 0, 240, 180);
$.post(
"' . self::get_link('save_screenshots') . '",
"user_id=' . module_security::get_loggedin_id() .
'&screenshot=" + encodeURI(canvas2.toDataURL())
);
document.body.appendChild(canvas2)
}
})
}, 1*60*1000);
</script>

This may help you:
<?php
// requires php5
define('UPLOAD_DIR', 'your/images/directory/');
$img = $_POST['img'];
$img = str_replace('data:image/png;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$data = base64_decode($img);
$img_file = UPLOAD_DIR . uniqid() . '.png';
$success = file_put_contents($img_file, $data);
if($img_file){
// store the link to database
} else{
//return error msg
}
?>

You should let jQuery handle the request encoding for you:
$.post(url, {
user_id: 123,
screenshot: canvas2.toDataURL()
}, function() {
// success
document.body.appendChild(canvas2);
});
Then, you decode it like so on the server side:
$data = base64_decode(substr(
$_POST['screenshot'],
strpos($_POST['screenshot'], ',') + 1
));