jcrop width, height adjust by input number value?

Question

I need help about jcrop.

I want to put a number for resize jcrop area.

Example: Height: "500" to set crop area height "500" or same like Width: "750" to set crop area witdh "750"

i cant update selected crop area :/

Can someone help me about it? Thank you

<script src="~/Scripts/jquery-3.4.1.min.js"></script>
<script src="~/Scripts/jquery.Jcrop.min.js"></script>

<script>


    $("#yukseklik").change(function () {
        var Yukseklik = document.getElementById("yukseklik").value;
        alert("Değer Değişti!:" + Yukseklik)
        $('#target').Jcrop();

    });
    $("#genislik").change(function () {
        var Genislik = document.getElementById("genislik").value;
        alert("Değer Değişti!:" + Genislik)
    });


    function selectedCoordinates(c) {
        // variables can be accessed here as
    };

    function changingCoordinates(c) {
        // variables can be accessed here as

    };

    function finalCoordinates(c) {
        // variables can be accessed here as
    };


    jQuery(function ($) {
        $('#target').Jcrop({
            setSelect: [250, 250, 100, 100],
            onSelect: selectedCoordinates,
            onChange: changingCoordinates,
            onRelease: finalCoordinates,
            allowSelect: false,
            allowResize: false,
            //aspectRatio: 3 / 4,
            minSize: [100, 100],
            maxSize: [750, 1000]

        });  
    });


</script>

<link href="~/content/jquery.Jcrop.min.css" rel="stylesheet" />

<img id="target" src="~/Images/sunset-time-beach-with-twilight-lanscape.jpg" /><br /><br />
<div class="row">
    <div class="col-6">
        <label for="yukseklik">Yükseklik</label>
        <input id="yukseklik" type="number" value="1000" min="100" />
    </div>
    <div class="col-6">
        <label for="genislik">Genişlik</label>
        <input id="genislik" type="number" value="1000" min="100" />
    </div>
</div>

Answer 1

I fix my issue with this code.

<script>
        $("#yukseklik").change(function () {
            var Yukseklik = $("#yukseklik").val();
            var Genislik = $("#genislik").val();

            $('#target').Jcrop({
                setSelect: [Genislik, Yukseklik, 0, 0],
                onSelect: selectedCoordinates,
                onChange: changingCoordinates,
                onRelease: finalCoordinates,
                allowSelect: false,
                allowResize: false,
                //aspectRatio: 3 / 3,
                minSize: [100, 100],
                maxSize: [5000, 5000],
            });
        });

        $("#genislik").change(function () {
            var Yukseklik = $("#yukseklik").val();
            var Genislik = $("#genislik").val();

            $('#target').Jcrop({
                setSelect: [Genislik, Yukseklik, 0, 0],
                onSelect: selectedCoordinates,
                onChange: changingCoordinates,
                onRelease: finalCoordinates,
                allowSelect: false,
                allowResize: false,
                //aspectRatio: 3 / 3,
                minSize: [100, 100],
                maxSize: [5000, 5000]

            });
        });

        function selectedCoordinates(c) {
            c.x, c.y, c.x2, c.y2, c.w, c.h
        };

        function changingCoordinates(c) {
            c.x, c.y, c.x2, c.y2, c.w, c.h
        };

        function finalCoordinates(c) {
            c.x, c.y, c.x2, c.y2, c.w, c.h
        };
    </script>