Question

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

vertex_array(std::initializer_list<float> vertex_buffer, const std::string& texture_file);

vertex_array va_2(
                { 0.5f, -0.5f,  0.5f,  1.0f,  0.0f,
                  0.5f, -0.5f, -0.5f,  1.0f,  1.0f,
                 -0.5f, -0.5f, -0.5f,  0.0f,  1.0f,
                 -0.5f, -0.5f,  0.5f,  0.0f,  0.0f,

                  0.5f,  0.5f,  0.5f,  1.0f,  0.0f,
                  0.5f,  0.5f, -0.5f,  1.0f,  1.0f,
                 -0.5f,  0.5f, -0.5f,  0.0f,  1.0f,
                 -0.5f,  0.5f,  0.5f,  0.0f,  0.0f}, "blocks.png");

$(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内不断创建不停，这非常消耗杯资源和我的操作系统在一段时间后变得死机了。如果我在这里删除了所有与画布相关的脚本，它就可以正常工作，但这不是我想要的。

发生了什么事，我怎么能摆脱呢？谢谢。

Answer 1

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

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>

在图像onload（）事件处理程序内多次创建画布？

1 个答案: