JSFiddle - React, Tailwind, and code Playground

HTML

<div>Coordernadas da seleção:</br>(SE = Superior esquerdo | SD = Superior direito | IE = Inferior esquerdo | IF = Inferior esquerdo)</div></br>
<div id="info">Selecione uma área da imagem </div></br>
<img src="http://www.devmedia.com.br/imagens/articles/192388/Jefferson%20-%20Art%204%20-%20Photoshop.jpg" alt="" />
<div id="selecao"></div>

CSS

#selecao {
    border: 2px #aaf solid;
    position: absolute;
    display: none;
    background-color: rgba(255, 0, 0, 0.3);
}

JavaScript

var info = document.getElementById('info');
var img = document.querySelector('img');
var selecao = document.getElementById('selecao');

var inicio;

function arrastador(e) {
    e.preventDefault();
    selecao.style.width = e.pageX - inicio.x + 'px';
    selecao.style.height = e.pageY - inicio.y + 'px';
	gerarInfo();
}

function gerarInfo() {
    var pos = selecao.getBoundingClientRect();
    var coords = {
        se: [pos.left, pos.top],
        sd: [pos.right, pos.top],
        ie: [pos.left, pos.bottom],
        id: [pos.right, pos.bottom]
    };
    info.innerHTML = JSON.stringify(coords);
}
img.addEventListener('mousedown', function(e) {
    inicio = {
        x: e.pageX,
        y: e.pageY
    };
    selecao.style.display = 'block';
    selecao.style.left = inicio.x + 'px';
    selecao.style.top = inicio.y + 'px';
    selecao.style.width = 0;
    selecao.style.height = 0;
    window.addEventListener('mousemove', arrastador);
});
window.addEventListener('mouseup', function(e) {
    inicio = null;
    window.removeEventListener('mousemove', arrastador);
    gerarInfo();
});