PHP - Image editing with jQuery ajax not working

Question

I am trying to add some text on my image with jQuery ajax but getting some strange text on ajax response and not getting proper image.

jQuery Ajax Code:

$(document.body).on('click', '.certificate_tab .tab-content li a' ,function(){
    var data_did = $(this).attr("data-diplomaidx");
    if(data_did != ""){
        $.ajax({
            url: "diploma/certificate",
            type: 'POST',
            data: "id=" + data_did,
            success: function (html){
                if(html != ""){
                    $("#CertificateModel .modal-content").append(html);
                    $('#CertificateModel').modal('show');
                }else{

                }
            }
        });
        return false;
    }
});

and calling to this function on ajax:

public function certificate()
{
    if (Auth::check()) {
        $ScratchProject = new ScratchProject();

        $GetMyDiploma = $ScratchProject->GetMyDiploma();

        $ImagePath = url().'/public/upload/certificate/'.$GetMyDiploma[0]->CertificateTemplate;

        $text = "Hello Admin";
        $source_file = $ImagePath;
        //saveImageWithText("",  $image_filepath);

        //Set the Content Type
        header('Content-type: image/jpeg');

        // Copy and resample the imag
        list($width, $height) = getimagesize($source_file);
        $image_p = imagecreatetruecolor($width, $height);
        $image = imagecreatefromjpeg($source_file);
        imagecopyresampled($image_p, $image, 0, 0, 0, 0, $width, $height, $width, $height);

        // Prepare font size and colors
        $text_color = imagecolorallocate($image_p, 0, 0, 0);
        $bg_color = imagecolorallocate($image_p, 255, 255, 255);
        $font = 'resources/assets/front/fonts/FontAwesome.otf';
        $font_size = 12;

        // Set the offset x and y for the text position
        $offset_x = 0;
        $offset_y = 20;

        // Get the size of the text area
        $dims = imagettfbbox($font_size, 0, $font, $text);
        $text_width = $dims[4] - $dims[6] + $offset_x;
        $text_height = $dims[3] - $dims[5] + $offset_y;

        // Add text background
        imagefilledrectangle($image_p, 0, 0, $text_width, $text_height, $bg_color);

        // Add text
        //imagettftext($image_p, $font_size, 0, $offset_x, $offset_y, $text_color, $font, $text);
        imagettftext($image_p, 20, 0, 100, 220, $text_color, $font, $text);

        // Save the picture
        imagejpeg($image_p);

        // Clear
        imagedestroy($image);
        imagedestroy($image_p);
    }
}

Any idea what is wrong in my code?

Thanks.

Answer 1

Firstly, You don't need to send the image inside the response just send the image URI, and then load/append it on the frontend using js.

Next, if you still wish to proceed then, you need to send the image base64 encoded inside a json_encoded() object. Then update the img with the src set as below.

<img src="data:image/png;base64,<encoded image data goes here>" alt="Red dot">