内容摘要：网站二维码显示不出来，十有八九不是二维码的错，是前端把它的生存空间挤没了。 我上个月帮朋友排查一个电商后台，登录页右下角那个二维码，在chrome里干干净净，换到某国产浏览器极速模式就只剩一个灰框。打

网站二维码显示不出来，网站维码十有八九不是显示二维码的错，是不出前端把它的生存空间挤没了。

我上个月帮朋友排查一个电商后台，网站维码登录页右下角那个二维码，显示在chrome里干干净净，不出换到某国产浏览器极速模式就只剩一个灰框。网站维码打开控制台一看，显示canvas元素还在，不出但getContext('2d')返回null。网站维码这浏览器把硬件加速一关，显示canvas直接罢工，不出二维码生成库报错后默默把整个节点清空了。网站维码你看，显示不是不出二维码没了，是生成二维码的画笔被没收了。

还有更隐蔽的。很多团队习惯把二维码塞进一个固定高度的div里，overflow设成hidden。二维码生成需要时间，尤其是带logo那种，得先加载图片再绘制。如果图片加载慢，canvas绘制时拿到的图片宽高都是0，画出来就是一片空白。用户刷新几次都一样，因为那个图片缓存策略有问题，每次都是重新拉取。最后运维把图片改成base64内嵌，问题立刻消失。这种坑，排查起来特别费劲，因为表面上看代码逻辑完全正确。

也有纯样式层面的锅。有些二维码生成库输出的是img标签，src是dataURL。但前端为了做圆角，给img套了个父容器，父容器设了背景色，二维码本身透明背景还好，一旦生成库默认输出白底，而父容器背景是深色，那二维码看起来就像消失了一样——其实它在那儿，只是白色方块融进了白色背景里。用户以为没加载出来，拿手机扫了个寂寞。

最气人的是那种间歇性消失。今天能用，明天就不能用，刷新一下又好了。这种多半是接口返回的二维码内容里带了特殊字符，比如URL参数里有个&，后端没做转义，前端拿到后直接拼进二维码内容。有的二维码库对这类字符处理不严格，能生成，但扫出来是乱码。有的库直接抛异常，整个二维码就没了。等后端某次部署时不小心把转义逻辑改对了，问题又消失，过几天再改回来，又出现。来回折腾，最后发现是两边对字符编码的理解不一致。

还有一种情况是用户自己造成的，但前端得背锅。二维码生成后，用户截图发给别人，发现对方扫不了。原因可能是生成时用了相对路径的图片资源，截图时那些图片还在加载中，二维码画到一半就被截走了。或者生成库用了动画效果，二维码从模糊到清晰有个渐变过程，用户手快，在模糊阶段就截图了。这种体验问题，得靠前端在生成完成后加个状态标记，比如让二维码先隐藏，等绘制完毕再淡入。

说句得罪人的话，很多二维码显示不出来的根因，是开发把二维码当普通图片处理，没考虑它是个动态渲染的canvas或SVG。普通图片加载失败有个alt提示，canvas加载失败就是一片空白，连个报错都不给你。所以排查时先看控制台有没有红色报错，没有的话，就检查元素是否被正确插入DOM，再检查宽高是否被样式覆盖。三步走，基本能定位九成问题。剩下那一成，可能是用户浏览器太老，不支持某些API，那就真没辙了，只能引导用户换浏览器。