JSFiddle - React, Tailwind, and code Playground

HTML

<p>paste an image in this window</p>

CSS

p {
    text-align: center;
    color: #333;
    font-family: helvetica;
    font-size: 12px;
    margin-top: 40px;
}

JavaScript

var canvas = document.createElement('canvas'),
    context = canvas.getContext('2d');

canvas.style.cssText = 'position:absolute; left:50%; top:50%';
document.body.appendChild(canvas);

document.addEventListener('paste', function (event) {
    var file = event.clipboardData.items[0].getAsFile(),
        reader = new FileReader();

    reader.onload = function(event) {
        var image = new Image ();

        image.addEventListener('load', function () {
            canvas.width = image.width;
            canvas.height = image.height;
            canvas.style.display = 'none';
            canvas.style.marginTop = -canvas.height/2 + 'px';
            canvas.style.marginLeft = -canvas.width/2 + 'px';
            context.clearRect(0, 0, image.width, image.height);
            context.drawImage(image, 0, 0);

            var request = new XMLHttpRequest();            
            request.upload.addEventListener('progress', function (event) {
                if (event.lengthComputable) console.log((event.loaded / event.total)*100);
            });
            request.addEventListener('readystatechange', function (aEvt) {  
                if (request.readyState === 4) canvas.style.display = 'block';
            });
            request.open('POST', 'ajax.php', true);
            request.send(file);
        });
        
        image.src = event.target.result;
    };
    
    reader.readAsDataURL(file);
});