everyone. I am doing a college project on Online Photo Editor but I am facing some problem in adding a background color to the text that I'm adding on an image using Imagick. Below is the php code for Imagick used
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);
?>
This is the result I'm getting Link to Resulted Image
This is what I want Link to Desired Result
How can I achieve that desired result. Any help is very much appreciated. Just in case needed, below is the ajax request and html that is sending the values
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 part residing within effect.php
Caption:<input type="textarea" rows="4" cols="10" maxlength="40" id="caption_value" />
<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"/> <span id="rangeFont"></span>
<button class="button" onclick="myCaptionAjax()">Apply</button>
Any help is highly appreciated.
