10

How can one specify an image and apply a radial transparent gradient where it fades out radially. I do not have Imagemagick installed.

Marginal example:

Gradient Transparent image fade PHP

4

4 回答 4

18

介绍

我认为你应该安装 Imagemagick，因为你想要的是一个简单的vignette效果，你可以很容易地使用ImageMagic ( convert input.jpg -background black -vignette 70x80 output.png) 而不必循环每个像素，这在处理大图像时可能会很慢

原始图像

$file = __DIR__ . "/golf.jpg";

在此处输入图像描述

效果一

$image = new imagick($file);
$image->vignetteImage(20, 20, 40, - 20);
header("Content-Type: image/png");
echo $image;

在此处输入图像描述

效果二

$image = new imagick($file);
$image->vignetteImage(100, 100, 200, 200);
header("Content-Type: image/png");
echo $image;

在此处输入图像描述

GD的小插曲

好吧，如果您被迫使用 GB ... 使用可以使用这个很酷的小插图脚本 

function vignette($im) {
    $width = imagesx($im);
    $height = imagesy($im);

    $effect = function ($x, $y, &$rgb) use($width, $height) {
        $sharp = 0.4; // 0 - 10 small is sharpnes,
        $level = 0.7; // 0 - 1 small is brighter
        $l = sin(M_PI / $width * $x) * sin(M_PI / $height * $y);
        $l = pow($l, $sharp);
        $l = 1 - $level * (1 - $l);
        $rgb['red'] *= $l;
        $rgb['green'] *= $l;
        $rgb['blue'] *= $l;
    };

    for($x = 0; $x < imagesx($im); ++ $x) {
        for($y = 0; $y < imagesy($im); ++ $y) {
            $index = imagecolorat($im, $x, $y);
            $rgb = imagecolorsforindex($im, $index);
            $effect($x, $y, $rgb);
            $color = imagecolorallocate($im, $rgb['red'], $rgb['green'], $rgb['blue']);

            imagesetpixel($im, $x, $y, $color);
        }
    }
    return (true);
}

更快的 GD 小插图方法

在GD 过滤器测试中使用的更好的方法 是......创建一个掩码和覆盖

    $overlay = 'vignette_white.png';
    $png = imagecreatefrompng($overlay);
    imagecopyresampled($filter, $png, 0, 0, 0, 0, $width, $height, $width, $height);

唯一的缺点是图像必须与蒙版大小相同才能看起来很酷

结论

如果这就是你的意思，radial transparent gradient那么我建议你ImageMagic至少得到这张照片很可爱的女士。

于 2013-05-09T14:33:02.420 回答
3

感谢@Baba 链接的功能，我能够更改脚本以实现半透明的晕影效果。

<?php
class PhotoEffect
{
  private $_photoLocation;
  private $_width;
  private $_height;
  private $_type;

  private $_originalImage;
  private $_afterImage;

  /**
   * Load image URL in constructor
   */
  final public function __construct($photoLocation)
  {
    $this->_photoLocation = $photoLocation;
    if (!$size = @getimagesize($this->_photoLocation)){
      throw new Exception('Image cannot be handled');
    }
    $this->_width = $size[0];
    $this->_height = $size[1];
    $this->_type = $size[2];


    switch ( $this->_type ) {
      case IMAGETYPE_GIF:
        $this->_originalImage = imagecreatefromgif($this->_photoLocation);
      break;
      case IMAGETYPE_JPEG:
        $this->_originalImage = imagecreatefromjpeg($this->_photoLocation);
      break;
      case IMAGETYPE_PNG:
        $this->_originalImage = imagecreatefrompng($this->_photoLocation);
      break;
      default:
        throw new Exception('Unknown image type');
    }
  }

  /**
   * Destroy created images
   */
  final private function __destruct() {
     if (!empty($this->_originalImage))
     {
       imagedestroy($this->_originalImage);
     }

     if (!empty($this->_afterImage))
     {
       imagedestroy($this->_afterImage);
     }
   }

  /**
   * Apply vignette effect
   */
  final public function Vignette($sharp=0.4, $level=1, $alpha=1)
  {
    if (empty($this->_originalImage))
    {
      throw new Exception('No image');
    }

    if (!is_numeric($sharp) || !($sharp>=0 && $sharp<=10))
    {
      throw new Exception('sharp must be between 0 and 10');            
    }

    if (!is_numeric($level) || !($level>=0 && $level<=1))
    {
      throw new Exception('level must be between 0 and 10');            
    }

    if (!is_numeric($alpha) || !($alpha>=0 && $alpha<=10))
    {
      throw new Exception('alpha must be between 0 and 1');         
    }

    $this->_afterImage = imagecreatetruecolor($this->_width, $this->_height);
    imagesavealpha($this->_afterImage, true);
    $trans_colour = imagecolorallocatealpha($this->_afterImage, 0, 0, 0, 127);
    imagefill($this->_afterImage, 0, 0, $trans_colour);


    for($x = 0; $x < $this->_width; ++$x){
      for($y = 0; $y < $this->_height; ++$y){  
        $index = imagecolorat($this->_originalImage, $x, $y);
        $rgb = imagecolorsforindex($this->_originalImage, $index);

        $l = sin(M_PI / $this->_width * $x) * sin(M_PI / $this->_height * $y);
        $l = pow($l, $sharp);

        $l = 1 - $level * (1 - $l);

        $rgb['red'] *= $l;
        $rgb['green'] *= $l;
        $rgb['blue'] *= $l;
        $rgb['alpha'] = 127 - (127 * ($l*$alpha));


        $color = imagecolorallocatealpha($this->_afterImage, $rgb['red'], $rgb['green'], $rgb['blue'], $rgb['alpha']);

        imagesetpixel($this->_afterImage, $x, $y, $color);  
      }
    }

  }


  /**
   * Ouput PNG with correct header
   */
  final public function OutputPng()
  {
    if (empty($this->_afterImage))
    {
      if (empty($this->_originalImage))
      {
        throw new Exception('No image');
      }
      $this->_afterImage = $this->_originalImage;
    }

    header('Content-type: image/png');
    imagepng($this->_afterImage);
  }

  /**
   * Save PNG
   */
  final public function SavePng($filename)
  {
    if (empty($filename)) {
        throw new Exception('Filename is required');
    }

    if (empty($this->_afterImage))
    {
      if (empty($this->_originalImage))
      {
        throw new Exception('No image');
      }
      $this->_afterImage = $this->_originalImage;
    }

    imagepng($this->_afterImage, $filename);
  }

}


/**
 * How to use
 */
$effect = new PhotoEffect('test.jpg');
$effect->Vignette();
$effect->OutputPng();
?>

使用我可以在他们的服务器上找到的唯一图像工作 phpfiddle ，所以不是那么大。

于 2013-05-13T15:15:39.210 回答
0

我知道这是一个与 PHP 相关的问题，但您可以使用 javascript 和 html5 画布元素实现漂亮的透明渐变。

所以我写了这个小脚本：

  • 检测支持画布元素的浏览器，如果浏览器不支持画布（幸运的是只剩下百分之几的用户），则显示完整图像。
  • 创建画布并在图像后附加元素
  • 可以为自定义形状更改 create_gradient() 函数中的参数
  • 它适用于所有流行的图像格式（使用 .jpg、.bmp、.gif、.png 进行测试）
  • 你可以添加更多的“colorstops”（grd.addColorStop()）来改变渐变的流动

脚本

window.onload = function() {
    if ( typeof CanvasRenderingContext2D !== 'function' ) {
        document.getElementById('gradient-image').style.visibility = "visible";
        return;
    }

    var image = document.getElementById('gradient-image');

    // these are the default values, change them for custom shapes
    create_gradient( image, image.width/2, image.height/2, image.height/4, image.width/2, image.height/2, image.height/2 );
}

function create_gradient( image, start_x, start_y, start_r, end_x, end_y, end_r ){

    var canvas = document.createElement('canvas');

    var parent = image.parentNode;
    if ( parent.lastchild == image ) parent.appendChild(canvas);
    else parent.insertBefore(canvas, image.nextSibling);

    canvas.width  = image.width;
    canvas.height = image.height;

    var context = canvas.getContext('2d');

    var grd = context.createRadialGradient( start_x, start_y, start_r, end_x, end_y, end_r );
    grd.addColorStop(0, 'rgba(0,0,0,1)' );
    // grd.addColorStop(0.2, 'rgba(0,0,0,0.8)' );
    grd.addColorStop(1, 'rgba(0,0,0,0)' );

    context.fillStyle = grd;
    context.fillRect(0, 0, image.width, image.height);

    var grd_data = context.getImageData(0, 0, image.width, image.height);

    context.drawImage( image, 0, 0);
    var img_data = context.getImageData(0, 0, image.width, image.height);

    var grd_pixel = grd_data.data;
    var img_pixel = img_data.data;
    var length = img_data.data.length

    for ( i = 3; i < length; i += 4 ) {
        img_pixel[i] = grd_pixel[i];
    }
    context.putImageData(img_data, 0, 0);
}

html

<img id="gradient-image"src="">

css

#gradient-image {
    position: absolute;
    visibility: hidden;
}
于 2013-05-15T15:16:38.113 回答
0

这个 php 库中还有一个小插图过滤器，它只使用 GD：

https://github.com/elgervb/imagemanipulation

于 2021-02-11T15:19:58.787 回答