Как я могу иметь хороший радиальный прозрачный градиент, применяемый к изображению с PHP?

введение

Я думаю, вы должны получить Imagemagick установлен, потому что то, что вы хотите, это просто vignette эффект, вы можете легко так, что с ImageMagic (convert input.jpg -background black -vignette 70x80 output.png) без необходимости петли каждого пикселя, который может быть очень медленным при работе с большими изображениями

Исходное Изображение

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

эффект 1

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

действие 2

$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 будет ... для создания маски и более лей!--12-->

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

• Код
• классные демонстрации комбинации фильтров

единственным недостатком является то, что изображение должно быть того же размера с маской, чтобы эффект выглядел круто

вывод

если это то, что вы имеете в виду radial transparent gradient тогда я советую вам сделать ImageMagic если не по крайней мере, девушка на картинке симпатичная.

Я знаю, что это вопрос, связанный с PHP, но вы можете достичь хороших прозрачных градиентов с использованием javascript и html5 canvas element.

поэтому я написал этот небольшой скрипт:

• обнаруживает браузеры, которые поддерживают элемент canvas, если браузер не поддерживает canvas (к счастью, осталось всего несколько процентов пользователей), то отображается полное изображение.
• создает холст и добавляет элемент после изображения
• аргументы в функция 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;
}