javascript - 在图像 onload() 事件处理程序中多次创建 Canvas ？

Question

在下面的脚本中，我尝试调整上传的图像大小并返回调整大小的文件的文件大小。

$(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;
          }
        }

        console.log('looping');
        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]);

  });

});

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

它工作得很好，图像调整大小并返回调整大小的文件的大小，但是我面临的问题是 canvas元素在img.onload = function(){...}内不断创建，它消耗了大量的杯子资源，并且我的操作系统在一段时间后卡住了。如果我在这里删除了所有与 Canvas 相关的脚本，它就可以正常工作，但这不是我正在寻找的。

发生了什么事，我该如何摆脱困境？谢谢。

Answer 1

创建一个变量来跟踪 onload 范围之外的 Canvas 。

let 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;
          }
        }
        console.log('looping');
        if (canvas) return;
        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]);

  });

});

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