Javascript Image Compress using HTML5 Canvas & File API before Upload

In this tutorial, I will show you how to compress images before uploading them to the server. Usually, we don’t compress images and upload them directly to the server. We upload pictures and then squeeze it; in this tutorial, you will learn how to compress images on the client-side and when user upload, it will take less time (if slow internet) and space on the server.

Suppose you upload an image of 5MB. It will decrease its quality and make it 600kb to 700kb if you set rate to 30%. You can try the demo on our website.

javascript compress image

I have used the JIC JavaScript Library to perform this task.

Let’s start coding:

HTML Form to upload image and preview:

<div class="container">

	<div class="row">

		<div class="col-md-4 border">

		<form id="upload_form">

			<label for="file">Choose file</label>

			<input type="file" id="fileinput" />

			

		</form>

		</div>

		<div class="col-md-4 border">

			<div class="thumbnail">

				<img id="source_image"  style="width:100%">

				<div class="caption">

					<p>Source Image</p>

					<p><input type="button" id="compress" value="Compress" class="btn-primary" style="display: none;"></p>

				</div>

			</div>

		</div>

		<div class="col-md-4 border">

			<div class="thumbnail">

				<img id="compressed_image"  style="width:100%">

				<div class="caption">

					<p>Compressed Image</p>

					<p><input type="button" id="upload" class="btn-success" value="Upload" style="display: none;"></p>

				</div>

			</div>

		</div>

	</div>

</div>

JavaScript code:

<script>

	var output_format = null;

	var file_name = null;

	function readFile(evt) {

		var file = evt.target.files[0];

		var reader = new FileReader();

	    reader.onload = function(event) {

			var i = document.getElementById("source_image");

			console.log(i);

	            i.src = event.target.result;

	            i.onload = function(){

	                

	                console.log("Image loaded");

	            }

	    };

		output_format = file.name.split(".").pop();

		file_name = file.name;

	    console.log("Filename:" + file.name);

	    console.log("Fileformat:" + output_format);

	    console.log("Filesize:" + (parseInt(file.size) / 1024) + " Kb");

	    console.log("Type:" + file.type);

	    reader.readAsDataURL(file);

		$("#compress").show();

	    return false;

	}

 // compress image

 	$( "#compress" ).click(function() {

        var source_image = document.getElementById("source_image");

        if (source_image.src == "") {

            alert("You must load an image first!");

            return false;

        }



        var quality = 30;

       	

        console.log("process start...");

        console.log("process start compress ...");

	    compressed_image.src = jic.compress(source_image,quality,output_format).src;

		$("#upload").show();

    	

	});

	// upload imange

	$( "#upload" ).click(function() {

        var compressed_image = document.getElementById("compressed_image");

        if (compressed_image.src == "") {

            alert("You must compress image first!");

            return false;

        }



	    var successCallback= function(response){

            console.log("image uploaded successfully! :)");

            console.log(response);       

        }



        var errorCallback= function(response){

            console.log("image Filed to upload! :)");

            console.log(response); 

        }

    	

    	console.log("process start upload ...");

    	jic.upload(compressed_image, "upload.php", "file", file_name,successCallback,errorCallback);

    	

    });



document.getElementById("fileinput").addEventListener("change", readFile, false);

</script>

It is a simple code to compress images and upload them to a server using PHP.