how to read image file as data url using php

Question

In javascript, I read the file data by binding the on-change method to the file input and saving the file data into another input using the following code

$("#release_cover_custom").on('change', function (evt) {
    var files = evt.target.files; // FileList object

    // Loop through the FileList and render image files as thumbnails.
    for (var i = 0, f; f = files[i]; i++) {

        // Only process image files.
        if (!f.type.match('image.*')) {
            continue;
        }

        var reader = new FileReader();

        // Closure to capture the file information.
        reader.onload = (function (theFile) {
            return function (e) {
                $("#release_cover_custom_data").val(e.target.result);
            };
        })(f);

        // Read in the image file as a data URL.
        reader.readAsDataURL(f);
    }


});

why i use the above code?, to store the image data, because i have a form where i provide settings for the email template that would be sent later and there i have to provide the background image to be used inside the email, i need to preview the email with all the settings and along with the background image provided to upload before saving the form or uploading the image, so i read the image data, save it to an input and then open a modal window to preview email and post all the necessary variables there including the image data which is then used in the following way inside the css to apply the background-image like below in my php view file

background-image:url('" . $background_image . "') !important;

Now i want to do the achieve the same thing via php, means if i have the image saved to a path and i want to read the image data and use it in the same way i did using javascript to futher pass it to the css property,

i tried to use base64_encode(file_get_contents('path/to/file'))

but the encoding seems to be different for the image data, as the background image is not shown should i be using some other method to achieve it in php.

It seems you want to display selected image before user upload it.. am i right ? are you able to create a fiddle for the same ? — Punit Gajjar
– Punit Gajjar, Commented Nov 14, 2016 at 10:03
no i have displayed the image already before uploading it , after saving the image i want to read the image data in the same way i did in javascript and load it in the background , i know it would be confusing that if i already have the image then why dont i use the url instead , i have to add more checks in the existing code for the preview and i thought if i could do the same process via php then all i need to do is to pass the image data and it will be loaded. hope i was able to explain the problem — Muhammad Omer Aslam
– Muhammad Omer Aslam, Commented Nov 14, 2016 at 10:10
The data url has to look like data:[<media type>][;base64],<data>. You can't just use the base64 encoded data as the background image url. — Quagaar
– Quagaar, Commented Nov 14, 2016 at 10:10
Hmm , that is something i didnt knew before, so my previous code was like below $image_data=base64_decode(file_get_contents('/path/to/file')) and by my understanding i changed it to below $finfo = finfo_open('fileinfo_mime_type'); $mime_type = finfo_file('/path/to/file'); $background_image = 'data:[<'.$mime_type.'>][;'.base64_encode(file_get_contents('/path/to/image')).']<data>'; am i doing it the right way ? — Muhammad Omer Aslam
– Muhammad Omer Aslam, Commented Nov 14, 2016 at 10:22

Muhammad Omer Aslam · Accepted Answer · 2022-01-13 17:49:17Z

1

@quagaar reply (on the question) helped me solve the problem and replaced the following

$background_image=base64_encode(file_get_contents('/path/to/file'));

with

$background_image='data:image/png;base64,'.base64_encode(file_get_contents('/path/to/file'));

and everything works fine as expected.

EDIT:

between i was dealing with images only and if you are working with Images only and you need mime type (e.g. for headers, or like my case), then this is a fast and reliable technique:

$file = 'path/to/image.jpg';
$image_mime = image_type_to_mime_type(exif_imagetype($file));

It will output true image mime type even if you rename your image file.

edited Jan 13, 2022 at 17:49

answered Nov 14, 2016 at 20:09

Muhammad Omer Aslam

23.9k9 gold badges47 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

how to read image file as data url using php

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related