JavaScript Image Compress Using HTML5 Canvas and File API Before Upload

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

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

DEMO

DOWNLOAD CODE

I have used JIC JavaScript Library to perform this task.

Lets 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>

This is simple code to compress images and upload to server usingPHP.