Javascript Can'；t通过输入文件绘制导入的图像

我试图加载一个带有html

input type=“file”

的图像，并将其加载到带有javascript的图像，但没有成功

以下是我目前的代码：

HTML:

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

如何加载和显示它？谢谢大家!

逻辑（你的，而不是编辑的版本）有点令人困惑：

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

将更改事件添加到文件输入。那很好。但是，在“importPicture”函数中（当文件输入发生更改时，该函数会运行），您可以添加另一个更改事件侦听器（通过

fileinput.onchange

）……为什么要这样做？我看不出这有什么意义。这意味着您必须在运行其中的代码之前再次更改该文件。这也意味着，每次更改文件时，它都会添加越来越多的侦听器，直到有很多函数同时启动

另一个问题是，在尝试在画布上绘制图像之前，您没有等待数据加载到

图像

对象中。您还需要设置画布本身的尺寸，而不是规定图像的尺寸（因为用户可以上传任何大小的内容）

这是一个有效的演示：

document.getElementById（'import_按钮'）。onclick=function（）{
document.getElementById（'imgLoader'）。单击（）；
};
var fileinput=document.getElementById（'imgLoader'）。addEventListener（'change'，importPicture，false）；
函数importPicture（）{
var canvas=document.querySelector（“#imported”）；
var context=canvas.getContext（“2d”）；
var img=新图像（）；
var file=this.files[0]；
var reader=new FileReader（）；
reader.onload=函数（evt）{
img.onload=函数（）{
canvas.width=img.width；
canvas.height=img.height；
drawImage（img，0,0）；
}
img.src=evt.target.result；
}
reader.readAsDataURL（文件）；
}

导入图片

您的html没有画布，您也没有画布变量设置。@GetOffMyLawn我编辑了我的问题thx“不能”是什么意思？代码中出现了什么错误？你会在某个时候出错吗？你试过调试吗？@ADyson实际上什么都没有发生，控制台没有错误，什么都没有。逻辑在我看来有点古怪<代码>文档.getElementById（'imgLoader'）.addEventListener（'change'，importPicture，false）将更改事件添加到文件输入。然后在文件输入更改时运行的“importpicture”函数中，添加另一个更改事件侦听器（通过

fileinput.onchange

）…为什么要这样做？我看不出这有什么意义。这意味着您必须在运行其中的代码之前再次更改该文件。这也意味着每次你更改文件时，它都会添加越来越多的侦听器，直到你有很多函数同时启动。非常感谢你，我对编程非常陌生，但我离事实并不远，哈哈！

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

}

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