JS Canvas开发签名功能报Blob标识符已声明错误求解决

问题定位 #

• 冲突1：Blob是浏览器原生全局内置对象
  浏览器自带Blob构造函数，用于处理二进制数据，属于全局作用域下的内置变量，你直接声明同名类自然会触发重复声明错误。
• 冲突2：JS脚本被重复加载
  你的HTML代码中两次引入了Signature.js，第一次在form标签前，第二次在input输入框下方，同一脚本重复加载时，第二次执行会检测到类已经被声明，就会抛出重复声明错误，不管你换什么类名只要重复加载都会报错。
• 冲突3：DOM元素id和类名重名冲突
  浏览器存在默认特性：所有带id属性的DOM元素，会被自动挂载到window全局对象上，你代码中canvas的id是Blob，和你自定义的类名重名，相当于window.Blob已经被DOM元素占用，再声明同名类也会冲突。你之前用Signature作为类名时，页面里存在id为Signature的提交按钮，同样会触发这个冲突。

修复方案 #

1. 给自定义类换一个不会和内置对象、DOM id冲突的名字，比如CustomSignature、SignaturePad这类自定义命名。
2. 删除HTML中重复的<script src="Signature.js"></script>，全局只保留一次引入即可，建议放在body标签的末尾，避免DOM未加载完成就执行脚本的问题。
3. 实例化你的自定义类再调用对应方法：你当前在form的onsubmit属性中直接写return genererImage()是调用失败的，这个方法是类的实例方法，不是全局函数，需要先实例化类之后用实例调用：

// 实例化示例，放在脚本末尾
const signPad = new CustomSignature("#Blob");
// 全局绑定方法给onsubmit调用
function genererImage() {
  return signPad.genererImage();
}
// 清空按钮绑定逻辑
document.querySelector('#effacer').addEventListener('click', () => {
  signPad.effacer();
})

4. 额外优化点：你代码中input标签多了无效的x属性（<input type="text" placeholder="Entrez un Prénom ici"x id="Pnom" />），删掉即可；<center>标签属于HTML废弃标签，建议替换为CSS居中实现。

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