无法通过输入文件绘制导入的图像

Question

我正在尝试使用 html input type="file" 加载图像并将其加载到 javascript 但没有成功。

到目前为止，这是我的代码：

HTML:

<canvas class="imported" id="imported"></canvas>
<button class="import_button" id="import_button">Import a picture</button>
<input type="file" id="imgLoader"/>

JAVASCRIPT:

document.getElementById('import_button').onclick = function() {
    document.getElementById('imgLoader').click();
};

document.getElementById('imgLoader').addEventListener('change', importPicture, false);

function importPicture()
{
    alert("HERE");
    var canvas  = document.querySelector('#imported');
    var context = canvas.getContext("2d"); 
    var fileinput = document.getElementById('imgLoader');
    var img = new Image();

    var file = document.getElementById('imgLoader').files[0];
    var reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function(evt)
    {
        alert("THERE");
        if( evt.target.readyState == FileReader.DONE)
        {
            alert("AGAIN");
            img.src = evt.target.result;
            context.drawImage(img, 200, 200);
        }
    } 

}

警报全部启动，控制台中没有错误或消息..

如何加载和显示？谢谢！

Answer 1

逻辑（您的 original code，而不是编辑后的版本）有点令人费解：

document.getElementById('imgLoader').addEventListener('change', importPicture, false);

向文件输入添加更改事件。没关系。但是随后在文件输入更改时运行的 "importPicture" 函数中，您添加了另一个更改事件侦听器（通过 fileinput.onchange）...您为什么要这样做？我看不出它有什么意义。这意味着您必须在其中的代码运行之前再次更改文件。这也意味着每次您更改文件时，它都会添加越来越多的侦听器，直到您同时触发许多函数。

另一个问题是，在尝试在 canvas 上绘制图像之前，您没有等待数据加载到 Image 对象中。您还需要设置 canvas 本身的尺寸，而不是规定图像的尺寸（因为用户可以上传任何尺寸的任何东西）。

这是一个工作演示：

document.getElementById('import_button').onclick = function() {
  document.getElementById('imgLoader').click();
};

var fileinput = document.getElementById('imgLoader').addEventListener('change', importPicture, false);

function importPicture() {
  var canvas = document.querySelector('#imported');
  var context = canvas.getContext("2d");
  var img = new Image();
  var file = this.files[0];
  var reader = new FileReader();
  reader.onload = function(evt) {
    img.onload = function() {
      canvas.width = img.width;
      canvas.height = img.height;
      context.drawImage(img, 0, 0);
    }
    img.src = evt.target.result;
  }
  reader.readAsDataURL(file);
}

<canvas class="imported" id="imported"></canvas>
<button class="import_button" id="import_button">Import a picture</button>
<input type="file" id="imgLoader" />

最后一点归功于 this answer。

无法通过输入文件绘制导入的图像

Can't draw imported image through input file

html

javascript

canvas

filereader