Image manipulation on the map in Leaflet

Question

I would like to be able to resize the image displayed on the map. E.g. using sliders (other solution is also welcome).

The image is in png format, the background is transparent.

I would like to be able to adjust the displayed outlines to match the map (height, width and possibly rotation). It would also be ideal to be able to drag an image on the map using the cursor.

Here is my code that displays the map, and allows you to upload and display an image from disk.

<script>
// initialization
var center = [55.122746, 14.911099];
var mymap = L.map('mapaOC').setView(center, 7)

// add OpenStreetMap tile
var osmLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: 'Map data &copy; OpenStreetMap contributors'
}).addTo(mymap);

// add draw tools
var drawnItems = new L.FeatureGroup();
mymap.addLayer(drawnItems);
mymap.addControl(new L.Control.Draw({
        edit: {
            featureGroup: drawnItems,
            poly: {
                allowIntersection: false
            }
        },
        draw: {
            polygon: {
                allowIntersection: false,
                showArea: true
            }
        }
    }));

    mymap.on(L.Draw.Event.CREATED, function (event) {
        var layer = event.layer;

        drawnItems.addLayer(layer);
    });


mymap.on('click', addMarker);

//======================================
// loading image
//=====================================


function handleFileSelect(event) {
  const file = event.target.files[0];
  const reader = new FileReader();
  reader.onload = function(event) {
    const dataURL = event.target.result;
    addImageToMap(dataURL);
  };
  reader.readAsDataURL(file);
}

function addImageToMap(dataURL) {
  const bounds = mymap.getBounds();
  const imageLayer = L.imageOverlay(dataURL, bounds);
  imageLayer.addTo(mymap);
}
</script>

and HTML code

<form>
 <input type="file" onchange="handleFileSelect(event)">
</form>

I really tried many solutions, but so far the best one is to manually set the starting points of the image (upper left and lower right corners)