如何用HTML input捕获图片并保存至LocalStorage后提交（离线Web应用）

要实现从<input type="file">捕获图片并存入LocalStorage，核心是通过FileReader将选中的图片文件转换为Base64格式的Data URL，再将这个字符串存入LocalStorage。具体实现如下：

实现步骤 #

• 监听文件输入框的change事件，获取用户选择的图片文件
• 使用FileReader读取文件，将其转换为Data URL（Base64编码的字符串）
• 将转换后的Data URL存入LocalStorage
• 离线场景下，从LocalStorage取出Data URL，直接作为图片的src使用

完整代码示例 #

<input type="file"
   name="picture"
   accept="image/*"
   capture="user"
   id="pictureInput">

<script>
const pictureInput = document.getElementById('pictureInput');

pictureInput.addEventListener('change', function(e) {
  // 获取选中的第一个文件（input默认单文件选择）
  const file = e.target.files[0];
  if (!file || !file.type.startsWith('image/')) {
    alert('请选择有效的图片文件');
    return;
  }

  const reader = new FileReader();
  // 读取文件为Data URL格式
  reader.readAsDataURL(file);

  reader.onload = function(event) {
    // 将Data URL存入LocalStorage，自定义键名
    localStorage.setItem('offlinePicture', event.target.result);
    console.log('图片已保存至LocalStorage');
  };

  reader.onerror = function() {
    console.error('读取图片文件失败');
  };
});

// 离线时加载存储图片的示例
function loadOfflinePicture() {
  const pictureData = localStorage.getItem('offlinePicture');
  if (pictureData) {
    const img = document.createElement('img');
    img.src = pictureData;
    document.body.appendChild(img);
  }
}
// 可在页面加载或离线触发时调用
// loadOfflinePicture();
</script>

注意事项 #

• 存储容量限制：LocalStorage单域名存储上限通常为5MB左右，Base64格式会比原文件体积大30%，因此不适合存储大尺寸图片；若需处理大文件，建议使用IndexedDB替代。
• 类型校验：代码中加入了文件类型校验，确保仅处理图片文件。
• 数据管理：LocalStorage数据会持久保留，可通过localStorage.removeItem('offlinePicture')手动删除存储的图片数据。

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