I am building an in-house app for Client Relationship Management.
This app is fairly straight forward. It collects client information and stores it for later use.
One part of the information collected is an image of the clients photo identification. I am storing this image in its own table in mySQL database.
I have been looking for a way to display the image in a small preview window along side the clients information (name, address, etc). What I am finding for possible solutions are very old and depreciated at this point, or refer to displaying an image where just the URL of the file is stored in the database and the image itself is saved in a folder on the server.
The code I currently have does not display anything in the HTML but blank space. I did have one version before this that displayed the raw data from the BLOB, but it was crashing everything so I did not keep it to show you here.
My question is, is there a resource someone can point me to that is specifically about how this type of information is used by a web browser and how to organize it appropriatly for display? OR, if this is all wrong for some reason, can someone point me towards documentation that is a better way to do this? I am not experienced with any of this, and have trouble searching for answers sometimes due to lack of correct terminology.
The table looks like:
TABLE NAME = "photoid"
row 1 = "id" (auto increment)
row 2 = "name" (varchar)
row 3 = "mime" (varchar)
row 4 = "size" (bigint)
row 5 = "data" (medium blob)
row 6 = "created" (datetime)
row 7 = "client_id" (varchar)
The HTML:
<img width="400" height="200" src="<?php include ('client_display_photoid.php');?>" />
The PHP:
<?php include ('connect.php');?>
<?php
$client_id = htmlspecialchars($_POST['client_id']);
// prepare stmt, bind param, execute
$stmt = $conn->prepare("SELECT mime, name, size, data FROM photoid WHERE client_id = ?");
$stmt->bind_param("s", $client_id);
$stmt->execute();
// bind results
$stmt->bind_result($mime, $name, $size, $data);
// Print headers
header("Content-Type: $mime");
header("Content-Length: $size");
header("Content-Disposition: attachment; filename = $name");
// Print data
echo $data;
?>
<?php include ('disconnect.php');?>
EDIT 1: After reviewing the comments, I was able to get rid of the "blank space" that was displaying by removing the open PHP tags. I also looked at the link provided and changed my code as follows.
HTML:
<img width="300px" height="150px" src="data:image/jpeg;base64,<?php echo base64_encode( $data ); ?>" />
PHP:
<?php
include ('connect.php');
$stmt = $conn->prepare("SELECT data FROM photoid WHERE client_id = ?");
$stmt->bind_param("s", $client_id);
$stmt->execute();
$stmt->bind_result($data);
include ('disconnect.php');
?>
The following is what is now displayed when I try to display the image:
<img width="300px" height="150px" src="data:image/jpeg;base64," />
EDIT 2:
I have tried the following code... HTML:
<img src='client_display_photoid.php?client_id=182' />
PHP:
<?php
include ('connect.php');
$sql='select `mime`,`data` from `photoid` where `client_id` = ?';
$stmt=$conn->prepare( $sql );
if( $stmt ){
$stmt->bind_param('s', $client_id );
$result=$stmt->execute();
$stmt->store_result();
if( $result && $stmt->num_rows==1 ){
$stmt->bind_result( $mime, $data );
$stmt->fetch();
$stmt->close();
$data=base64_decode( $data );
#$mime=image_type_to_mime_type( $mime );
$oImg = imagecreatefromstring( $data );
switch( $mime ){
case IMAGETYPE_JPEG:
header( 'Content-Type: image/jpeg' );
imagejpeg( $oImg );
break;
case IMAGETYPE_PNG:
header( 'Content-Type: image/png' );
imagepng( $oImg );
break;
case IMAGETYPE_GIF:
header( 'Content-Type: image/gif' );
imagegif( $oImg );
break;
}
imagedestroy( $oImg );
}
}
include ('disconnect.php');
?>
All I get back in the browser is:
<img src='client_display_photoid.php?client_id=182' />
