Overview
On the website, we can add images to the web page without adding the link to the external image file. Let’s make it easy, the DATA URIs is the way where we can just add the data of the image into the page and it works.
HTML Syntax to add image using DATA URI:
<img src="data: image/png; base64, /9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAIBAQEBAQIBAQECAgICAgQDAgICAgUEBAMEBgUGBgYFBgYGBwkIBgcJBwYGCAsICQoKCgoKBggLDAsKDAkKCgr" />PHP/CodeIgniter code to Convert Image to DATA URI
<?php
// upload image and get it's metadata.
$data = $this->upload->data();
$file_name = $data['file_name'];
$image = base_url($path.$file_name);
$file = file_get_contents($image);
$file_type = $data['file_type'];
$uri = 'data: '.$file_type."; base64, ".base64_encode($file);
?>In this tutorial, we will learn how to create the DATA URI from the Image using PHP CodeIgniter, let’s start with the first to create views/index.php along with the user interface.
Step 1: Create index.php file in the views directory and add the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Upload Image</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container mt-4">
<h3>Upload Image</h3>
<form action="<?php echo base_url('upload'); ?>" method="post" enctype="multipart/form-data">
<div class="form-group">
<label for="email">Image:</label>
<input type="file" class="form-control form-control-sm" id="file" name="file" required>
</div>
<button type="submit" class="btn btn-sm btn-primary">Upload</button>
</form>
</div>
</body>
</html>Step 2: Image to Data URI conversion:
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Welcome extends CI_Controller {
public function index() {
$this->load->view('add');
}
public function upload() {
$path = 'uploads/';
$config['upload_path'] = './'.$path;
$config['allowed_types'] = 'gif|jpg|png';
$this->load->library('upload', $config);
if (!$this->upload->do_upload('file')) {
$error = array('error' => $this->upload->display_errors());
echo "<pre>";
print_r($error);
} else {
$data = $this->upload->data();
$file_name = $data['file_name'];
$image = base_url($path.$file_name);
$file = file_get_contents($image);
$file_type = $data['file_type'];
$uri = 'data: '.$file_type."; base64, ".base64_encode($file);
echo '<img src="'.$uri.'" />';
unlink($path.'/'.$file_name);
}
}
}
?>Step 3: Add following lines in config/routes.php
$route['upload'] = 'welcome/upload';Step 4: Add following lines in config/autoload.php
$autoload['libraries'] = array('session', 'form_validation');
$autoload['helper'] = array('url', 'form', 'date', 'file', 'download', 'cookie');We are done and you can test your application.