Upload and display image with top and bottom text like mem .NET core 2.1

See more:

C#

Hello,
I am trying to upload file using items like canvas and javascript in .Net Core 2.1. When I click on Change Image button I didn't see any reaction . I want to upload a file and add top and bottom text like in mem.

file site.js

<pre>/ Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification
// for details on configuring this project to bundle and minify static web assets.

// Write your JavaScript code.
$('document').ready(function () {
    var imgForMeme = $('#start-image');
    var canvas = $('#memecanvas');
    var topText = $('#top-text');
    var bottomText = $('#bottom-text');
    var loader = $('.loader');


    imgForMeme.one("load", function () {
        var gifGen = new GifGenerator(canvas[0], imgForMeme[0], topText[0], bottomText[0]);
    }).each(function () {
        if (this.complete || /*for IE 10-*/ $(this).height() > 0)
            $(this).load();
    });

    $('#upload-file-btn').bind('click', function () {
        var input = document.createElement('input');
        input.setAttribute('type', 'file');
        $(input).bind('change', function (evt) {
            var form = new FormData(document.getElementById('change-image-form'));
            var file = evt.target.files[0];
            form.append("image", file);
            $.ajax({
                url: "api/File",
                type: "POST",
                data: form,
                processData: false,
                contentType: false,
                success: function (result) {
                    loader.css('display', 'inherit')
                    imgForMeme.attr('src', result);
                    setTimeout(function () {
                        var gifGen = new GifGenerator(canvas[0], imgForMeme[0], topText[0], bottomText[0]);
                        loader.css('display', 'none')
                    }, 1000);

                },
                error: function (result) {
                    alert('Something went wrong...');
                }
            });
        });
        input.click();
    });
});


//dealing with canvas
function GifGenerator(canvasElem, imgElem, topTextInput, bottomTextInput) {
    var memeWidth = imgElem.width;
    var memeHeight = imgElem.height;
    // var canvas = document.getElementById('memecanvas');
    var canvas = canvasElem;
    ctx = canvas.getContext('2d');


    // Set the text style to that to which we are accustomed

    canvas.width = memeWidth;
    canvas.height = memeHeight;

    //  Grab the nodes
    // var img = document.getElementById('start-image');
    var img = imgElem;
    var topText = topTextInput;
    var bottomText = bottomTextInput;
    //var topText = document.getElementById('top-text');
    //var bottomText = document.getElementById('bottom-text');

    // When the image has loaded...
    //img.onload = function () {
    //    drawMeme()
    //}

    topText.addEventListener('keydown', drawMeme)
    topText.addEventListener('keyup', drawMeme)
    topText.addEventListener('change', drawMeme)

    bottomText.addEventListener('keydown', drawMeme)
    bottomText.addEventListener('keyup', drawMeme)
    bottomText.addEventListener('change', drawMeme)

    function drawMeme() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

        ctx.lineWidth = 4;
        ctx.font = '20pt sans-serif';
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'white';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'top';

        var text1 = document.getElementById('top-text').value;
        text1 = text1.toUpperCase();
        x = canvas.width / 2;
        y = 0;

        wrapText(ctx, text1, x, y, 300, 28, false);

        ctx.textBaseline = 'bottom';
        var text2 = document.getElementById('bottom-text').value;
        text2 = text2.toUpperCase();
        y = canvas.height;

        wrapText(ctx, text2, x, y, 300, 28, true);

    }

    function wrapText(context, text, x, y, maxWidth, lineHeight, fromBottom) {

        var pushMethod = (fromBottom) ? 'unshift' : 'push';

        lineHeight = (fromBottom) ? -lineHeight : lineHeight;

        var lines = [];
        var y = y;
        var line = '';
        var words = text.split(' ');

        for (var n = 0; n < words.length; n++) {
            var testLine = line + ' ' + words[n];
            var metrics = context.measureText(testLine);
            var testWidth = metrics.width;

            if (testWidth > maxWidth) {
                lines[pushMethod](line);
                line = words[n] + ' ';
            } else {
                line = testLine;
            }
        }
        lines[pushMethod](line);

        for (var k in lines) {
            context.strokeText(lines[k], x, y + lineHeight * k);
            context.fillText(lines[k], x, y + lineHeight * k);
        }
    }

    drawMeme();
}

Views->File->Index.cshtml

<pre>@model MemeGenerator.Models.AppSettings


<h2>CreateMeme</h2>
@{
    ViewData["Title"] = "Home Page";
}
<div class="row">
    <div style="text-align:center" class="col-lg-6 col-lg-offset-3">
        <h2>Meme Generator</h2>
    </div>
    <div style="text-align:center" class="col-lg-6 col-lg-offset-3">
        <img style="width:100%; position:absolute; left:-2000px;" id="start-image" src="https://eu.alienwarearena.com/ucf/show/652485/boards/gamer-setups/Image/390235-1-tux-r-jpg" alt="" />
        <div class="form-group">
            <form id="change-image-form" enctype="multipart/form-data">
                <button type="button" id="upload-file-btn" class="btn btn-primary">Change image</button>
            </form>
        </div>
        <div class="loader"></div>
        <canvas id="memecanvas">
            Sorry, canvas not supported
        </canvas>
        <div class="form-group">
            <label for="usr">Top text</label>
            <input type="text" class="form-control" id="top-text">
        </div>
        <div class="form-group">
            <label for="usr">Bottom text</label>
            <input type="text" class="form-control" id="bottom-text">
        </div>
    </div>
</div>
<hr />

<div>
    <a asp-controller="Home" asp-action="Index">Back to List</a>
</div>
@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}
Shared->_Layout.cshtml-part of code where I used controller Memy and action CreateMeme

 @if (SignInManager.IsSignedIn(User))
                    {
                        <environment names="Staging,Production">
                            <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/css/bootstrap.min.css"
                                  asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
                                  asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
                            <link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
                        </environment>
                        @Html.Raw(JavaScriptSnippet.FullScript)
                        <li><a asp-area="" asp-controller="Memy" asp-action="CreateMeme">Wstaw mema</a></li>


                    }

MemyController

public class MemyController : Controller
   {
       public IActionResult CreateMeme()
       {
           return View();
       }
   }

This look that now: https://imgur.com/sXeea4C and I want something like this:https://imgur.com/6F2r72m
if you know what I am doing wrong please give me help :)

What I have tried:

I serached for Internet to find some solution but I can not find anything working :(