Asynchronous Image to DATA URIs Conversion using PHP and jQuery

You know we can add image into the web page without adding the link of the external image file. Let’s make it simple, the DATA URIs is the concept were 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/;base64,iVBORw0KGgoAAAANSUhEUgAAALQAAAC0CAIAAACyr5FlAAAACXBIWXMAABYlAAAWJQFJUiTwA">

1	<img src="data:image/;base64,iVBORw0KGgoAAAANSUhEUgAAALQAAAC0CAIAAACyr5FlAAAACXBIWXMAABYlAAAWJQFJUiTwA">

CSS Syntax to add image using DATA URI:

div{
    height: 400px;
    width: 400px;
    background: url(data:image/;base64,iVBORw0KGgoAAAANSUhEUgAAALQAAAC0CAIAAACyr5FlAAAACXBIWXMAABYlAAAWJQFJUiTwA)
    no-repeat;
}

div{

height: 400px;

width: 400px;

background: url(data:image/;base64,iVBORw0KGgoAAAANSUhEUgAAALQAAAC0CAIAAACyr5FlAAAACXBIWXMAABYlAAAWJQFJUiTwA)

no-repeat;

}

PHP code to Convert Image to DATA URI

<?php

$imagePath = "test.png"; // external image path 
$ImageType = pathinfo($imagePath, PATHINFO_EXTENSION); // get the image extension
$data = file_get_contents($imagePath);
$dataURI = 'data:image/' . $ImageType . ';base64,' . base64_encode($data);
echo $dataURI;

?>

<?php

$imagePath = "test.png"; // external image path

$ImageType = pathinfo($imagePath, PATHINFO_EXTENSION); // get the image extension

$data = file_get_contents($imagePath);

$dataURI = 'data:image/' . $ImageType . ';base64,' . base64_encode($data);

echo $dataURI;

In this tutorial I am going to demonstrate how to create the DATA URI from the Image using PHP with the demo, let’s start with the first to create index.php along with the user interface.

Step 1: Create `index.php` file and add following code:

Make sure to add required external CSS and JS files, such as jQuery and Bootstrap.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Live Demo : Convert Image to DATA URI Using PHP and jQuery</title>
	<!-- Bootstrap CSS -->
	<link rel="stylesheet" href="css/bootstrap.min.css">
	<link rel="stylesheet" href="css/style.css">
</head>
<body>
	<div class="container">
		<h3>
			iTech Empires - Live Demo
		</h3>
		<div class="row jumbotron">
			<div class="col-md-12">
				<h2>Asynchronous Image to DATA URI Conversion using PHP and jQuery</h2>
				<p>&nbsp;</p>
				<form enctype="multipart/form-data">
					<div class="form-group">
						<label for="">Select Image File to Upload</label>
						<input type="file" name="file_to_upload" id="file_to_upload">
					</div>
				</form>
				<div class="form-group">
					<button class="btn btn-danger" onclick="ConvertImage()">Upload Image</button>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="col-md-6">
				<h3>DATA URI</h3>
				<div id="dataURI"></div>
			</div>
			<div class="col-md-6">
				<h3>IMAGE</h3>
				<div id="image"></div>
			</div>
		</div>
	</div>

	<script src="js/jquery.min.js"></script>
	<script src="js/script.js"></script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Live Demo : Convert Image to DATA URI Using PHP and jQuery</title>

</head>

<body>

<h3>

iTech Empires - Live Demo

</h3>

<h2>Asynchronous Image to DATA URI Conversion using PHP and jQuery</h2>

<label for="">Select Image File to Upload</label>

</div>

</form>

<button class="btn btn-danger" onclick="ConvertImage()">Upload Image</button>

</div>

</div>

<h3>IMAGE</h3>

</div>

</body>

</html>

You can read more about uploading Asynchronous file from here: PHP and Ajax Asynchronous File Upload using jQuery

Step 2: Create `script.js` file and add following function:

// upload file on server to convert 
function ConvertImage()
{
	if($("#file_to_upload").val() != "")
    {
    	var file_data = $('#file_to_upload').prop('files')[0];
        var form_data = new FormData();

        form_data.append('file', file_data);

        $.ajax({
            url: 'convertImage.php', 
            dataType: 'text',  
            cache: false,
            contentType: false,
            processData: false,
            data: form_data,
            type: 'post',
            success: function(data){
                 // get responce = DATA URI
                 $("#dataURI").html(data);
                 $("#image").html("<img src='"+data+"' />");
                // clear file field
                $("#file_to_upload").val("");
            }
        });
    }
    else
    {
    	alert("Please select file to upload!");
    }
}

// upload file on server to convert

function ConvertImage()

{

if($("#file_to_upload").val() != "")

{

var file_data = $('#file_to_upload').prop('files')[0];

var form_data = new FormData();

form_data.append('file', file_data);

$.ajax({

url: 'convertImage.php',

dataType: 'text',

cache: false,

contentType: false,

processData: false,

data: form_data,

type: 'post',

success: function(data){

// get responce = DATA URI

$("#dataURI").html(data);

$("#image").html("<img src='"+data+"' />");

// clear file field

$("#file_to_upload").val("");

}

});

}

else

{

alert("Please select file to upload!");

}

Step 3: Image to data uris conversion:

This is the file where we are performing the image conversion operation asynchronously.
create convertImage.php file and use following code

<?php
if ( 0 < $_FILES['file']['error'] ) {
    echo 'Error: ' . $_FILES['file']['error'] . '<br>';
}
else
{
    $imagePath = $_FILES['file']['tmp_name'];
	$ImageType = pathinfo($imagePath, PATHINFO_EXTENSION);
	$data = file_get_contents($imagePath);
	$dataURI = 'data:image/' . $ImageType . ';base64,' . base64_encode($data);
	echo $dataURI;
}
?>

<?php

if ( 0 < $_FILES['file']['error'] ) {

echo 'Error: ' . $_FILES['file']['error'] . '<br>';

}

else

{

$imagePath = $_FILES['file']['tmp_name'];

$ImageType = pathinfo($imagePath, PATHINFO_EXTENSION);

$data = file_get_contents($imagePath);

$dataURI = 'data:image/' . $ImageType . ';base64,' . base64_encode($data);

echo $dataURI;

}

Step 4: Create `style.css` file and add following code:

#dataURI{
	width: 100%;
	max-height: 400px;
	overflow-wrap: break-word;
	background-color: #EEE;
	overflow-y: scroll;
}

#dataURI{

width: 100%;

max-height: 400px;

overflow-wrap: break-word;

background-color: #EEE;

overflow-y: scroll;

}

We are done, go ahead and test your application or you can visit to the live demo to do a quick checkout and you can also download the source code for this tutorial from the links given below:

Thanks, if you get this tutorial helpful please provide your feedback using comments section.

Asynchronous Image to DATA URIs Conversion using PHP and jQuery

HTML Syntax to add image using DATA URI:

CSS Syntax to add image using DATA URI:

PHP code to Convert Image to DATA URI

Step 1: Create `index.php` file and add following code:

Step 2: Create `script.js` file and add following function:

Step 3: Image to data uris conversion:

Step 4: Create `style.css` file and add following code:

1 COMMENT

Tutorials You May Like!

Learn how to use Google Multi factor authentication in PHP

PHP Login Registration – State Management

What is the difference between AngularJs and Angular

Perfect Laravel 5 Files, Folders Permission and Ownership Setup

How to create dynamic table with dynamic fields in Laravel 5

Asynchronous Image to DATA URIs Conversion using PHP and jQuery

HTML Syntax to add image using DATA URI:

CSS Syntax to add image using DATA URI:

PHP code to Convert Image to DATA URI

Step 1: Create index.php file and add following code:

Step 2: Create script.js file and add following function:

Step 3: Image to data uris conversion:

Step 4: Create style.css file and add following code:

Enjoy this tutorial? Get iTech Empires updates delivered straight to your inbox.

RELATED TUTORIALS

1 COMMENT

Tutorials You May Like!

Step 1: Create `index.php` file and add following code:

Step 2: Create `script.js` file and add following function:

Step 4: Create `style.css` file and add following code: