当然可以！不管用PHP还是JavaScript，都能精准修改PNG图片的非透明区域颜色——就像你说的，只改T恤这类可见部分，完全不会碰透明背景。下面给你具体的实现方案，分两种语言场景来讲：

PHP的GD库就能轻松搞定这个需求，核心思路是遍历图片的每个像素，通过alpha通道判断是否为非透明区域，再针对性替换颜色。

<?php
// 加载原始PNG图片
$sourceImage = imagecreatefrompng('tshirt.png');
// 获取图片宽高
$width = imagesx($sourceImage);
$height = imagesy($sourceImage);

// 定义目标颜色（这里以纯红色为例，可自行修改RGB值）
$targetRed = 255;
$targetGreen = 0;
$targetBlue = 0;

// 遍历每个像素
for ($x = 0; $x < $width; $x++) {
    for ($y = 0; $y < $height; $y++) {
        // 获取当前像素的颜色索引
        $pixelIndex = imagecolorat($sourceImage, $x, $y);
        // 解析出像素的RGBA值
        $rgba = imagecolorsforindex($sourceImage, $pixelIndex);
        
        // GD库中alpha值范围是0（不透明）到127（完全透明），判断非透明区域
        if ($rgba['alpha'] < 127) {
            // 创建带原alpha值的目标颜色
            $newColor = imagecolorallocatealpha($sourceImage, $targetRed, $targetGreen, $targetBlue, $rgba['alpha']);
            // 修改当前像素颜色
            imagesetpixel($sourceImage, $x, $y, $newColor);
        }
    }
}

// 输出修改后的图片（也可以替换成保存到文件：imagepng($sourceImage, 'modified_tshirt.png');）
header('Content-Type: image/png');
imagepng($sourceImage);

// 释放资源
imagedestroy($sourceImage);
?>

如果想要更自然的颜色效果（比如不是生硬替换，而是叠加色调），可以调整RGB的计算逻辑，比如基于原像素的亮度值混合目标颜色。

JS分两种常用场景：浏览器端用Canvas API，Node.js后端用高效的sharp库。

浏览器端（Canvas） #

在网页中直接处理图片，步骤是加载图片到Canvas，获取像素数据后筛选非透明区域修改，最后导出图片：

// 获取页面中的Canvas元素
const canvas = document.getElementById('imageCanvas');
const ctx = canvas.getContext('2d');

// 加载目标PNG图片
const img = new Image();
img.crossOrigin = 'anonymous'; // 若图片跨域需设置此属性
img.src = 'tshirt.png';

img.onload = function() {
    // 同步Canvas尺寸与图片一致
    canvas.width = img.width;
    canvas.height = img.height;
    // 将图片绘制到Canvas
    ctx.drawImage(img, 0, 0);
    
    // 获取所有像素的RGBA数据
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const data = imageData.data;
    
    // 定义目标颜色（这里以深蓝色为例）
    const targetR = 0;
    const targetG = 100;
    const targetB = 255;
    
    // 遍历像素：每4个元素代表一个像素的R、G、B、A值
    for (let i = 0; i < data.length; i += 4) {
        const alpha = data[i + 3];
        // Canvas中alpha值0为完全透明，255为不透明，筛选非透明区域
        if (alpha > 0) {
            // 修改RGB值，保留原透明度
            data[i] = targetR;
            data[i + 1] = targetG;
            data[i + 2] = targetB;
        }
    }
    
    // 将修改后的像素数据放回Canvas
    ctx.putImageData(imageData, 0, 0);
    
    // 生成下载链接，让用户保存修改后的图片
    const modifiedImgUrl = canvas.toDataURL('image/png');
    const downloadLink = document.createElement('a');
    downloadLink.href = modifiedImgUrl;
    downloadLink.download = 'modified_tshirt.png';
    downloadLink.click();
};

Node.js 后端（sharp库） #

如果是后端批量处理图片，sharp是个高效且易用的库，先通过npm install sharp安装依赖，再用以下代码：

const sharp = require('sharp');

// 处理图片逻辑
sharp('tshirt.png')
    .raw() // 以原始像素模式读取图片
    .toBuffer({ resolveWithObject: true })
    .then(({ data, info }) => {
        const { width, height, channels } = info;
        // 定义目标颜色（这里以亮绿色为例）
        const targetR = 150;
        const targetG = 255;
        const targetB = 0;
        
        // 遍历所有像素
        for (let i = 0; i < data.length; i += channels) {
            // 处理RGBA格式的alpha通道，RGB格式默认不透明
            const alpha = channels === 4 ? data[i + 3] : 255;
            if (alpha > 0) {
                data[i] = targetR;
                data[i + 1] = targetG;
                data[i + 2] = targetB;
                // 保留原透明度
                if (channels === 4) data[i + 3] = alpha;
            }
        }
        
        // 将修改后的像素数据转回PNG并保存
        return sharp(data, {
            raw: { width, height, channels }
        }).png().toFile('modified_tshirt.png');
    })
    .catch(err => console.error('图片处理出错:', err));

简单总结一下：两种语言的核心逻辑都是通过alpha通道识别非透明区域，再针对性修改RGB值。如果需要更复杂的效果（比如只替换特定色系的非透明区域），可以在判断alpha的基础上，增加对原像素RGB值的判断条件。

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