
window.HM = {};
window.HM.Change_Image = function(comp){
    document.getElementById("File_Input").click();
}

window.elamet = function(data){
    alert(data);
};

window.onload = function(){
    document.getElementById('File_Input').onchange = function (evt) {
        var tgt = evt.target || window.event.srcElement;
        var  files = tgt.files;
        
        // FileReader support
        if (FileReader && files && files.length) {
            var fr = new FileReader();
            fr.onload = () => showImage(fr);
            fr.readAsDataURL(files[0]);
        }
    }
};

function showImage(fileReader) {
    var img = document.getElementById("myImage");
    img.onload = () => getImageData(img);
    img.src = fileReader.result;
}

function getImageData(img) {

    var canvas = document.createElement("canvas");
    canvas.width=window.innerWidth;
    canvas.height=window.innerHeight;
    
    var ctx = canvas.getContext("2d");

    let canvas_ratio = canvas.width/canvas.height;
    let bg_ratio = img.width/img.height;

    let scale = 1;

    if( canvas_ratio > bg_ratio ){
        scale = canvas.width/img.width;

    }else{
        scale = canvas.height/img.height;
    }

    let scaled_img_w = img.width*scale;
    let scaled_img_h = img.height*scale;

    let x_offset = (scaled_img_w-canvas.width)/2;

    ctx.drawImage(img, -x_offset, 0,scaled_img_w ,scaled_img_h);

    window.HM.Comp.Set_Image(canvas);

}






