jcrop宽度，高度通过输入数值调整？答案

【问题标题】：jcrop width, height adjust by input number value?jcrop宽度，高度通过输入数值调整？
【发布时间】：2021-04-05 13:31:52
【问题描述】：

我需要关于 jcrop 的帮助。

我想输入一个数字来调整 jcrop 区域的大小。

示例：高度：“500”设置裁剪区域高度“500” 或类似 Width: "750" 设置裁剪区域宽度为 "750"

我无法更新选定的裁剪区域：/

有人可以帮助我吗？谢谢

<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>

&lt;link href="~/content/jquery.Jcrop.min.css" rel="stylesheet" /&gt;

<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>

【问题讨论】：

标签： javascript html jquery jcrop

【解决方案1】：

我用这段代码解决了我的问题。

<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>

【讨论】：