在Javascript中調整圖像大小后如何獲取圖像文件大小？

Question

給定以下腳本，我可以將圖像調整為圖像的最大預定義尺寸，並將其顯示在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> 

但是，我想獲取調整大小后的圖像的文件大小； 不是寬度和高度。

調整大小后如何獲取圖像文件的大小？

謝謝。

Answer 1

您可以通過執行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>