Croppie Circle output to PNG with certain jpg background Image of choice upon button click

[bibby92]

Hi,

I am new to programming thou but after reviewing several posts here, is it possible to crop image using Circle but the output picture should then be outputed as png with certain jpg background image of your choice because my output is saving just the croppie image living out the background upon the button click, so my question is how do i get the croppie image and background to be save upon button click as a single image?

What i have is this in my html body:

        <div class="col-md-4" style="">
            <div id="upload-demo-i" style="background:url('uploads/mybanner.jpg'); background-size: 300px 300px; width:300px;height:300px;margin-top:30px"></div>
                         </div>
           </div>

My upload script:

$('.upload-result').on('click', function (ev) { $uploadCrop.croppie('result', { type: 'canvas', size: 'viewport', circle: 'true' }).then(function (resp) {

    $.ajax({
        url: "ajaxpro.php",
        type: "POST",
        data: {"image": resp},
        success: function (data) {
            console.log(data);
            var response = JSON.parse(data);
            if (response.image) {
                html = '<img id="preview" width="300px" src="' + response.image + '" /><br>  <a href=" '+response.image+' " id="download" download><button style="margin-top:20px;  margin-bottom:100px" class="btn btn-danger upload-result">Download Output</button></a> ';
                $("#upload-demo-i").html(html);
                $('#download').attr({
                    target: '_blank',
                    href: response.image
                })
            }else {
                alert('Failed to upload image');
            }
        }

    });

});

});

Please help out how do i achieve this