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