【问题标题】:Blend transparent gradient with an image using php GD library使用 php GD 库将透明渐变与图像混合
【发布时间】:2013-02-04 10:18:11
【问题描述】:

我尝试在需要从全色到透明的图像上渲染渐变,这是我的代码。我得到黑色图像,如果我开始超过 0,我得到白色渐变但没有图像。输出图像为 338x100 px,但如果图像较窄,则输入图像需要右对齐。

function hex2rgb($hex) {
    $rgb[0] = hexdec(substr($hex, 0, 2));
    $rgb[1] = hexdec(substr($hex, 2, 2));
    $rgb[2] = hexdec(substr($hex, 4, 2));
    return $rgb;
}

function int2rgb($color) {
    $result[] = ($color >> 16) & 0xFF;
    $result[] = ($color >> 8) & 0xFF;
    $result[] = $color & 0xFF;
    return $result;
}

if (isset($_GET['start']) && isset($_GET['stop']) && isset($_GET['color'])) {
    $input = imagecreatefrompng('file.png');
    $width = imagesx($input);
    $output = imagecreatetruecolor(338, 100);
    $color = hex2rgb($_GET['color']);
    $fill = imagecolorallocate($output, $color[0], $color[1], $color[2]);


    for ($x=0; $x<$_GET['start']; ++$x) {
        for ($y=0; $y<100; ++$y) {
            imagesetpixel($output, $x, $y, $fill);
        }
    }
    $range = $_GET['stop']-$_GET['start'];
    for ($x=$_GET['start']; $x<$_GET['stop']; ++$x) {
        $alpha = round(255-($x*255/$range));
        $correct_x = $width < 338 ? $x+$width-338 : $x;
        for ($y=0; $y<100; ++$y) {
            $input_color = int2rgb(imagecolorat($input, $correct_x, $y));

            $new_color = imagecolorallocate($output,
                                            (($color[0]-$alpha)*$input_color[0])/255,
                                            (($color[1]-$alpha)*$input_color[1])/255,
                                            (($color[2]-$alpha)*$input_color[2])/255);
            imagesetpixel($output, $x, $y, $new_color);
        }
    }
    if ($_GET['stop']<338) {
        $stop = $width < 338 ? $_GET['stop']+$width-338 : $_GET['stop'];
        imagecopy($input, $output, $stop, 0, $_GET['stop'], 0, 338-$stop, 100);
        header('Content-Type: image/png');
        imagepng($output);
    }
}

我使用gradient.php?start=20&amp;stop=200&amp;color=ff0000 运行脚本并得到这个而不是红色渐变。

如何使渐变红色从全彩色变为全透明?所以它看起来像这样:

【问题讨论】:

  • 必须是GD吗?
  • @Baba 不,如果可以的话。

标签: php image gd gradient


【解决方案1】:

如果您使用imagecreatetruecolor 创建图像,则会得到黑色背景。使用imagefill,您可以轻松更改图像的背景。 imagecolorallocatealpha 函数可让您创建包含透明度的颜色。 127 表示完全透明,0 表示不透明。

它现在可以工作了,我稍微简化了你的代码:

function hex2rgb($hex) {
    $rgb[0] = hexdec(substr($hex, 0, 2));
    $rgb[1] = hexdec(substr($hex, 2, 2));
    $rgb[2] = hexdec(substr($hex, 4, 2));
    return $rgb;
}

if (isset($_GET['start']) && isset($_GET['stop']) && isset($_GET['color'])) {
    $color = hex2rgb($_GET['color']);
    $range = $_GET['stop']-$_GET['start'];

    // create input image
    $input = imagecreatefrompng('file.png');


    // create output image
    $height = imagesy($input);
    $width = imagesx($input);
    $output = imagecreatetruecolor($width, $height);

    // put a transparent background on it
    $trans_colour = imagecolorallocatealpha($output, 0, 0, 0, 127);
    imagefill($output, 0, 0, $trans_colour);

    // create the gradient
    for ($x=0; $x < $width; ++$x) {
        $alpha = $x <= $_GET['start'] ? 0 : round(min(($x - $_GET['start'])/$range, 1)*127);
        $new_color = imagecolorallocatealpha($output, $color[0], $color[1], $color[2], $alpha);
        imageline($output, $x, $height, $x, 0, $new_color);
    }

    // copy the gradient onto the input image
    imagecopyresampled($input, $output, 0, 0, 0, 0, $width, $height, $width, $height);

    // output the result
    header('Content-Type: image/png');
    imagepng($input);
}

【讨论】:

  • 好极了。我花了一段时间才弄清楚如何将它用于图像另一侧(右侧)的 alpha 透明度:$alpha = $x &lt;= $start ? 127 : round(min(($stop-$x)/$range, 1)*127; 其中 $stop 等于图像的宽度。
  • 我知道这个问题在这一点上已经存在好几年了,尽管将其翻译成从图像底部开始而不是在底部进行渐变处理的最佳方法是什么?
猜你喜欢
  • 2012-03-06
  • 2016-11-25
  • 2011-04-25
  • 2013-03-17
  • 1970-01-01
  • 1970-01-01
  • 2018-04-16
  • 2011-03-30
  • 2015-02-03
相关资源
最近更新 更多