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

将change事件添加到文件输入中。没关系。但是，在文件输入发生更改时运行的“ importPicture”函数中，您添加了另一个更改事件侦听器（通过fileinput.onchange）……为什么这样做？我看不出这有什么道理。这意味着您必须再次更改文件才能运行其中的代码。这也意味着每次更改文件时，它都会添加越来越多的侦听器，直到您一次触发许多函数为止。

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

这是一个工作示例：

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。

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

1 个答案: