PHP: Convert base64 to image

Question

public function addNewCategory($category_title, $strImage) {

    // get the image from the base64 string.
    $strImage = str_replace('data:image/png;base64,', '', $strImage);
    $strImage = str_replace(' ', '+', $strImage);
    $strImage = base64_decode($strImage);

    // set the path name of where the image is to be stored.
    $path = dirname(__FILE__).'/category_images/'.$category_title.".png";

    // save the image in the path.
    file_put_contents($path, $image);

    // insert category and the image path into the MySQL database.
    $result = mysqli_query($this->db->connect(), "INSERT INTO category(category_title, path, created_at) VALUES ('$category_title', '$path', NOW())");

    if ($result) {
        return mysqli_fetch_array($result);
    } else {
        return false;
    }
}

After running this code I found out that the PNG file with the category title name is stored in the category_images directory. But it turns out that the size of the PNG file is zero, so I believe that there is a flaw in converting the base64 string into image.

Your tips for the correction will be very much appreciated.

Edited The Base64 string here is encoded in Android with the following method.

public String getStringFromImage(Bitmap bitmap) {
    ByteArrayOutputStream stream = new ByteArrayOutputStream();
    bitmap.compress(Bitmap.CompressFormat.PNG, 100, stream);
    byte[] imageBytes = stream.toByteArray();
    String encodedImage = Base64.encodeToString(imageBytes, Base64.DEFAULT);
    return encodedImage;
}

and here is the encoded string. I got this value using Log.i() method.

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

According to the encoded string, the data:image/png;base64, is not included in front of the string. I think now this is the reason the PNG file is not properly made. What can be done here to fix this issue?

Possible duplicate of [Convert Base64 string to an image file?](http://stackoverflow.com/questions/15153776/convert-base64-string-to-an-image-file) — The Beast, Dec 02 '15 at 01:03
Where does `$image` to be saved come from? Shouldn't it be `$strImage`? — MikeCAT, Dec 02 '15 at 01:05
@MikeCAT Thanks for pointing that out. I re-ran the code but that didn't help fixing the problem though.. — MarshallLee, Dec 02 '15 at 01:07
Are you sure the passed value of `$strImage` is proper? If not, please checik it by printing or something. — MikeCAT, Dec 02 '15 at 01:10
@MikeCAT I added a few things on the question. Could you please check out? — MarshallLee, Dec 02 '15 at 01:26

score 10 · Accepted Answer · answered Dec 02 '15 at 17:53

That encoded data is the contents of the image file, and data:image/png;base64, is only used if you're cramming the image data into HTML.

Putting the data into your HTML source bloats the source, slows down your initial page load, robs the browser of the ability to download large resources like images in parallel, and makes the image un-cacheable between pages. Don't do it unless you literally have no other option.

To convert the image back to a file simply:

file_put_contents('foo.png', base64_decode($str));

Or make a PHP script pretend it's an image:

header('Content-Type: image/png');
echo base64_decode($str);

Or to do the thing I just told you not to do because seriously never do this there are so many ways to not do this, I'll be super disappointed with you if this is what you take away from this answer:

printf('<img src="data:image/png;base64,%s" />', $str);

PHP: Convert base64 to image

1 Answers1