Imagickの画像に注釈付きテキストの背景を追加する

Question

everyone。私はオンラインフォトエディタで大学のプロジェクトをやっていますが、私はImagickを使ってイメージに追加しているテキストに背景色を追加する際に問題に直面しています。以下は、Imagickのための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); 

？>

caption.phpを使用しているこれは、私はこれは私が Link to Desired Result

欲しいものです Link to Resulted Image

を得ている結果であり、

希望の結果を得るにはどうしたらいいですか？どんな助力も非常に感謝しています。念のため下記、必要 は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> 

内の任意の助けを常駐

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部分が非常にある値を送信しているAjaxのリクエストとhtmlです感謝。

Answer 1

annotateImageを使用しないでください。

は代わりのImagickDrawオブジェクト内のテキスト、および画像の上に、この例のようImagick :: drawImageメソッドを使用していること、その後、複合描く：http://phpimagick.com/Imagick/drawImage