WordPress二维码插件本地正常线上显示PNG字符乱码问题排查

1. 输出前的多余内容破坏了响应结构 #

商业主题或其他插件可能在你输出二维码之前，就偷偷输出了空白字符、注释或其他杂内容（比如主题的header钩子中添加了额外文本）。这些内容会导致HTTP响应头无法正确设置，浏览器无法识别这是PNG文件，只能将二进制内容当成文本解析，最终显示乱码。

• 解决办法：在输出二维码前清空输出缓冲区，确保没有多余内容干扰：

  ob_clean();
  flush();
  header('Content-Type: image/png');
  QRcode::png($text);
  exit;
  

• 重点：必须加上exit，防止后续主题或插件继续输出内容，破坏PNG的二进制结构。

2. Content-Type响应头被主题覆盖 #

商业主题可能通过wp_headers钩子修改了响应头，把你设置的image/png替换成了text/html。浏览器拿到text/html的响应头后，自然会把二进制的PNG内容当成文本显示。

• 解决办法：
  • 检查主题的functions.php文件，看是否存在add_filter('wp_headers', ...)这类修改响应头的代码，如有则调整或移除相关逻辑。
  • 使用WordPress的wp_die()方法输出，确保响应头的优先级：

    ob_clean();
    ob_start();
    QRcode::png($text, false, QR_ECLEVEL_L, 4);
    $png_data = ob_get_clean();
    wp_die($png_data, '', ['Content-Type' => 'image/png']);
    

3. 输出缓冲区配置差异导致内容混合 #

本地WAMP和线上服务器的output_buffering配置可能不同，线上服务器可能开启了全局输出缓冲，导致你的PNG二进制内容和主题输出的其他文本混合在一起输出，引发乱码。

• 解决办法：在插件代码开头检查并清空缓冲：

  if (ob_get_level() > 0) {
      ob_end_clean();
  }
  

4. phpqrcode直接输出方式与主题冲突 #

phpqrcode默认直接将PNG内容输出到浏览器，但如果主题提前开启了输出缓冲（比如调用了ob_start()），二进制内容会被缓存，之后和主题的其他文本一起输出，导致结构混乱。

• 解决办法：先让phpqrcode将PNG数据生成到变量中，再手动输出：

  ob_start();
  QRcode::png($text, null, QR_ECLEVEL_L, 4);
  $png_data = ob_get_contents();
  ob_end_clean();
  
  header('Content-Type: image/png');
  echo $png_data;
  exit;
  

5. 线上服务器的压缩配置干扰 #

如果线上服务器开启了zlib.output_compression，PNG内容会被压缩后输出，而本地环境未开启该配置，就会导致显示异常。

• 解决办法：在输出前临时关闭压缩：

  ini_set('zlib.output_compression', 'Off');
  

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