OpenLayers Coordinates – How to Determine Image Corner Coordinates for ImageExtent in OpenLayers 5

It is possible to get the coordinates of the four corners of the image, given the center of the image coordinate? or the bottom left and upper right corners?

Currently, I am center the map in the lat/long mentioned above and I want to display the image in that coordinates.

Example Code

import Map from 'ol/Map.js';
import View from 'ol/View.js';
import Projection from 'ol/proj/Projection.js';
import { getCenter } from 'ol/extent.js';
import ImageLayer from 'ol/layer/Image.js';
import Static from 'ol/source/ImageStatic.js';
import TileLayer from 'ol/layer/Tile'
import OSM from 'ol/source/OSM.js';

var osmSource = new OSM();
var extent = [0, 0, 4000, 3000];
var mapLayer = new TileLayer({
    source: osmSource,
    projection: new Projection(
      { 
          code: 'EPSG:3857', 
          units: 'm', 
          axisOrientation: 'neu',
          global: false 
      }),
      center : getCenter(extent)
  })

var map = new Map({
    layers: [
        mapLayer,

        new ImageLayer({
            source: new Static({
                attributions: '© <a href="https://dronemapper.com/sample_data/">dronemapper</a>',
                url: './data/DJI_0014.JPG',
                // projection: projection,
                imageExtent: extent
            })
        })
    ],
    target: 'map-container',
    view: new View({
        // projection: projection,
        center: getCenter(extent),
        zoom: 2,
        maxZoom: 8
    }),
    projection: 'EPSG:3857'
});

As you can see the image is displayed in 0,0 (Guinea gulf), I'm trying to get the coordinates for bottom-left and right-up to display the image in the coordinates provided by the image.

PS: image info: 4000 x 3000 pixels
lat 38: 47: 40.98290000
lon 108: 1: 16.25819999

I have a working example with the image placed in the right coordinates, now I would need some directives to get the right zoom and rotation the image to match the road on the map.

Tip: the image if from here https://dronemapper.com ©, image DJI_0014.JPG

import Map from 'ol/Map.js';
import View from 'ol/View.js';
import TileLayer from 'ol/layer/Tile'
import OSM from 'ol/source/OSM.js';
import { Vector as VectorLayer } from 'ol/layer.js';
import { Icon, Style } from 'ol/style.js';
import VectorSource from 'ol/source/Vector.js';
import Feature from 'ol/Feature.js';
import Point from 'ol/geom/Point.js';
import { transform } from 'ol/proj';

function photoStyle(feature, scale) {
    var url = feature.get('url');
    return new Style({
        image: new Icon({
            scale: scale,
            src: url
        })
    });
}

function imgStyle(feature) {
    return [photoStyle(feature, 0.10)];
}

var layer = new TileLayer({
    source: new OSM()
});

var imgSource = new VectorSource();

var imgLayer = new VectorLayer({
   // extent: [0, 0, 4000, 3000],
    source: imgSource,
    style: imgStyle
    // ,
    // rotation: Math.PI / 6
});

//Photo coordinates   38.79471747, -108.02111111 var extent = [0, 0, 4000, 3000];

var feature = new Feature();
feature.set('url', './data/DJI_0014.JPG');
var coordinate = transform([-108.02111111, 38.79471747], 'EPSG:4326', 'EPSG:3857');
var geometry = new Point(coordinate);
feature.setGeometry(geometry);
imgSource.addFeature(feature)

var map = new Map({

    target: 'map-container',
    view: new View({

        center: coordinate,
        zoom: 19

    })

});

map.addLayer(layer);
map.addLayer(imgLayer);

You Can use [ALT] + [Shift] + Click to rotate the map.
I would like to display the image rotated and zoomed to the right position.

What I want