如何下载应用CSS颜色滤镜效果的T恤图片？

问题根源在于CSS滤镜只是浏览器渲染时添加的视觉效果，并没有修改原图文件，所以直接下载原图肯定带不上滤镜效果。下面给你两种可行的解决办法：

前端JS（Canvas）方案 #

无需后端支持，直接在浏览器内完成渲染和下载，适合快速生成：

先给页面加个下载按钮：

<button onclick="downloadFilteredImage()">下载带颜色效果的T恤</button>

然后实现下载逻辑的JS函数：

function downloadFilteredImage() {
    // 获取包含T恤图片的容器
    const shirtContainer = document.getElementById('shirtDiv');
    // 创建Canvas元素用于绘制渲染后的内容
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // 让Canvas尺寸和容器保持一致
    canvas.width = shirtContainer.offsetWidth;
    canvas.height = shirtContainer.offsetHeight;

    // 将容器内的渲染内容（包括滤镜效果）绘制到Canvas
    ctx.drawImage(shirtContainer, 0, 0);

    // 创建下载链接并触发下载
    const downloadLink = document.createElement('a');
    downloadLink.download = 'colored_tshirt.png';
    downloadLink.href = canvas.toDataURL('image/png');
    downloadLink.click();
}

注意：如果图片来自跨域地址，需要图片所在服务器配置CORS允许跨域访问，否则Canvas会因安全限制无法绘制图片。

后端PHP方案 #

如果需要在服务器端生成并保存带滤镜的图片，或者遇到跨域问题无法用前端方案，可以用PHP处理：

前端请求代码 #

function getServerProcessedImage() {
    const formData = new FormData();
    // 传递原图路径和滤镜参数
    formData.append('image_path', 'img/crew_front.png');
    formData.append('invert', 58);
    formData.append('sepia', 36);
    formData.append('saturate', 6773);
    formData.append('hue_rotate', 57);
    formData.append('brightness', 90);
    formData.append('contrast', 105);

    fetch('process_tshirt.php', {
        method: 'POST',
        body: formData
    }).then(response => response.blob()).then(blob => {
        // 触发浏览器下载生成好的图片
        const downloadLink = document.createElement('a');
        downloadLink.href = URL.createObjectURL(blob);
        downloadLink.download = 'colored_tshirt.png';
        downloadLink.click();
    });
}

PHP处理代码（process_tshirt.php） #

使用Imagick扩展能更精准模拟CSS滤镜效果（需服务器安装Imagick）：

<?php
// 获取前端传递的参数
$imagePath = $_POST['image_path'];
$invert = (int)$_POST['invert'] / 100;
$sepia = (int)$_POST['sepia'] / 100;
$saturate = (int)$_POST['saturate'] / 100;
$hueRotate = (int)$_POST['hue_rotate'];
$brightness = (int)$_POST['brightness'] / 100;
$contrast = (int)$_POST['contrast'] / 100;

try {
    $imagick = new Imagick($imagePath);

    // 应用对应滤镜效果
    $imagick->brightnessContrastImage(($brightness - 1) * 100, ($contrast - 1) * 100);
    if ($invert > 0) {
        $imagick->invertImage();
        // 若需精确模拟百分比反转，可额外调整，这里用近似效果
    }
    $imagick->sepiaToneImage($sepia * 255);
    $imagick->saturateImage($saturate);
    $imagick->rotateImage(new ImagickPixel(), $hueRotate);

    // 输出图片并触发下载
    header('Content-Type: image/png');
    header('Content-Disposition: attachment; filename="colored_tshirt.png"');
    echo $imagick;
    $imagick->destroy();
} catch (Exception $e) {
    die('图片处理失败：' . $e->getMessage());
}
?>

如果服务器没有安装Imagick，也可以用GD库（但部分滤镜模拟精度较低），可替换对应处理逻辑。

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