How to get Image File Size after Resizing image in Javascript?

Question

Given the below script, I could be able to resize image to the maximum pre-define dimension of image, and it was displaying in the Canvas :

 $(function() { $("#file_select").change(function(e) { var fileReader = new FileReader(); fileReader.onload = function(e) { var img = new Image(); img.onload = function() { var MAX_WIDTH = 100; var MAX_HEIGHT = 100; var width = img.width; var height = img.height; if (width > height) { if (width > MAX_WIDTH) { height *= MAX_WIDTH / width; width = MAX_WIDTH; } } else { if (height > MAX_HEIGHT) { width *= MAX_HEIGHT / height; height = MAX_HEIGHT; } } var canvas = document.createElement("canvas"); canvas.setAttribute('id', 'canvas') canvas.width = width; canvas.height = height; canvas.getContext("2d").drawImage(this, 0, 0, width, height); this.src = canvas.toDataURL(); document.body.appendChild(this); //remove this if you don't want to show it } img.src = e.target.result; } fileReader.readAsDataURL(e.target.files[0]); // console.log('file size after resized is...'); }); }); 

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script> <script src="http://malsup.github.com/jquery.form.js"></script> <h1 class="logo">Upload Picture</h1> <div id="upload_form_div"> <form id="upload_form" method="POST" enctype="multipart/form-data" action="upload"> <input type="file" name="file" capture="camera" id="file_select" /> </form> </div> <div id="loading" style="display:none;"> Uploading your picture... </div> 

However, I would like to get the file size of resized image; it is not the width and the height.

How can I get the image file size after it was resized?

Thanks.

Answer 1

You can calculate a rough size in bytes by doing newImageData.length * 3 / 4

 $(function() { $("#file_select").change(function(e) { var fileReader = new FileReader(); fileReader.onload = function(e) { var img = new Image(); img.onload = function() { var MAX_WIDTH = 100; var MAX_HEIGHT = 100; var width = img.width; var height = img.height; if (width > height) { if (width > MAX_WIDTH) { height *= MAX_WIDTH / width; width = MAX_WIDTH; } } else { if (height > MAX_HEIGHT) { width *= MAX_HEIGHT / height; height = MAX_HEIGHT; } } var canvas = document.createElement("canvas"); canvas.setAttribute('id', 'canvas') canvas.width = width; canvas.height = height; canvas.getContext("2d").drawImage(this, 0, 0, width, height); //Line added var canvasData = canvas.toDataURL(); //Line edited this.src = canvasData; //Line added console.log(canvasData.length * 3 / 4, ' bytes'); document.body.appendChild(this); //remove this if you don't want to show it } img.src = e.target.result; } fileReader.readAsDataURL(e.target.files[0]); // console.log('file size after resized is...'); }); }); 

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script> <script src="http://malsup.github.com/jquery.form.js"></script> <h1 class="logo">Upload Picture</h1> <div id="upload_form_div"> <form id="upload_form" method="POST" enctype="multipart/form-data" action="upload"> <input type="file" name="file" capture="camera" id="file_select" /> </form> </div> <div id="loading" style="display:none;"> Uploading your picture... </div>