My image looses quality & png gets back color when I crop and upload in php

Question

Using Image Croppie, I have written a code to crop and resize the image.

My Code:

$uploadCrop1 = $('#upload-demo1').croppie({
    enableExif: true,
    viewport: {
        width: <?php echo 800*0.20; ?>,
        height: <?php echo 600*0.20; ?>,
        type: 'rectangle'
    },
    boundary: {
        width: <?php echo (800*0.20)+20; ?>,
        height: <?php echo (600*0.20)+20; ?>
    }
});
     
$('#upload1').on('change', function () { 
    var reader = new FileReader();
    reader.onload = function (e) {
        $uploadCrop1.croppie('bind', {
            url: e.target.result
        }).then(function(){
            //console.log('jQuery bind complete');
        });
    }
    reader.readAsDataURL(this.files[0]);
});

$('#cropped1').on('click', function (ev) {
  $uploadCrop1.croppie('result', {
        type: 'canvas',
        size: {width: 800,height: 600,type: 'rectangle'}
    }).then(function (resp) {
      $("#inputtt1").val(resp);
      $('#myModal1').modal('toggle');
    });
});

Problem 1: When I apply the same on a larger image (lets say 4032 X 3024) size to be resized to lets say (800 X 600), images becomes distorted

I tried using both: resampled as well as resized, before saving the image as final jpg, but still image gets distorted:

imagecopyresampled($destination, $source, 0, 0, 0, 0, $newwidth, $newheight, $width, $height);
imagecopyresized($destination, $source, 0, 0, 0, 0, $newwidth, $newheight, $width, $height);
imagejpeg($destination, $row['base_path'].$imgname,90);

Problem 2: When I crop a png with ImageCropper and save it as a png, I get a background color in the output image. I need output image to retain the transparent background.

Answer 1

I avoided the image distortion by setting type: 'original' to the croppie('result', function(){}).