I am trying to take a base64 encoded string and return it as an image in php using $_POST. On line one if I use $_POST['imgdata'] it returns error from the preg_match if i were hard code the base64 string instead of using $_POST it all works and returns the image. how can i make this work by using the $_POST
works
$imgstr = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAAAoCAYAAAC7HLUcAAADtUlEQVR4Xu2aLZYqMRCFMxuAFaARg8WwAnaABQEWgwUBFoMFARaDRqAxWBBoVgAbmPcu7/Q7PX3SP0k16TTcnDNqOpXKrXykKsmXUurn7x+bvQJf9l3Z03cFEFwCIosSAZHp53VvAiIPDwGRa+itBQIiDw0BkWvorQUCIg8NAZFr6K0FAiIPDQGRa+itBQIiDw0BkWvorQUCIg8NAZFr6K0FAiIPDQGRa+itBTEg7XZb1Wo11Wg0VKVS+T/Rx+Ohzuezut1uar/feyVAp9NR8Dvaer2ejZ8ExEa1kvSxBgQLbDQaPeFIa4BkPp97AQr8XiwWWpfr9XraVHT/JyA2qpWkjxUg+AWeTqfGU5xMJmq73Rr3y6vD9/e32mw2v3a6sG0CkpfS72PHGBAsst1uZ60A0pjj8Wjd37Yj0j/AAf/jGgGxVfd9+xkDgp0DO0i0oeZYLpfqcrk8F+FgMND+UqMeGQ6HzhVdr9eq1WoljktAnIfF+wGNATmdTtqFH02fsBixKHUgNZtNp8LEQR11goA4DUspBjMCJC69wu6hW/TX6zXPYthKUF29BH/DJ26BYQJiJfFbdzICJFAinKoAGiy4aPGN063D4VDoDqIDGr7iRE13yEBA3nqtW03OCpAsI+EoVXfX4KoGAaA4TIjezXS7XVWtVrXpHwHJEtnP+uYlgCTl/C5OseJOrII6Ka4+IiCftfizzDZXQLAwcXmoO+WCM652D93uhbRqtVo9NSEgWZYGv4ECuQGClAYLM+6eAce/SG9QA7yy9fv9J6ThhvoIu0e4htKdsHEHeWVkymk7F0BQa8xms9gbalwM4u7j1XDoTqx0YHIHKediLcJrMSC6X+zwRJDWIL1x0XR3NBj/fr//Gh67nS4NDPzUncol+M+3WC6CW9AYIkCSinEssvF47PSBYty9i6m22PEMXvYSEFOBS/S9NSBJcLhKqaI6E5ASrbySuGoFSFJaFS2IXepAQFyq/RljGQOS9po3y0td5PoonvNuBCRvRWnPGJAsr2LTZH3VZWHaa93AL0AePQrG/4K6A0W9AcCsQdICXuL/GwES977KdP6vAiSrHzzmzaoUvzMCJO1IN6ucBCSrUvyuaAWMAIl7gGg6CQJiqhi/L0oBI0CKctLzcVmDeB4giXsERKLev74ERK6htxYIiDw0BESuobcWCIg8NARErqG3FgiIPDQERK6htxYIiDw0BESuobcWCIg8NARErqG3FgiIPDQERK6htxYIiDw0BESuobcW/gDZOWY4lzJl1QAAAABJRU5ErkJggg==';
does not work
$imgstr = $_POST['imgdata'];
full code
$imgstr = $_POST['imgdata'];
// Grab the MIME type and the data with a regex for convenience
if (!preg_match('/data:([^;]*);base64,(.*)/', $imgstr, $matches)) {
die("error");
}
// Decode the data
$content = base64_decode($matches[2]);
// Output the correct HTTP headers (may add more if you require them)
header('Content-Type: '.$matches[1]);
header('Content-Length: '.strlen($content));
// Output the actual image data
echo $content;
As was noted the "+" should not be missed, the rest is straight forward. Use $_REQUEST if you are not sure is it post or get.
// requires php5
define('UPLOAD_DIR', 'images/');
$img = $_REQUEST['img'];
$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.';
This is the One., Would you like the following i think.,
<?php
$imgstr = 'image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAAAoCAYAAAC7HLUcAAADtUlEQVR4Xu2aLZYqMRCFMxuAFaARg8WwAnaABQEWgwUBFoMFARaDRqAxWBBoVgAbmPcu7/Q7PX3SP0k16TTcnDNqOpXKrXykKsmXUurn7x+bvQJf9l3Z03cFEFwCIosSAZHp53VvAiIPDwGRa+itBQIiDw0BkWvorQUCIg8NAZFr6K0FAiIPDQGRa+itBQIiDw0BkWvorQUCIg8NAZFr6K0FAiIPDQGRa+itBTEg7XZb1Wo11Wg0VKVS+T/Rx+Ohzuezut1uar/feyVAp9NR8Dvaer2ejZ8ExEa1kvSxBgQLbDQaPeFIa4BkPp97AQr8XiwWWpfr9XraVHT/JyA2qpWkjxUg+AWeTqfGU5xMJmq73Rr3y6vD9/e32mw2v3a6sG0CkpfS72PHGBAsst1uZ60A0pjj8Wjd37Yj0j/AAf/jGgGxVfd9+xkDgp0DO0i0oeZYLpfqcrk8F+FgMND+UqMeGQ6HzhVdr9eq1WoljktAnIfF+wGNATmdTtqFH02fsBixKHUgNZtNp8LEQR11goA4DUspBjMCJC69wu6hW/TX6zXPYthKUF29BH/DJ26BYQJiJfFbdzICJFAinKoAGiy4aPGN063D4VDoDqIDGr7iRE13yEBA3nqtW03OCpAsI+EoVXfX4KoGAaA4TIjezXS7XVWtVrXpHwHJEtnP+uYlgCTl/C5OseJOrII6Ka4+IiCftfizzDZXQLAwcXmoO+WCM652D93uhbRqtVo9NSEgWZYGv4ECuQGClAYLM+6eAce/SG9QA7yy9fv9J6ThhvoIu0e4htKdsHEHeWVkymk7F0BQa8xms9gbalwM4u7j1XDoTqx0YHIHKediLcJrMSC6X+zwRJDWIL1x0XR3NBj/fr//Gh67nS4NDPzUncol+M+3WC6CW9AYIkCSinEssvF47PSBYty9i6m22PEMXvYSEFOBS/S9NSBJcLhKqaI6E5ASrbySuGoFSFJaFS2IXepAQFyq/RljGQOS9po3y0td5PoonvNuBCRvRWnPGJAsr2LTZH3VZWHaa93AL0AePQrG/4K6A0W9AcCsQdICXuL/GwES977KdP6vAiSrHzzmzaoUvzMCJO1IN6ucBCSrUvyuaAWMAIl7gGg6CQJiqhi/L0oBI0CKctLzcVmDeB4giXsERKLev74ERK6htxYIiDw0BESuobcWCIg8NARErqG3FgiIPDQERK6htxYIiDw0BESuobcWCIg8NARErqG3FgiIPDQERK6htxYIiDw0BESuobcW/gDZOWY4lzJl1QAAAABJRU5ErkJggg==';
$new_data=explode(";",$imgstr);
$type=$new_data[0];
$data=explode(",",$new_data[1]);
header("Content-type:".$type);
echo base64_decode($data[1]);
?>
The above code will generates the output as per your wish.,Try this..This may help you.
Sorry For The Delay Reply.,Now Only I Recover My StackOverFlow Account After a long time.
Note : Ignore the empty space's in before the starting '' tag on the PHP file you are using for image decode.,If any empty is on that file means it throws Error message and it doesn't create or show the original image after the decodes.
<?php
$data = 'iVBORw0KGgoAAAANSUhEUgAAABwAAAASCAMAAAB/2U7WAAAABl'
. 'BMVEUAAAD///+l2Z/dAAAASUlEQVR4XqWQUQoAIAxC2/0vXZDr'
. 'EX4IJTRkb7lobNUStXsB0jIXIAMSsQnWlsV+wULF4Avk9fLq2r'
. '8a5HSE35Q3eO2XP1A1wQkZSgETvDtKdQAAAABJRU5ErkJggg==';
$data = base64_decode($data);
$im = imagecreatefromstring($data);
if ($im !== false) {
header('Content-Type: image/png');
imagepng($im);
imagedestroy($im);
}
else {
echo 'An error occurred.';
}
?>
source: documentation.
check out imagecreatefromstring.
Not sure why the regex isn't working for you, I copied the base64 post data and your code and it worked fine. You can try this instead which doesn't use regex and may be a little faster and use less memory.
$imgstr = $_GET['imgdata'];
list($type, $imgstr) = explode(';', $imgstr);
list(, $type) = explode(':', $type);
list(, $imgstr) = explode(',', $imgstr);
$content = base64_decode($imgstr);
Please check below code it is working fine for me,
$data = 'data:image/png;base64,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X542Z97/f2Y2HTUcCtHgaro+yxw/t34A6ggpgP+0fdk8r8ti9lQeHx7KdDotD49PZbZYlpdtfvz3z13Df4E5AlwSIQUAABASUgAAACEhBQAAEBJSAAAAISEFAAAQElIAAAAhIQUAABASUgAAACEhBQAAEBJSAAAAISEFAAAQElIAAAAhIQUAABASUgAAACEhBQAAEBJSAAAAISEFAAAQElIAAAAhIQUAABASUgAAACEhBQAAEBJSAAAAISEFAAAQElIAAAAhIQUAABASUgAAACEhBQAAEBJSAAAAISEFAAAQElIAAAAhIQUAABASUgAAACEhBQAAEBJSAAAAISEFAAAQElIAAAAhIQUAABASUgAAACEhBQAAEBJSAAAAISEFAAAQElIAAAAhIQUAABASUgAAACEhBQAAEBJSAAAAISEFAAAQElIAAAAhIQUAABASUgAAACEhBQAAEBJSAAAAISEFAAAQElIAAAAhIQUAABASUgAAACEhBQAAEBJSAAAAISEFAAAQElIAAAAhIQUAABASUgAAACEhBQAAEBJSAAAAISEFAAAQElIAAAAhIQUAABASUgAAACEhBQAAEBJSAAAAISEFAAAQElIAAAAhIQUAABASUgAAACEhBQAAEBJSAAAAISEFAAAQElIAAAAhIQUAABASUgAAACEhBQAAEBJSAAAAISEFAAAQElIAAAAhIQUAABASUgAAACEhBQAAEBJSAAAAISEFAAAQElIAAAAhIQUAABASUgAAACEhBQAAEBJSAAAAISEFAAAQElIAAAAhIQUAABASUgAAACEhBQAAEBJSAAAAISEFAAAQElIAAAAhIQUAABASUgAAACEhBQAAEBJSAAAAISEFAAAQElIAAAAhIQUAABASUgAAACEhBQAAEBJSAAAAISEFAAAQElIAAAAhIQUAABASUgAAACEhBQAAEBJSAAAAISEFAAAQElIAAAAhIQUAABASUgAAACEhBQAAEBJSAAAAISEFAAAQElIAAAAhIQUAABASUgAAACEhBQAAEBJSAAAAISEFAAAQElIAAAAhIQUAABASUgAAACEhBQAAEBJSAAAAISEFAAAQElIAAAAhIQUAABASUgAAACEhBQAAEBJSAAAAISEFAAAQ+h9OaCdW3kXmdwAAAABJRU5ErkJggg==';
$data = str_replace('data:image/png;base64,', '', $data);
$data = str_replace(' ', '+', $data);
$data = base64_decode($data); // Decode image using base64_decode
$file = uniqid() . '.png'; //Now you can put this image data to your desired file using file_put_contents function like below:
$success = file_put_contents($file, $data);
You can capture parts by this regex :
^data:([a-zA-Z]+/[a-zA-Z]+);base64\,([a-zA-Z0-9+\=/]+)$
$imgstr = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAAAoCAYAAAC7HLUcAAADtUlEQVR4Xu2aLZYqMRCFMxuAFaARg8WwAnaABQEWgwUBFoMFARaDRqAxWBBoVgAbmPcu7/Q7PX3SP0k16TTcnDNqOpXKrXykKsmXUurn7x+bvQJf9l3Z03cFEFwCIosSAZHp53VvAiIPDwGRa+itBQIiDw0BkWvorQUCIg8NAZFr6K0FAiIPDQGRa+itBQIiDw0BkWvorQUCIg8NAZFr6K0FAiIPDQGRa+itBTEg7XZb1Wo11Wg0VKVS+T/Rx+Ohzuezut1uar/feyVAp9NR8Dvaer2ejZ8ExEa1kvSxBgQLbDQaPeFIa4BkPp97AQr8XiwWWpfr9XraVHT/JyA2qpWkjxUg+AWeTqfGU5xMJmq73Rr3y6vD9/e32mw2v3a6sG0CkpfS72PHGBAsst1uZ60A0pjj8Wjd37Yj0j/AAf/jGgGxVfd9+xkDgp0DO0i0oeZYLpfqcrk8F+FgMND+UqMeGQ6HzhVdr9eq1WoljktAnIfF+wGNATmdTtqFH02fsBixKHUgNZtNp8LEQR11goA4DUspBjMCJC69wu6hW/TX6zXPYthKUF29BH/DJ26BYQJiJfFbdzICJFAinKoAGiy4aPGN063D4VDoDqIDGr7iRE13yEBA3nqtW03OCpAsI+EoVXfX4KoGAaA4TIjezXS7XVWtVrXpHwHJEtnP+uYlgCTl/C5OseJOrII6Ka4+IiCftfizzDZXQLAwcXmoO+WCM652D93uhbRqtVo9NSEgWZYGv4ECuQGClAYLM+6eAce/SG9QA7yy9fv9J6ThhvoIu0e4htKdsHEHeWVkymk7F0BQa8xms9gbalwM4u7j1XDoTqx0YHIHKediLcJrMSC6X+zwRJDWIL1x0XR3NBj/fr//Gh67nS4NDPzUncol+M+3WC6CW9AYIkCSinEssvF47PSBYty9i6m22PEMXvYSEFOBS/S9NSBJcLhKqaI6E5ASrbySuGoFSFJaFS2IXepAQFyq/RljGQOS9po3y0td5PoonvNuBCRvRWnPGJAsr2LTZH3VZWHaa93AL0AePQrG/4K6A0W9AcCsQdICXuL/GwES977KdP6vAiSrHzzmzaoUvzMCJO1IN6ucBCSrUvyuaAWMAIl7gGg6CQJiqhi/L0oBI0CKctLzcVmDeB4giXsERKLev74ERK6htxYIiDw0BESuobcWCIg8NARErqG3FgiIPDQERK6htxYIiDw0BESuobcWCIg8NARErqG3FgiIPDQERK6htxYIiDw0BESuobcW/gDZOWY4lzJl1QAAAABJRU5ErkJggg==';
preg_match("/data\:image\/(.*)\;base64/",$imgstr, $match);
echo $match[1];
^^^^ Return file extension.
$data = str_replace('data:image/png;base64,', '', $imgstr);
data = str_replace(' ', '+', $data);
$data = base64_decode($data);
file_put_contents("/files/youfilemane.".$match[1],$data);
^^^^ Create file from base64.
Related
I'm using Nihilogic's "Canvas2Image" JavaScript tool to convert canvas drawings to PNG images.
What I need now is to turn those base64 strings that this tool generates, into actual PNG files on the server, using PHP.
In short, what I'm currently doing is to generate a file on the client side using Canvas2Image, then retrieve the base64-encoded data and send it to the server using AJAX:
// Generate the image file
var image = Canvas2Image.saveAsPNG(canvas, true);
image.id = "canvasimage";
canvas.parentNode.replaceChild(image, canvas);
var url = 'hidden.php',
data = $('#canvasimage').attr('src');
$.ajax({
type: "POST",
url: url,
dataType: 'text',
data: {
base64data : data
}
});
At this point, "hidden.php" receives a data block that looks like data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABE...
From this point on, I'm pretty much stumped. From what I've read, I believe that I'm supposed to use PHP's imagecreatefromstring function, but I'm not sure how to actually create an actual PNG image from the base64-encoded string and store it on my server.
Please aid!
You need to extract the base64 image data from that string, decode it and then you can save it to disk, you don't need GD since it already is a png.
$data = 'data:image/png;base64,AAAFBfj42Pj4';
list($type, $data) = explode(';', $data);
list(, $data) = explode(',', $data);
$data = base64_decode($data);
file_put_contents('/tmp/image.png', $data);
And as a one-liner:
$data = base64_decode(preg_replace('#^data:image/\w+;base64,#i', '', $data));
An efficient method for extracting, decoding, and checking for errors is:
if (preg_match('/^data:image\/(\w+);base64,/', $data, $type)) {
$data = substr($data, strpos($data, ',') + 1);
$type = strtolower($type[1]); // jpg, png, gif
if (!in_array($type, [ 'jpg', 'jpeg', 'gif', 'png' ])) {
throw new \Exception('invalid image type');
}
$data = str_replace( ' ', '+', $data );
$data = base64_decode($data);
if ($data === false) {
throw new \Exception('base64_decode failed');
}
} else {
throw new \Exception('did not match data URI with image data');
}
file_put_contents("img.{$type}", $data);
Try this:
file_put_contents('img.png', base64_decode($base64string));
file_put_contents docs
I had to replace spaces with plus symbols str_replace(' ', '+', $img); to get this working.
Here is the full code
$img = $_POST['img']; // Your data 'data:image/png;base64,AAAFBfj42Pj4';
$img = str_replace('data:image/png;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$data = base64_decode($img);
file_put_contents('/tmp/image.png', $data);
Hope that helps.
It worth to say that discussed topic is documented in RFC 2397 - The "data" URL scheme (https://www.rfc-editor.org/rfc/rfc2397)
Because of this PHP has a native way to handle such data - "data: stream wrapper" (http://php.net/manual/en/wrappers.data.php)
So you can easily manipulate your data with PHP streams:
$data = 'data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub//ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcppV0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7';
$source = fopen($data, 'r');
$destination = fopen('image.gif', 'w');
stream_copy_to_stream($source, $destination);
fclose($source);
fclose($destination);
Taken the #dre010 idea, I have extended it to another function that works with any image type: PNG, JPG, JPEG or GIF and gives a unique name to the filename
The function separate image data and image type
function base64ToImage($imageData){
$data = 'data:image/png;base64,AAAFBfj42Pj4';
list($type, $imageData) = explode(';', $imageData);
list(,$extension) = explode('/',$type);
list(,$imageData) = explode(',', $imageData);
$fileName = uniqid().'.'.$extension;
$imageData = base64_decode($imageData);
file_put_contents($fileName, $imageData);
}
Well your solution above depends on the image being a jpeg file. For a general solution i used
$img = $_POST['image'];
$img = substr(explode(";",$img)[1], 7);
file_put_contents('img.png', base64_decode($img));
Total concerns:
$data = 'data:image/png;base64,AAAFBfj42Pj4';
// Extract base64 file for standard data
$fileBin = file_get_contents($data);
$mimeType = mime_content_type($data);
// Check allowed mime type
if ('image/png'==$mimeType) {
file_put_contents('name.png', $fileBin);
}
http://php.net/manual/en/wrappers.data.php
http://php.net/manual/en/function.mime-content-type.php
One-linear solution.
$base64string = 'data:image/png;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub//ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcppV0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7';
file_put_contents('img.png', base64_decode(explode(',',$base64string)[1]));
This code works for me check below code:
<?php
define('UPLOAD_DIR', 'images/');
$image_parts = explode(";base64,", $_POST['image']);
$image_type_aux = explode("image/", $image_parts[0]);
$image_type = $image_type_aux[1];
$image_base64 = base64_decode($image_parts[1]);
$file = UPLOAD_DIR . uniqid() . '.png';
file_put_contents($file, $image_base64);
?>
based on drew010 example I made a working example for easy understanding.
imagesaver("data:image/jpeg;base64,/9j/4AAQSkZJ"); //use full base64 data
function imagesaver($image_data){
list($type, $data) = explode(';', $image_data); // exploding data for later checking and validating
if (preg_match('/^data:image\/(\w+);base64,/', $image_data, $type)) {
$data = substr($data, strpos($data, ',') + 1);
$type = strtolower($type[1]); // jpg, png, gif
if (!in_array($type, [ 'jpg', 'jpeg', 'gif', 'png' ])) {
throw new \Exception('invalid image type');
}
$data = base64_decode($data);
if ($data === false) {
throw new \Exception('base64_decode failed');
}
} else {
throw new \Exception('did not match data URI with image data');
}
$fullname = time().$type;
if(file_put_contents($fullname, $data)){
$result = $fullname;
}else{
$result = "error";
}
/* it will return image name if image is saved successfully
or it will return error on failing to save image. */
return $result;
}
try this...
$file = $_POST['file']; //your data in base64 'data:image/png....';
$img = str_replace('data:image/png;base64,', '', $file);
file_put_contents('img/imag.png', base64_decode($img));
PHP has already a fair treatment base64 -> file transform
I use to get it done coding this way:
$blob=$_POST['blob']; // base64 coming from an url, for example
//Now, let's save the image file:
file_put_contents('myfile.png',file_get_contents($blob));
Assuming you have filename in $filename and your base64encoded string in $testfile my oneliner:
file_put_contents($filename,base64_decode(explode(',', $testfile)[1]))
This function should work. this has the photo parameter that holds the base64 string and also path to an existing image directory should you already have an existing image you want to unlink while you save the new one.
public function convertBase64ToImage($photo = null, $path = null) {
if (!empty($photo)) {
$photo = str_replace('data:image/png;base64,', '', $photo);
$photo = str_replace(' ', '+', $photo);
$photo = str_replace('data:image/jpeg;base64,', '', $photo);
$photo = str_replace('data:image/gif;base64,', '', $photo);
$entry = base64_decode($photo);
$image = imagecreatefromstring($entry);
$fileName = time() . ".jpeg";
$directory = "uploads/customer/" . $fileName;
header('Content-type:image/jpeg');
if (!empty($path)) {
if (file_exists($path)) {
unlink($path);
}
}
$saveImage = imagejpeg($image, $directory);
imagedestroy($image);
if ($saveImage) {
return $fileName;
} else {
return false; // image not saved
}
}
}
It's simple :
Let's imagine that you are trying to upload a file within js framework, ajax request or mobile application (Client side)
Firstly you send a data attribute that contains a base64 encoded
string.
In the server side you have to decode it and save it in a local
project folder.
Here how to do it using PHP
<?php
$base64String = "kfezyufgzefhzefjizjfzfzefzefhuze"; // I put a static base64 string, you can implement you special code to retrieve the data received via the request.
$filePath = "/MyProject/public/uploads/img/test.png";
file_put_contents($filePath, base64_decode($base64String));
?>
If you want to randomly rename images, and store both the image path on database as blob and the image itself on folders this solution will help you. Your website users can store as many images as they want while the images will be randomly renamed for security purposes.
Php code
Generate random varchars to use as image name.
function genhash($strlen) {
$h_len = $len;
$cstrong = TRUE;
$sslkey = openssl_random_pseudo_bytes($h_len, $cstrong);
return bin2hex($sslkey);
}
$randName = genhash(3);
#You can increase or decrease length of the image name (1, 2, 3 or more).
Get image data extension and base_64 part (part after data:image/png;base64,) from image .
$pos = strpos($base64_img, ';');
$imgExten = explode('/', substr($base64_img, 0, $pos))[1];
$extens = ['jpg', 'jpe', 'jpeg', 'jfif', 'png', 'bmp', 'dib', 'gif' ];
if(in_array($imgExten, $extens)) {
$imgNewName = $randName. '.' . $imgExten;
$filepath = "resources/images/govdoc/".$imgNewName;
$fileP = fopen($filepath, 'wb');
$imgCont = explode(',', $base64_img);
fwrite($fileP, base64_decode($imgCont[1]));
fclose($fileP);
}
# => $filepath <= This path will be stored as blob type in database.
# base64_decoded images will be written in folder too.
# Please don't forget to up vote if you like my solution. :)
I hope this will help you.
I solved this issue with core php method.
My solved code as below.
$base64string = 'BASE64 STRING GOES HERE';
$uploadpath = 'YOUR UPLOAD DIR PATH';
$parts = explode(";base64,", $base64string); //THIS WILL GET THE ORIGINAL FILE ENCODE STRING
$imagebase64 = base64_decode($parts[1]); //THIS WILL GET THE DECODED IMAGE STRING
$file = $uploadpath . uniqid() . '.png'; // THIS WILL GIVE THE FILE NAME AND SET THE FILE PATH
file_put_contents($file, $imagebase64); // THIS FUNCTION WILL STORE THE IMAGE TO GIVEN PATH WITH FILE_NAME
I am sending base64 encoded image to PHP from my android app. Sometime it stores full image (4KB) and sometime (3KB) (Same Image). when I use URL in picasso, image with 4KB size works fine but image with 3KB size does not load it shows decode error.
This is my PHP code (which sometime works)
$encodedImage = str_replace(' ','+',$_POST['encodedProfileImage']);
$data = base64_decode($encodedImage);
$file = 'Pics/'. uniqid() . '.png';
$success = file_put_contents($file, $data);
$BASE_URL = 'http://domain.com/TestApp/';
I then do SQL operation in PHP to store image path. Is there any chance that next code operation is done on half decoded image(which is corrupt).
You need to remove the part that says data:image/png;base64, at the beginning of the image data. The actual base64 data comes after that.
Use below function:-
function base64_to_png($base64_string, $output_file) {
$ifp = fopen($output_file, "wb");
$data = explode(',', $base64_string);
fwrite($ifp, base64_decode($data[1]));
fclose($ifp);
return $output_file;
}
If you want to use str_replace function then may be below way work. I am not sure :)
$fname = filter_input(INPUT_POST, "name");
$encodedImage = filter_input(INPUT_POST, "image");
$encodedImage = str_replace('data:image/png;base64,', '', $encodedImage);
$encodedImage = str_replace(' ', '+', $encodedImage);
$encodedImage = base64_decode($encodedImage);
file_put_contents($fname, $encodedImage);
print "Image has been saved!";
Hope it will help you :)
I'm trying to get an image from canvas and save it with my php script. But when the script proceedes, I got a simple black rectangle instead of my canvas image (web-cam snapshot).
Here is my code:
$img = $base64Img;
$img = str_replace('data:image/png;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$data = base64_decode($img);
$file = "photo/" . uniqid() . '.png';
$success = file_put_contents($file, $data);
print $success ? $file : 'Unable to save the file.';
What is the purpose of this line:
$img = str_replace(' ', '+', $img);
Don't think it is necessary.
Otherwise all seems fine.
I usually use php explode to isolate the data:
$exploded = explode(',', $img);
$base64 = $exploded[1];
$data = base64_decode($base64);
But str_replace should also do the job.
Maybe the error is in the code that loads the image?
UPDATE
Purpose of that line is to encode the white space in the base64 data.
This is also mentioned in this comment on php.net.
Probably it would be better to use the PHP function urlencode in such cases.
$data = base64_decode($data);
This line is probably causing the issues in this, since the data is not used as a data url but saved to a file directly.
When i post a base64 stream to a php page using post, i never received the totality of the stream. I increase the max post size, but it doesn't affect anything.
Have you already seen a similar problem ?
Here is the server code :
$value = $_POST['file'];
echo "-------";
echo $value;
echo "-------";
$img = $value;
$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.';
I'm not PHP developer, you will probably find some bad practices.
Thanks in advance for any kind of help / suggestions.
If you have suhosin check for the suhosin.post.max_value_length
I'm using Nihilogic's "Canvas2Image" JavaScript tool to convert canvas drawings to PNG images.
What I need now is to turn those base64 strings that this tool generates, into actual PNG files on the server, using PHP.
In short, what I'm currently doing is to generate a file on the client side using Canvas2Image, then retrieve the base64-encoded data and send it to the server using AJAX:
// Generate the image file
var image = Canvas2Image.saveAsPNG(canvas, true);
image.id = "canvasimage";
canvas.parentNode.replaceChild(image, canvas);
var url = 'hidden.php',
data = $('#canvasimage').attr('src');
$.ajax({
type: "POST",
url: url,
dataType: 'text',
data: {
base64data : data
}
});
At this point, "hidden.php" receives a data block that looks like data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABE...
From this point on, I'm pretty much stumped. From what I've read, I believe that I'm supposed to use PHP's imagecreatefromstring function, but I'm not sure how to actually create an actual PNG image from the base64-encoded string and store it on my server.
Please aid!
You need to extract the base64 image data from that string, decode it and then you can save it to disk, you don't need GD since it already is a png.
$data = 'data:image/png;base64,AAAFBfj42Pj4';
list($type, $data) = explode(';', $data);
list(, $data) = explode(',', $data);
$data = base64_decode($data);
file_put_contents('/tmp/image.png', $data);
And as a one-liner:
$data = base64_decode(preg_replace('#^data:image/\w+;base64,#i', '', $data));
An efficient method for extracting, decoding, and checking for errors is:
if (preg_match('/^data:image\/(\w+);base64,/', $data, $type)) {
$data = substr($data, strpos($data, ',') + 1);
$type = strtolower($type[1]); // jpg, png, gif
if (!in_array($type, [ 'jpg', 'jpeg', 'gif', 'png' ])) {
throw new \Exception('invalid image type');
}
$data = str_replace( ' ', '+', $data );
$data = base64_decode($data);
if ($data === false) {
throw new \Exception('base64_decode failed');
}
} else {
throw new \Exception('did not match data URI with image data');
}
file_put_contents("img.{$type}", $data);
Try this:
file_put_contents('img.png', base64_decode($base64string));
file_put_contents docs
I had to replace spaces with plus symbols str_replace(' ', '+', $img); to get this working.
Here is the full code
$img = $_POST['img']; // Your data 'data:image/png;base64,AAAFBfj42Pj4';
$img = str_replace('data:image/png;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$data = base64_decode($img);
file_put_contents('/tmp/image.png', $data);
Hope that helps.
It worth to say that discussed topic is documented in RFC 2397 - The "data" URL scheme (https://www.rfc-editor.org/rfc/rfc2397)
Because of this PHP has a native way to handle such data - "data: stream wrapper" (http://php.net/manual/en/wrappers.data.php)
So you can easily manipulate your data with PHP streams:
$data = 'data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub//ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcppV0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7';
$source = fopen($data, 'r');
$destination = fopen('image.gif', 'w');
stream_copy_to_stream($source, $destination);
fclose($source);
fclose($destination);
Taken the #dre010 idea, I have extended it to another function that works with any image type: PNG, JPG, JPEG or GIF and gives a unique name to the filename
The function separate image data and image type
function base64ToImage($imageData){
$data = 'data:image/png;base64,AAAFBfj42Pj4';
list($type, $imageData) = explode(';', $imageData);
list(,$extension) = explode('/',$type);
list(,$imageData) = explode(',', $imageData);
$fileName = uniqid().'.'.$extension;
$imageData = base64_decode($imageData);
file_put_contents($fileName, $imageData);
}
Well your solution above depends on the image being a jpeg file. For a general solution i used
$img = $_POST['image'];
$img = substr(explode(";",$img)[1], 7);
file_put_contents('img.png', base64_decode($img));
Total concerns:
$data = 'data:image/png;base64,AAAFBfj42Pj4';
// Extract base64 file for standard data
$fileBin = file_get_contents($data);
$mimeType = mime_content_type($data);
// Check allowed mime type
if ('image/png'==$mimeType) {
file_put_contents('name.png', $fileBin);
}
http://php.net/manual/en/wrappers.data.php
http://php.net/manual/en/function.mime-content-type.php
One-linear solution.
$base64string = 'data:image/png;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub//ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcppV0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7';
file_put_contents('img.png', base64_decode(explode(',',$base64string)[1]));
This code works for me check below code:
<?php
define('UPLOAD_DIR', 'images/');
$image_parts = explode(";base64,", $_POST['image']);
$image_type_aux = explode("image/", $image_parts[0]);
$image_type = $image_type_aux[1];
$image_base64 = base64_decode($image_parts[1]);
$file = UPLOAD_DIR . uniqid() . '.png';
file_put_contents($file, $image_base64);
?>
based on drew010 example I made a working example for easy understanding.
imagesaver("data:image/jpeg;base64,/9j/4AAQSkZJ"); //use full base64 data
function imagesaver($image_data){
list($type, $data) = explode(';', $image_data); // exploding data for later checking and validating
if (preg_match('/^data:image\/(\w+);base64,/', $image_data, $type)) {
$data = substr($data, strpos($data, ',') + 1);
$type = strtolower($type[1]); // jpg, png, gif
if (!in_array($type, [ 'jpg', 'jpeg', 'gif', 'png' ])) {
throw new \Exception('invalid image type');
}
$data = base64_decode($data);
if ($data === false) {
throw new \Exception('base64_decode failed');
}
} else {
throw new \Exception('did not match data URI with image data');
}
$fullname = time().$type;
if(file_put_contents($fullname, $data)){
$result = $fullname;
}else{
$result = "error";
}
/* it will return image name if image is saved successfully
or it will return error on failing to save image. */
return $result;
}
try this...
$file = $_POST['file']; //your data in base64 'data:image/png....';
$img = str_replace('data:image/png;base64,', '', $file);
file_put_contents('img/imag.png', base64_decode($img));
PHP has already a fair treatment base64 -> file transform
I use to get it done coding this way:
$blob=$_POST['blob']; // base64 coming from an url, for example
//Now, let's save the image file:
file_put_contents('myfile.png',file_get_contents($blob));
Assuming you have filename in $filename and your base64encoded string in $testfile my oneliner:
file_put_contents($filename,base64_decode(explode(',', $testfile)[1]))
This function should work. this has the photo parameter that holds the base64 string and also path to an existing image directory should you already have an existing image you want to unlink while you save the new one.
public function convertBase64ToImage($photo = null, $path = null) {
if (!empty($photo)) {
$photo = str_replace('data:image/png;base64,', '', $photo);
$photo = str_replace(' ', '+', $photo);
$photo = str_replace('data:image/jpeg;base64,', '', $photo);
$photo = str_replace('data:image/gif;base64,', '', $photo);
$entry = base64_decode($photo);
$image = imagecreatefromstring($entry);
$fileName = time() . ".jpeg";
$directory = "uploads/customer/" . $fileName;
header('Content-type:image/jpeg');
if (!empty($path)) {
if (file_exists($path)) {
unlink($path);
}
}
$saveImage = imagejpeg($image, $directory);
imagedestroy($image);
if ($saveImage) {
return $fileName;
} else {
return false; // image not saved
}
}
}
It's simple :
Let's imagine that you are trying to upload a file within js framework, ajax request or mobile application (Client side)
Firstly you send a data attribute that contains a base64 encoded
string.
In the server side you have to decode it and save it in a local
project folder.
Here how to do it using PHP
<?php
$base64String = "kfezyufgzefhzefjizjfzfzefzefhuze"; // I put a static base64 string, you can implement you special code to retrieve the data received via the request.
$filePath = "/MyProject/public/uploads/img/test.png";
file_put_contents($filePath, base64_decode($base64String));
?>
If you want to randomly rename images, and store both the image path on database as blob and the image itself on folders this solution will help you. Your website users can store as many images as they want while the images will be randomly renamed for security purposes.
Php code
Generate random varchars to use as image name.
function genhash($strlen) {
$h_len = $len;
$cstrong = TRUE;
$sslkey = openssl_random_pseudo_bytes($h_len, $cstrong);
return bin2hex($sslkey);
}
$randName = genhash(3);
#You can increase or decrease length of the image name (1, 2, 3 or more).
Get image data extension and base_64 part (part after data:image/png;base64,) from image .
$pos = strpos($base64_img, ';');
$imgExten = explode('/', substr($base64_img, 0, $pos))[1];
$extens = ['jpg', 'jpe', 'jpeg', 'jfif', 'png', 'bmp', 'dib', 'gif' ];
if(in_array($imgExten, $extens)) {
$imgNewName = $randName. '.' . $imgExten;
$filepath = "resources/images/govdoc/".$imgNewName;
$fileP = fopen($filepath, 'wb');
$imgCont = explode(',', $base64_img);
fwrite($fileP, base64_decode($imgCont[1]));
fclose($fileP);
}
# => $filepath <= This path will be stored as blob type in database.
# base64_decoded images will be written in folder too.
# Please don't forget to up vote if you like my solution. :)
I hope this will help you.
I solved this issue with core php method.
My solved code as below.
$base64string = 'BASE64 STRING GOES HERE';
$uploadpath = 'YOUR UPLOAD DIR PATH';
$parts = explode(";base64,", $base64string); //THIS WILL GET THE ORIGINAL FILE ENCODE STRING
$imagebase64 = base64_decode($parts[1]); //THIS WILL GET THE DECODED IMAGE STRING
$file = $uploadpath . uniqid() . '.png'; // THIS WILL GIVE THE FILE NAME AND SET THE FILE PATH
file_put_contents($file, $imagebase64); // THIS FUNCTION WILL STORE THE IMAGE TO GIVEN PATH WITH FILE_NAME