Добавление фона к аннотированному тексту на изображении в Imagick

Question

Каждый. Я делаю проект для колледжа в онлайн-редакторе фотографий, но у меня возникла проблема с добавлением цвета фона к тексту, который я добавляю на изображение с помощью Imagick. Ниже приведен код php для Imagick

caption.php

<?php
$caption =  $_POST['caption'];
$caption_color =  $_POST['caption_color'];
$caption_color =  "#".$caption_color;
$font =  $_POST['font'];

$image = new Imagick();
$draw = new ImagickDraw();
$data = "\intermediate.jpg";
$im = new Imagick(__DIR__.$data);
$im->setImageFormat("jpg");

$draw->setFillColor($caption_color);
$draw->setFont('Arial');
$draw->setFontSize( $font );

$im->annotateImage($draw, $im->getImageWidth()/2, $im->getImageHeight()/2, 0, $caption);

header('Content-type: image/jpg');
$im->writeImages(__DIR__.$data, true);

?>

Это результат, я получаю ссылку на результат изображения

Это то, что я хочу Ссылка на желаемый результат

Как я могу достичь этого желаемого результата. Любая помощь очень ценится. На всякий случай ниже представлен запрос ajax и HTML, который отправляет значения

effect.php

function myCaptionAjax() {
var loader = $("#ajax-loader");
var div_loader = $("#img");
        $.ajax({
            type: 'POST',
            url: 'effects/caption.php',
            data: {caption: $('#caption_value').val(),caption_color: $('#caption_color').val(),font: $('#font_value').val()},
            beforeSend: function () {
            loader.show();
            div_loader.hide();
        },
        success: function ( data ) {
        loader.hide();
        div_loader.show();
        display();
        },
        error: function ( xhr ) {
        alert( "error" );
    }
        });
};

HTML часть, находящаяся в effect.php

Caption:<input type="textarea" rows="4" cols="10" maxlength="40" id="caption_value" />&nbsp;
    <input id="caption_color" class="jscolor" value="ab2567">
    <input type="range" min="10" max="50" value="10" step="1" onchange="showFont(this.value)" id="font_value"/>&nbsp;<span id="rangeFont"></span>
    <button class="button" onclick="myCaptionAjax()">Apply</button>

Любая помощь высоко ценится.

Answer 1

Не используйте annotateImage.

Вместо этого нарисуйте текст в объекте ImagickDraw, а затем скомпонуйте его поверх изображения, используя Imagick::drawImage, как в этом примере: http://phpimagick.com/Imagick/drawImage