如何在JavaScript中将HTML文件输入的图片存入变量及Image对象？

刚好做过类似的需求，我来给你一步步讲清楚怎么把选中的图片存入普通变量和Image对象里。

首先，先准备好HTML的文件输入控件，建议加上accept="image/*"来限制只选图片：

<input type="file" id="imageInput" accept="image/*">

一、将选中的图片存入普通变量 #

这里的“普通变量”其实就是浏览器提供的File对象，它包含了选中图片的元数据（文件名、大小、类型等）。我们只需要监听文件输入框的change事件，从files属性里取出对应的文件即可：

const imageInput = document.getElementById('imageInput');

imageInput.addEventListener('change', (e) => {
  // 从FileList中取出第一个选中的文件（默认单选）
  const selectedImageFile = e.target.files[0];
  
  // 先判断是否是有效的图片文件
  if (selectedImageFile && selectedImageFile.type.startsWith('image/')) {
    console.log('选中的图片文件:', selectedImageFile);
    // 现在selectedImageFile就是你要的普通变量，后续可以用来上传、读取内容等
  } else {
    alert('请选择有效的图片文件哦！');
  }
});

需要注意的是，e.target.files是一个FileList集合，如果你的输入框设置了multiple属性允许多选，就需要循环这个集合来获取所有选中的文件。

二、将选中的图片存入Image对象变量 #

如果要把图片加载到浏览器的Image对象中（比如要在页面显示、绘制到Canvas等），我们可以用URL.createObjectURL()生成一个临时的本地URL，让Image对象加载这个URL：

const imageInput = document.getElementById('imageInput');

imageInput.addEventListener('change', (e) => {
  const selectedImageFile = e.target.files[0];
  
  if (selectedImageFile && selectedImageFile.type.startsWith('image/')) {
    // 创建一个新的Image对象
    const img = new Image();
    
    // 给Image对象设置临时URL作为图片源
    img.src = URL.createObjectURL(selectedImageFile);
    
    // 监听load事件，确保图片完全加载后再进行后续操作
    img.addEventListener('load', () => {
      console.log('图片加载完成！Image对象信息:', { width: img.width, height: img.height });
      // 现在img就是可用的Image对象了，你可以把它添加到页面，或者用Canvas绘制
      
      // 重要：用完临时URL后记得释放资源，避免内存泄漏
      URL.revokeObjectURL(img.src);
    });
    
    // 处理图片加载失败的情况
    img.addEventListener('error', () => {
      alert('图片加载失败，请检查文件是否损坏！');
      URL.revokeObjectURL(img.src);
    });
  } else {
    alert('请选择有效的图片文件哦！');
  }
});

补充：用FileReader读取为Base64格式 #

如果你需要把图片转成Base64字符串存入Image对象，也可以用FileReader来实现：

const imageInput = document.getElementById('imageInput');

imageInput.addEventListener('change', (e) => {
  const selectedImageFile = e.target.files[0];
  
  if (selectedImageFile && selectedImageFile.type.startsWith('image/')) {
    const reader = new FileReader();
    // 读取文件为Base64格式
    reader.readAsDataURL(selectedImageFile);
    
    reader.onload = function(e) {
      const img = new Image();
      img.src = e.target.result; // e.target.result就是Base64字符串
      
      img.onload = function() {
        console.log('Base64图片加载完成！');
      };
    };
  }
});

不过相比createObjectURL，FileReader需要把文件转成Base64字符串，对于大图片来说效率会低一些，所以优先推荐用createObjectURL的方式。

内容的提问来源于stack exchange，提问作者Saurabh Agarwal