JSFiddle - React, Tailwind, and code Playground

HTML

<img id="Image" src="../../../img/logo.png" alt="">
<form method="post" action="./">
    <input type="hidden" name="src" value="">
    <input type="hidden" name="base64" value="">
</form>

CSS

body {
    background-color:#228800;
}

JavaScript

var imgLoaded = function () {
    var src = this.src;
    var canvas = document.createElement('canvas');
        canvas.width = this.clientWidth;
        canvas.height = this.clientHeight;
        canvas.getContext('2d').drawImage(this,0,0);
    var base64 = canvas.toDataURL();
        document.getElementsByName('src')[0].value = src;
        document.getElementsByName('base64')[0].value = base64;
    var send = confirm('send form?');
    if(send) {
        document.getElementsByTagName('form')[0].submit();
    }
}

var img = document.getElementById('Image');
    img.onload = imgLoaded;