JavaScript报错Identifier 'img'已声明，本地摄像头拍照代码如何修复？

嘿，这个错误的根源其实很明确——你在函数参数里已经声明了img，结果函数第一行又用const重新声明了一遍同名变量，这直接违反了ES6的作用域规则，触发了重复标识符的语法错误！

问题代码的核心冲突 #

看你这段代码的开头：

function takePhoto(img) { 
  const img = img || document.querySelector('img'); 
  // ... 其他代码
}

函数参数img已经是当前函数作用域内的变量了，你紧接着用const再次声明同名的img，哪怕是用let也不行——同一作用域内不允许重复声明同名变量，这就是报错的原因。

两种修复方案 #

方案1：保留参数灵活性，避免重复声明

如果你希望函数既可以手动传入img元素，也能自动获取页面中的img，只需要把内部的变量名改成新的，避免和参数冲突：

function takePhoto(img) { 
  // 用新变量名接收参数或默认值，不再重复声明img
  const targetImg = img || document.querySelector('img'); 
  imageCapture.takePhoto() 
    .then(blob => { 
      let url = window.URL.createObjectURL(blob); 
      targetImg.src = url; 
      window.URL.revokeObjectURL(url); 
    }) 
    .catch(error => {
      // 建议给catch加个错误处理，方便排查问题
      console.error('拍照操作失败:', error);
    }); 
}; 
takePhoto();

方案2：不需要参数时，直接移除参数声明

如果你的场景里不需要手动传入img元素，直接删掉函数的img参数，这样内部声明const img就不会有冲突了：

function takePhoto() { 
  const img = document.querySelector('img'); 
  imageCapture.takePhoto() 
    .then(blob => { 
      let url = window.URL.createObjectURL(blob); 
      img.src = url; 
      window.URL.revokeObjectURL(url); 
    }) 
    .catch(error => {
      console.error('拍照操作失败:', error);
    }); 
}; 
takePhoto();

关于你说的重命名无效的小提示 #

你提到重命名为image_local也没效果，大概率是修改不彻底——比如只改了内部变量名，但参数里还是保留了img，或者修改后还有其他隐藏的重复声明？可以仔细检查修改后的代码，确保同一函数作用域内没有同名的变量声明哦。

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