CODEWITHSUNDEEP
php
MarshallLee
MarshallLee

Reputation: 1330

PHP: Convert base64 to image

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?

Upvotes: 0

Views: 18568

Answers (1)

Sammitch
Sammitch

Reputation: 32272

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);

Upvotes: 10

Related Questions