AR.js/A-Frame自定义标记生成器导出.patt全0问题求解

你遇到的.patt文件全0问题是旧版在线标记生成器的已知bug：页面运行时存在跨域安全上下文冲突，浏览器直接拦截了Canvas对本地上传图片的像素读取接口getImageData调用，生成逻辑拿不到图片的实际特征点数据，只能输出全0填充的无效文件——这种文件AR.js根本识别不了，自然不会渲染任何AR内容。这个问题和你上传的图片内容无关，就算上传完全符合规范的高对比度标记图，这个在线工具也会生成无效文件。

• 优先选本地离线生成标记
  把AR.js里标记生成工具对应的代码目录拉到本地，通过本地静态服务启动生成页面再操作就行：比如装了Python的话，直接在工具目录下执行python -m http.server，访问本地对应端口打开生成页；用VS Code的话装个Live Server插件，点一下就能启动。这种方式完全绕开在线页面的跨域、混合内容、安全策略拦截问题，生成的文件都是正常的。生成时注意上传的源图要满足基础要求：正方形尺寸、图案边缘对比度足够高、四周预留1/4宽度的纯色边框，别用低对比度渐变、全透明这类不好识别的图案。
• 生成后先做有效性校验
  下完.patt文件别直接往项目里塞，先用文本编辑器打开看内容：正常有效的patt文件是16行16列的数字矩阵，数值在0-255之间分布，如果打开全是连续的0，说明生成失败，得重新生成。
• 项目接入时别写错配置
  拿到有效patt文件后，A-Frame里引用标记的时候要把preset属性删掉，别和hiro、kanji这类预设标记的配置混着写，基础配置参考：

  <a-marker type="pattern" url="./your-custom-marker.patt">
    <!-- 此处放置需要展示的AR模型、文本、视频等内容 -->
  </a-marker>
  

  测试的时候尽量在光线充足的环境下对准打印出来的实体标记，摄像头初始分辨率设为640*480就够，分辨率太高反而会拖慢识别帧率。如果还是识别不到，可以适当调低标记组件的minConfidence阈值，降低识别触发的门槛。

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