js如何处理图片流

// 假设有一个<input type="file">元素用于选择图片文件
const fileInput = document.querySelector('input[type="file"]');

fileInput.addEventListener('change', function(event) {
  const file = event.target.files[0]; // 获取第一个文件
  if (file) {
    const reader = new FileReader();
    
    // 定义读取完成后的回调函数
    reader.onload = function(e) {
      const img = document.createElement('img');
      img.src = e.target.result; // e.target.result就是图片的DataURL
      document.body.appendChild(img); // 将图片添加到页面中
    };
    
    // 以DataURL的形式读取文件
    reader.readAsDataURL(file);
  }
});

fileInput.addEventListener('change', function(event) {
  const file = event.target.files[0];
  if (file) {
    const imgURL = URL.createObjectURL(file); // 创建一个指向文件的临时URL
    const img = document.createElement('img');
    img.src = imgURL;
    document.body.appendChild(img);
    
    // 当图片不再需要时，释放创建的对象URL
    img.onload = function() {
      URL.revokeObjectURL(imgURL);
    };
  }
});