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

Posted 2023-02-25

【中文标题】jcrop宽度，高度通过输入数值调整？

【英文标题】：jcrop width, height adjust by input number value?

【发布时间】：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>

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

【参考方案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>