$(document).ready(function (){
    $("#regForm").sumbit(function(e){
        e.preventDefault();
        submitRegForm();
    });
});

function submitRegForm(){
    let regUsername = $("#regUsername").val();
    let regPassword = $("#regPassword").val();
    let regImage = getBase64Image($("#regImage").val());
    let objectForServer = {
        username: regUsername,
        password: regPassword,
        image: regImage
    }
    postRegistrationObjectToServer(objectForServer);
}

function getBase64Image(imgValue){
    let canvas = document.createElement("canvas");
    let img1 = document.createElement("img");
    img1.setAttribute('src', imgValue);
    canvas.width = img1.width;
    canvas.height = img1.height;
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img1, 0, 0);
    var dataURL = canvas.toDataURL("image/png");
    return dataURL;
}

function postRegistrationObjectToServer(object){
    //createPostRequest and send object
}