如何在PHP的captcha验证码文件中同时添加并运行HTML代码

故障原因 #

• 你代码的核心问题是HTTP的header()函数必须在任何实际输出内容发送到浏览器之前调用，你在PHP代码前直接输出了<h1>标签内容，会导致Content-type: image/jpeg头发送失败，浏览器无法识别返回内容是图片
• 同一个HTTP请求无法同时返回text/html类型的网页内容和image/jpeg类型的图片内容，两种内容的响应头格式完全冲突

解决方法 #

你可以给captcha.php加参数区分请求场景，同一个文件分别处理「输出HTML页面」和「输出验证码图片」两种请求：

<?php
// 先处理验证码图片逻辑，必须放在所有输出之前
if (isset($_GET['action']) && $_GET['action'] == 'captcha') {
    header("Content-type: image/jpeg");
    $imgPath = 'background.jpg';
    $image = imagecreatefromjpeg($imgPath);
    $color = imagecolorallocate($image, 253, 253, 253);
    $string = rand();
    // 验证码值存入session，后续登录校验要用到
    session_start();
    $_SESSION['captcha'] = $string;
    $fontSize = 14;
    $x = 30;
    $y = 15;
    imagestring($image, $fontSize, $x, $y, $string, $color);
    imagejpeg($image);
    imagedestroy($image);
    // 输出图片后直接终止程序，避免输出后续HTML内容
    exit;
}
?>
<!-- 下面是正常的HTML代码 -->
<h1> This is my HTML code </h1>
<!-- 验证码图片指向当前文件加对应参数即可 -->
<img src="captcha.php?action=captcha" alt="验证码">

注意事项 #

• 要保证文件开头<?php标签前面没有任何空格、换行、BOM头，否则还是会触发提前输出的问题
• 如果还是有提前输出的报错，可以在代码最开头加ob_start();开启输出缓冲，PHP会自动把所有输出缓存起来，等header发送完再统一输出内容

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