Question

我需要关于 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>

<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

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

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

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

1 个答案: