How do I convert a base64 string to a png image in PHP?

Question

I am trying to create a PHP form that outputs a PDF (using mPDF) of all the values in the form after hitting submit. I have included jSignature which takes in an e-signature drawn by the user. The signature is then converted to an image and outputs the data URI string in a text area.

            <div id="signature"></div><br/>

            <input type='button' id='click' value='click'>
            <textarea id='output' name="signature"></textarea><br/>

            <!-- Preview image -->
            <img src='' id='sign_prev' style='display: none;' />

            <!-- Script -->
            <script>
            $(document).ready(function() {

            // Initialize jSignature
            var $sigdiv = $("#signature").jSignature({'UndoButton':true});

            $('#click').click(function(){
            // Get response of type image
            var data = $sigdiv.jSignature('getData', 'image');

            // Storing in textarea
            $('#output').val(data);

            // Alter image source 
            $('#sign_prev').attr('src',"data:"+data);
            $('#sign_prev').show();
            });
            });
            </script>
            <button type="submit" class="btn btn-success btn-lg">Submit</button>

I have another file that uses the name attribute from the input areas to display the values from each input field to show on the PDF. Since the signature comes in as a data URI string I have to convert it back into a png image before creating the PDF. What I am sure of at the moment is that I am able to retrieve the data URI string and I am able to replace the "image/png;base64" string that comes with it so all I am left with is the data itself. But I am struggling to decode the URI back to an image and I am not sure about how I should display it back as an image.

<?php


require_once __DIR__ . '/vendor/autoload.php';


//grab variables
$inspection = $_POST['inspection'];
$ccOfficer = $_POST['cco-name'];
$inspector = $_POST['inspector'];
$tower = $_POST['tower'];
$strata = $_POST['strata'];
$suite = $_POST['suite'];
$phone = $_POST['phone'];
$email = $_POST['email'];
$signature = $_POST['signature'];

//Create new PDf instance
$mpdf = new \Mpdf\Mpdf();

$mpdf->debug = true;

$signature = str_replace('image/png;base64,','', $signature);

$signatureDecode = base64_decode($signature);

$im = imagecreatefromstring($signatureDecode);

if(!$im) {
    die('Base64 value is not a valid image');
};

// $img_file = '/wti-report-form/images/signature.png';
// imagepng($im, $img_file, 0);

//$file = fopen($output_file, "wb");

//fwrite($file, $signatureDecode);
//fclose($file);

//Create our PDF
$data = '';


$data .= '<h1>ARC - NEW HOME WALK-THROUGH CHECKLIST</h1>';

//add data
$data .= '<strong>Inspection Date</strong> ' . $inspection . '<br/>';
$data .= '<strong>Customer Care Officer</strong> ' . $ccOfficer . '<br/>';
$data .= '<strong>This Suite was inspected by</strong> ' . $inspector . '<br/>';
$data .= '<strong>Tower #</strong> ' . $tower . '<br/>';
$data .= '<strong>Strata Lot #</strong> ' . $strata . '<br/>';
$data .= '<strong>Suite #</strong> ' . $suite . '<br/>';
$data .= '<strong>Email</strong> ' . $phone . '<br/>';
$data .= '<strong>Phone</strong> ' . $email . '<br/>';
//$data .= "<img src='" . $file . "'/>";    
//$data .= '<p>' . $signature . '</p>';    

//Write PDF
$mpdf->WriteHTML($data);

//output to the browser

$mpdf->Output('myfile.pdf', 'I');
?>

Any help will be appreciated. Thanks! :)

score 1 · Answer 1 · answered Nov 26 '19 at 23:09

1

As far as I know You can use base64 data string in img tag and mpdf will render PDF correctly, did You try this solution ?

$data.='<img src="data:image/png;base64,'.$signature.'" />';

answered Nov 26 '19 at 23:09

Cichy

109
5

I just tried it now and it returned a square with an xmark, after turning the debugger on i got this error "Fatal error: Uncaught Mpdf\MpdfImageException: Error parsing PNG identifier (9cf1f11b4c593fabea6cdf7056e2312b)" – Einer Lim Nov 26 '19 at 23:20
Strange, can You check if You can decode this data string to image, for example here: https://freeonlinetools24.com/base64-image – Cichy Nov 27 '19 at 00:17
hmmm it works in the link that you sent me but doesn't on my form... – Einer Lim Nov 27 '19 at 00:23
It works if I paste the data string directly into the source of the img tag. But if I try to pass in the variable for some reason it can't read the string. – Einer Lim Nov 27 '19 at 00:28
next thing that I can think of is incorrect mime type, did You tried changing image/png to image/jpg in your code ? I will test my answer again but official documentation of mpdf says that embeded images are supported next thing You can do is dump Your $data variable before passing it to mpdf and check if everything is for 100% correct there. – Cichy Nov 27 '19 at 00:31
I did var_dump($_POST['signature']) and it returned an error saying that data has already been outputted. I added it before passing it into mpdf. – Einer Lim Nov 27 '19 at 00:45
By saying dump $data variable, I meant that you should add something like: `echo $data; exit;` before: `$mpdf->WriteHTML($data);` that way, mpdf will not render anything but you will be able to see html code and check if everything is ok with it. I tried mpdf embeded images and it's working fine maybe You have outdated version of library or something is wrong with Your image data, it's really hard to tell without more data. – Cichy Nov 27 '19 at 00:52
ahh I see I dumped the data before writing to html and i could see the data URI coming in but for some reason if i pass it as a variable it cant read the URI and therefore it cant convert it back to an image. – Einer Lim Nov 27 '19 at 17:02
if You will edit Your originall question with new code I may be able ot help You. – Cichy Nov 27 '19 at 21:54

How do I convert a base64 string to a png image in PHP?

1 Answers1