PHP imagecreatefrompng：实现图片浏览器显示与正确保存为PNG

你遇到的核心矛盾是：Content-Disposition: Attachment会强制浏览器下载图片，无法预览；用inline头能让浏览器显示图片，但右键保存会默认使用PHP脚本的文件名。下面提供两种实用方案解决这个问题：

方案一：前端预览+JavaScript触发下载 #

先让PHP输出可预览的图片，再通过JS实现指定文件名的下载，兼顾预览和下载需求。

1. 修改PHP生成脚本（generate.php） #

<?php
// 过滤输入文本，避免非法字符导致文件名或路径问题
$txt = isset($_POST["metin"]) ? trim($_POST["metin"]) : "默认文本";
$txt = preg_replace('/[^\w\-_\. ]/', '', $txt);

// 加载背景图
$img = imagecreatefrompng("back.png");
if (!$img) die("无法加载背景图片");

// 字体配置（服务器需上传字体文件，不要用本地Windows路径）
$fontFile = "gilroy-black.otf";
$fontSize = 110;
$fontColor = imagecolorallocate($img, 255, 255, 255);
$angle = 0;

// 计算文本居中位置
$iWidth = imagesx($img);
$tSize = imagettfbbox($fontSize, $angle, $fontFile, $txt);
$tWidth = max([$tSize[2], $tSize[4]]) - min([$tSize[0], $tSize[6]]);
$centerX = ceil(($iWidth - $tWidth) / 2);
$centerX = $centerX < 0 ? 0 : $centerX;

// 绘制文本
imagettftext($img, $fontSize, $angle, $centerX, 950, $fontColor, $fontFile, $txt);

// 输出预览图（inline头让浏览器直接显示）
header("Content-type: image/png");
header('Content-Disposition: inline; filename="' . $txt . '.png"');
imagepng($img);

// 保存到服务器（可选，确保ciktilar目录有写入权限）
$outputDir = 'ciktilar/';
if (!is_dir($outputDir)) mkdir($outputDir, 0755, true);
imagepng($img, $outputDir . $txt . '.png');

imagedestroy($img);
?>

2. 前端页面（index.html） #

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>图片加文本工具</title>
</head>
<body>
    <form id="imageForm" method="post" action="generate.php" target="hiddenFrame">
        <input type="text" name="metin" placeholder="输入要添加的文本" required>
        <button type="submit">生成图片</button>
    </form>

    <!-- 隐藏iframe用于加载生成的图片 -->
    <iframe name="hiddenFrame" id="hiddenFrame" style="display:none;"></iframe>
    
    <!-- 预览区域 -->
    <div id="previewWrap" style="margin-top:20px; display:none;">
        <img id="previewImg" alt="生成的图片" style="max-width:100%;">
        <button id="downloadBtn" style="margin-top:10px;">下载图片</button>
    </div>

    <script>
        document.getElementById('imageForm').addEventListener('submit', function() {
            const inputTxt = this.querySelector('input[name="metin"]').value;
            const hiddenFrame = document.getElementById('hiddenFrame');
            
            hiddenFrame.onload = function() {
                // 显示预览图
                const previewImg = document.getElementById('previewImg');
                previewImg.src = hiddenFrame.contentWindow.location.href;
                document.getElementById('previewWrap').style.display = 'block';

                // 绑定下载按钮事件
                document.getElementById('downloadBtn').onclick = function() {
                    const a = document.createElement('a');
                    a.href = previewImg.src;
                    a.download = inputTxt + '.png';
                    document.body.appendChild(a);
                    a.click();
                    document.body.removeChild(a);
                };
            };
        });
    </script>
</body>
</html>

方案二：生成图片后返回预览+下载页面 #

PHP生成图片并保存到服务器后，直接输出一个包含图片预览和下载按钮的HTML页面。

<?php
// 前面的图片生成、过滤输入、保存到服务器的代码和方案一一致

// 生成图片后输出HTML页面
$imgUrl = 'ciktilar/' . $txt . '.png';
?>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>图片预览与下载</title>
</head>
<body>
    <h3>生成的图片：</h3>
    <img src="<?php echo $imgUrl; ?>" alt="带文本的图片" style="max-width:100%;">
    <br>
    <a href="<?php echo $imgUrl; ?>" download="<?php echo $txt . '.png'; ?>">点击下载图片</a>
</body>
</html>

注意事项 #

• 字体文件需上传到服务器，不要使用本地Windows路径，确保PHP能读取到。
• 确保ciktilar目录有写入权限，否则无法保存生成的图片。
• 对输入文本的过滤不可少，避免非法字符导致文件名错误或安全问题。

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