How to save a PNG image server-side, from a base64 data string javascript

Question

i have this code, either the ajax isn't transferring the data correctly or my php doesn't work properly. i know the canvass is saving to data png it writes to the page. Is there a way to just convert it to a file and save it from javascript?

START JAVASCRIPT:-------------------

<-- get the canvass element and convert to data png -->

var canvas = document.getElementById("textCanvas"); 
var img = canvas.toDataURL("image/png");

<-- END the canvass element and convert to data png -->

<-- SEND to php file -->

var onmg = encodeURIComponent(img);
var xhr = new XMLHttpRequest();
var body = "img=" + onmg;
xhr.open('POST', "convertit.php",true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.setRequestHeader("Content-Length", body.length);
xhr.setRequestHeader("Connection", "close");
xhr.send(body);
xhr.onreadystatechange = function () {
   if (xhr.status == 200 && xhr.readyState == 4) {
     document.getElementById("div").innerHTML = xhr.responseText;
   } else {
     document.getElementById("div").innerHTML = 'loading';
     }
   }

<-- END send to php file -->

END JAVASCRIPT:-------------------

START PHP:-------------------

$img = $_POST['img']; 
$img = str_replace('data:image/png;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$data = base64_decode($img);
file_put_contents('/uploads/file.png', $data);

END PHP:-------------------

Are you seeing some data written into /uploads/file.png at all? — Patrick Moore
– Patrick Moore, Commented Oct 21, 2014 at 3:37

Nato · Accepted Answer · 2014-10-21 05:08:35Z

3

changed the php to -------->

define('UPLOAD_DIR', 'images/');
$img = $_POST['img'];
$img = str_replace('data:image/png;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$data = base64_decode($img);
$file = UPLOAD_DIR . uniqid() . 'txtimg.png';
$success = file_put_contents($file, $data);
print $success ? $file : 'Unable to save the file.';

which i got from ----->http://j-query.blogspot.com/2011/02/save-base64-encoded-canvas-image-to-png.html

-cheers works awesome :)

answered Oct 21, 2014 at 5:08

Nato

1621 silver badge15 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to save a PNG image server-side, from a base64 data string javascript

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related