javascript - 在画布上绘制多个图像

Question

我正在尝试输入一些图像并将它们绘制在画布上。我已经编写了以下代码，但是在互联网上进行了大量搜索后，它仍然绘制了插入的最后一张照片。

请帮我。我知道有一些与此相关的问题，但他们真的帮不了我。

function loadImage() {
  var input, file, img, fr;

  var canvas = document.getElementById("canvas")
  canvas.width = 500;
  canvas.height = 500;
  var ctx = canvas.getContext("2d");

  if (typeof window.FileReader !== 'function') {
    write("The file API isn't supported on this browser yet.");
    return;
  }

  input = document.getElementById('imgfile');
  if (!input) {
    write("Um, couldn't find the imgfile element.");
  } else if (!input.files) {
    write("This browser doesn't seem to support the `files` property of file inputs.");
  } else if (!input.files[0]) {
    write("Please select a file before clicking 'Load'");
  } else {

    for (var i = 0; i < input.files.length; i++) {
      (function(n) {
        setupReader(input.files[n]);

      })(i);
    }

    function setupReader(file) {


      fr = new FileReader();

      addLoadEventFR(createImage);

      fr.readAsDataURL(file);
    }

    function createImage() {
      img = new Image();
      addLoadEventIMG(imageLoaded);
      img.src = fr.result;
    }

    function imageLoaded() {
      console.log(i);

      ctx.drawImage(img, i * 100, 0);
    }
  }


  function write(msg) {
    var p = document.createElement('p');
    p.innerHTML = msg;
    document.body.appendChild(p);
  }

  function addLoadEventFR(func) {
    var oldonload = fr.onload;
    if (typeof fr.onload != 'function') {
      fr.onload = func;
    } else {
      fr.onload = function() {
        if (oldonload) {
          oldonload();
        }
        func();
      }
    }
  }

  function addLoadEventIMG(func) {
    var oldonload = img.onload;
    if (typeof img.onload != 'function') {
      img.onload = func;
    } else {
      img.onload = function() {
        if (oldonload) {
          oldonload();
        }
        func();
      }
    }
  }


}

<input type ='file'  id ='imgfile' multiple></in>
<input type = 'button' class="button" id = 'btnLoad' value="Load" onclick="loadImage()">

<canvas id="canvas" style="border:1px solid #d3d3d3;"></canvas>

标签： javascripthtmlcanvas

Answer 1

这是因为在每个输入选择中，您都在函数内部创建了一个新的 canvsa 元素loadImage。全局初始化一次画布并使用相同的上下文来绘制图像。

var canvas = document.getElementById("canvas")
canvas.width = 500;
canvas.height = 500;
var ctx = canvas.getContext("2d");
function loadImage() {
  var input, file, img, fr;
  if (typeof window.FileReader !== 'function') {
    write("The file API isn't supported on this browser yet.");
    return;
  }

  input = document.getElementById('imgfile');
  if (!input) {
    write("Um, couldn't find the imgfile element.");
  } else if (!input.files) {
    write("This browser doesn't seem to support the `files` property of file inputs.");
  } else if (!input.files[0]) {
    write("Please select a file before clicking 'Load'");
  } else {

    for (var i = 0; i < input.files.length; i++) {
      (function(n) {
        setupReader(input.files[n]);

      })(i);
    }

    function setupReader(file) {
      fr = new FileReader();

      addLoadEventFR(createImage);

      fr.readAsDataURL(file);
    }

    function createImage() {
      img = new Image();
      addLoadEventIMG(imageLoaded);
      img.src = fr.result;
    }

    function imageLoaded() {
      console.log(i);
      ctx.drawImage(img, i * 100, 0);
    }
  }


  function write(msg) {
    var p = document.createElement('p');
    p.innerHTML = msg;
    document.body.appendChild(p);
  }

  function addLoadEventFR(func) {
    var oldonload = fr.onload;
    if (typeof fr.onload != 'function') {
      fr.onload = func;
    } else {
      fr.onload = function() {
        if (oldonload) {
          oldonload();
        }
        func();
      }
    }
  }

  function addLoadEventIMG(func) {
    var oldonload = img.onload;
    if (typeof img.onload != 'function') {
      img.onload = func;
    } else {
      img.onload = function() {
        if (oldonload) {
          oldonload();
        }
        func();
      }
    }
  }
}

<input type ='file'  id ='imgfile' multiple>
<input type = 'button' class="button" id = 'btnLoad' value="Load" onclick="loadImage()"><br>
<canvas id="canvas" style="border:1px solid #d3d3d3;"></canvas>