decode base64 image on php get blank image

Question

I'm trying to decode base64 image on php but i get blank image with black screen showing that windows doesn't support this type of file.

Here is my code

public function uploadfoto(){
    $img = $_POST['foto'];
    $img = str_replace('data:image/jpeg;base64,', '', $img);
    $img = str_replace(' ', '+', $img);
    $data = base64_decode($img);
    $filedir = "./assets/upload/presensi/mx_" . mktime() . ".jpg";
    $filename = "mx_".mktime().".jpg";

    $result = file_put_contents($filedir, $data);
}

I get the image from my webcam and here is my view

<form id ="inputfoto">
    <div id="my_camera" style="width: 320px; height: 240px;" class="center"></div>
    <!-- First, include the Webcam.js JavaScript Library -->
    <script type="text/javascript" src="<?php echo base_url();?>assets/dist/js/webcamjs/webcam.js"></script>

    <!-- Configure a few settings and attach camera -->
    <script language="JavaScript">
        Webcam.set({
            width: 320,
            height: 240,
            image_format: 'jpeg',
            jpeg_quality: 100
        });
        Webcam.attach( '#my_camera' );
    </script>
    <div id="results" align = "middle" >Hasil akan tampil di sini</div>
    <input type="button" value="Take Snapshot" onclick="take_snapshot()" class="center" style="margin-bottom: 5px;">
    <input type="button" value="Submit" onClick="saveSnap()" class="center">
</form>

<script language="JavaScript">
    function take_snapshot() {
        // take snapshot and get image data
        Webcam.snap( function(data_uri) {
            // display results in page
            document.getElementById('results').innerHTML = 
                '<h2>HASIL</h2>' + 
                '<img id="foto" src="'+data_uri+'"/>';
        } );
    }
    function saveSnap(){
        var file =  document.getElementById("foto").src;
        var formdata = new FormData();
        formdata.append("foto", file);
        var ajax = new XMLHttpRequest();
        ajax.open("POST", "<?php echo base_url();?>asisten/presensi/uploadfoto");
        ajax.send(formdata);
    }
</script>

And here is the Blank Image

What's wrong with my code? Thank you very much for your respond.

Is this *really* python? I think you may have your languages mixed up. — user3483203, Aug 05 '18 at 07:04
Possible duplicate of [Convert Base64 string to an image file?](https://stackoverflow.com/questions/15153776/convert-base64-string-to-an-image-file) — Alex, Aug 05 '18 at 07:13
@Alex no, i've removed the data:image/jpeg;base64 in my code. That question have a problem that didn't remove the string data:image/png;base64. But even though i've removed that string, i stil get a blank image. — Abi Fadhillah Surya, Aug 05 '18 at 07:17
why you do this `$img = str_replace(' ', '+', $img);`? also str replace only works if the search part of the string is exactly the same. the answer i marked as duplicate has a better way of doing it — Alex, Aug 05 '18 at 07:21
This code does not produce any output but you mention the browser. Are you actually sending the file to the browser? Have you inspected the file first, rather than adding some layers of processing before diagnostics? — Álvaro González, Aug 05 '18 at 07:25
@Alex I tried to remove that code but the result is still the same. — Abi Fadhillah Surya, Aug 05 '18 at 07:34
I've edited my code so i got the image from my webcam with webcam.js — Abi Fadhillah Surya, Aug 05 '18 at 07:35
Bro I've already answered your question: https://stackoverflow.com/questions/51628533/webcam-js-implementation-on-codeigniter-get-error-while-saving-image ... why post a clear *duplicate* if you haven't even looked at your original question to see if it has any answers??? — Alex, Aug 05 '18 at 07:36

score 1 · Accepted Answer · answered Aug 05 '18 at 08:30

This code works for me.Please check it

$image = $this->generateImage($_POST['foto']);

public function generateImage($img)
    {

        $folderPath = "uploads/";
        $image_parts = explode(";base64,", $img);
        $image_type_aux = explode("uploads/", $image_parts[0]);
        $image_base64 = base64_decode($image_parts[1]);
        $name = uniqid() . '.png';
        $file = $folderPath . $name;
        file_put_contents($file, $image_base64);
        return $name;

    }

decode base64 image on php get blank image

1 Answers1