About Lesson
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.
PHP 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.
1. Create an index.php file in applications/views/ directory
<!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>
2. Create a controller file Welcome.php in the applications/controllers/ directory.
<<?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);
}
}
}
?>
3. Add the following lines in config/routes.php
$route['upload'] = 'welcome/upload';
4. Add the 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.