PHP Data-URI to file

Question

I have a data URI I am getting from javascript and trying to save via php. I use the following code which gives a apparently corrupt image file:

  $data = $_POST['logoImage'];

  $uri = substr($data,strpos($data,",")+1);

  file_put_contents($_POST['logoFilename'], base64_decode($uri));



data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs 9AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAxklEQVQYlYWQMW7CUBBE33yITYUUmwbOkBtEcgUlTa7COXIVV5RUkXKC5AxU EdyZVD4kyKxkwIrr9vd0c7Oih aopinLNsF6Qkg2XW4XJ7LGFsAAcTV6lF5/jLdbALA9XDAXYfthFQVx OrmqKYK88/7rbbMFksALieTnzu9wDYTj6f70PKsp2kwAiSvjXNcvkWpAfNZkzWa/5a9yT7fdoX7rrB7hYh2fXo9HdjPYQZu3MIU8bYIlW20y0RUlXG2Kpv/vfwLxhTaSQwWqwhAAAAAElFTkSuQmCC

Below the code is the actual image as a Data-URI. 'logoImage' is the string above, and $uri is the string minus 'image/jpeg;base64,'.

The data URI you have in your example is not a valid PNG image. This will never work and is unrelated to the code, it's related to the data. — hakre, Jul 18 '11 at 15:45
You might want to keep that as a base64 image. I'm guessing, because I'm not a binary expert, that all of the examples given here yield a 32 bit result. As of PHP 5.2, data urls should work, so the solution could really be as simple as: `file_put_contents('logo.png', preg_replace(/\s+/, '+', $_POST['logoImage']))` if you're using the JavaScript FileReader API in conjunction with AJAX. — StackSlave, Sep 28 '17 at 12:36
You really don’t have to replace any spaces with plus signs, and the accepted answer is treating a symptom without touching the cause. You just need to send properly URL-encoded data from JavaScript to your server. Also, [PHP-FileUpload](https://github.com/delight-im/PHP-FileUpload) has a [`DataUriUpload`](https://github.com/delight-im/PHP-FileUpload/blob/023f812226673ac9e0696d8a3579bb7380606dda/src/DataUriUpload.php) component which does the rest automatically and is documented [here](https://github.com/delight-im/PHP-FileUpload/tree/023f812226673ac9e0696d8a3579bb7380606dda#data-uri-uploads). — caw, Dec 04 '17 at 23:50

score 82 · Accepted Answer · edited Jul 13 '20 at 19:29

82

A quick look at the PHP manual yields the following:

If you want to save data that is derived from a Javascript canvas.toDataURL() function, you have to convert blanks into plusses. If you do not do that, the decoded data is corrupted:
$encodedData = str_replace(' ','+',$encodedData);
$decodedData = base64_decode($encodedData);

edited Jul 13 '20 at 19:29

Darryl Hein

142,451
95
218
261

answered Jul 18 '11 at 15:39

Paul S.

1,527
9
13

This worked. Wow, I can't believe I could not find this earlier! I'll accept this as soon as I can, thanks @Graydot – GAgnew Jul 18 '11 at 15:42
1

This alone was not enough for me. I also had to strip everything up to the first comma, as well as the comma, before escaping the spaces with pluses: ````$decoded = Base64::decode(PHP\str_replace(' ','+',PHP\explode(',', $imageDataURL)[1]));```` – P A S H Sep 20 '20 at 08:18

score 53 · Answer 2 · edited Oct 07 '21 at 07:34

53

The data URI you have in your example is not a valid PNG image. This will never work and is unrelated to the code, it's related to the data.

Does not apply but might be of interest:

file_put_contents($_POST['logoFilename'], file_get_contents($data));

The idea behind: PHP itself can read the contents of data URIs (data://) so you don't need to decode it on your own.

Note that the official data URI scheme (ref: The "data" URL scheme RFC 2397) does not include a double slash ("//") after the colon (":"). PHP supports with or without the two slashes.

 # RFC 2397 conform
 $binary = file_get_contents($uri);

 # with two slashes
 $uriPhp = 'data://' . substr($uri, 5);
 $binary = file_get_contents($uriPhp);

edited Oct 07 '21 at 07:34

Community

1
1

answered Jul 18 '11 at 15:38

hakre

193,403
52
435
836

2

And finally: `file_put_contents($_POST['logoFilename'], $binary);` – andreszs Dec 18 '14 at 23:35
We're on PHP 5.5.25, and it seems it is not necessary to add the double slashes. – Andz Jul 12 '15 at 19:37
1

@Andz: Looks like with PHP 5.2+ this always worked: http://3v4l.org/Fk4RY - very nice Comment on PHP.net is years old, too. Don't trust the map, trust the terrain, thanks again for the hint. Corrected the answer. – hakre Jul 14 '15 at 18:48
1

This is a great answer, no idea this was built-in! – Joel Jan 24 '17 at 16:01
Your solution did not work for me. I have tried file_put_contents('https://www.instagram.com/nasa/?__a=1') but does not work. – Kamlesh Jun 21 '20 at 14:09

score 37 · Answer 3 · answered May 21 '15 at 07:22

37

The all code that works :

$imgData = str_replace(' ','+',$_POST['image']);
$imgData =  substr($imgData,strpos($imgData,",")+1);
$imgData = base64_decode($imgData);
// Path where the image is going to be saved
$filePath = $_SERVER['DOCUMENT_ROOT']. '/ima/temp2.png';
// Write $imgData into the image file
$file = fopen($filePath, 'w');
fwrite($file, $imgData);
fclose($file);

answered May 21 '15 at 07:22

Christophe

379
3
2

3

!! I have tried a TON of answers on SO and elsewhere, and this is the only thing that worked! It worked! Thanks. – Jake Feb 01 '16 at 22:28

score 0 · Answer 4 · edited Aug 30 '21 at 18:52

I have another way to do this with PHP.

$img = str_replace(' ','+',$img);
$i = explode(',', $img);
$imgData = array_pop($i);
$newName = 'digital_file/'. rand(10, 16) . '.' . str_replace('/', '.', mime_content_type($img) );
// data:image/png;base64
$imgData = base64_decode($imgData);

Now you can use file_put_contents($newName) to create the image file. Produces a file with a random numerical name (e.g. "123123.image.png"). And of course it has correct mime type.

PHP Data-URI to file

4 Answers4

Linked

Related