How to resize image before upload in jquery

Uploading a large file on your server will take a lot of time. You can first resize images on the browser and then upload them to reduce upload time and improve application performance.

Uploading a large file on your server will take a lot of time. You can first resize images on the browser and then upload them to reduce upload time and improve application performance.

Let’s write the code to resize a user-uploaded image on the browser side.

Step 1: Take one input with type=”file” and take two img tag as below

<!doctype html>
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<title>Image resize before upload jquery</title>
</head>
<body onload="loadImageFile();">
  <form name="uploadForm">
    <table>
      <tbody>
        <tr>
          <td>Select Image - <input id="upload-Image" type="file" onchange="loadImageFile();" /></td>
        </tr>
        <tr>
          <td>Origal Image - <img id="original-Img"/></td>
        </tr>
         <tr>
          <td>Compress Image - <img id="upload-Preview"/></td>
        </tr>
        <tr>
          <td><br/>Code by - <a href="https://shinerweb.com" ratget="_blank"> Shinerweb</a></td>
        </tr>
      </tbody>
    </table>
  </form>
</body>
</html>

Step 2: Now you need to add some javascript code as below

<script type="text/javascript">
var fileReader = new FileReader();
var filterType = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;

fileReader.onload = function (event) {
  var image = new Image();
  
  image.onload=function(){
	document.getElementById("original-Img").src=image.src;
	var canvas=document.createElement("canvas");
	var context=canvas.getContext("2d");
	const width = 400; // set your width
	const scaleFactor = width / image.width;
	canvas.width = width;
	canvas.height = image.height * scaleFactor;
	context.drawImage(image, 0, 0, width, image.height * scaleFactor);
	document.getElementById("upload-Preview").src = canvas.toDataURL("image/jpeg");
  }
  image.src=event.target.result;
};

var loadImageFile = function () {
  var uploadImage = document.getElementById("upload-Image");
  
  //check and retuns the length of uploded file.
  if (uploadImage.files.length === 0) { 
    return; 
  }
  
  //Is Used for validate a valid file.
  var uploadFile = document.getElementById("upload-Image").files[0];
  if (!filterType.test(uploadFile.type)) {
    alert("Please select a valid image."); 
    return;
  }
  
  fileReader.readAsDataURL(uploadFile);
}
</script>

In above code you can you can set your width as per your requirement and rest of code will same.

Live Output

Full code as below:

<!doctype html>
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<title>Image resize before upload jquery</title>
<script type="text/javascript">
var fileReader = new FileReader();
var filterType = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;

fileReader.onload = function (event) {
  var image = new Image();
  
  image.onload=function(){
	document.getElementById("original-Img").src=image.src;
	var canvas=document.createElement("canvas");
	var context=canvas.getContext("2d");
	const width = 400; // set your width
	const scaleFactor = width / image.width;
	canvas.width = width;
	canvas.height = image.height * scaleFactor;
	context.drawImage(image, 0, 0, width, image.height * scaleFactor);
	document.getElementById("upload-Preview").src = canvas.toDataURL("image/jpeg");
  }
  image.src=event.target.result;
};

var loadImageFile = function () {
  var uploadImage = document.getElementById("upload-Image");
  
  //check and retuns the length of uploded file.
  if (uploadImage.files.length === 0) { 
    return; 
  }
  
  //Is Used for validate a valid file.
  var uploadFile = document.getElementById("upload-Image").files[0];
  if (!filterType.test(uploadFile.type)) {
    alert("Please select a valid image."); 
    return;
  }
  
  fileReader.readAsDataURL(uploadFile);
}
</script>
</head>

<body onload="loadImageFile();">
  <form name="uploadForm">
    <table>
      <tbody>
        <tr>
          <td>Select Image - <input id="upload-Image" type="file" onchange="loadImageFile();" /></td>
        </tr>
        <tr>
          <td>Origal Image - <img id="original-Img"/></td>
        </tr>
         <tr>
          <td>Compress Image - <img id="upload-Preview"/></td>
        </tr>
        <tr>
          <td><br/>Code by - <a href="https://shinerweb.com" ratget="_blank"> Shinerweb</a></td>
        </tr>
      </tbody>
    </table>
  </form>
</body>
</html>