如何使用Jcrop使图像响应

时间:2019-06-28 15:10:08

标签: javascript jquery css jcrop

无法使Jcrop响应Web和移动视图。

<link href="Jcrop-master/css/jquery.Jcrop.css" rel="stylesheet" />
    <script src="Scripts/jquery-3.3.1.min.js"></script>
    <script src="Jcrop-master/js/jquery.Jcrop.js"></script>
    <script type="text/javascript">


        $(document).ready(function () {

            $('#<%=imgUpload.ClientID%>').Jcrop({
                aspectRatio: 1 / 1,
                onSelect: SelectCropArea,
                onRelease: disableCropBtn
            });

        });

        function SelectCropArea(c) {
            $('#<%=X.ClientID%>').val(parseInt(c.x));
            $('#<%=Y.ClientID%>').val(parseInt(c.y));
            $('#<%=W.ClientID%>').val(parseInt(c.w));
            $('#<%=H.ClientID%>').val(parseInt(c.h));
            enableCropBtn();

        }

        function enableCropBtn() {

            var url = document.getElementById('<%=imgUpload.ClientID%>').src;

            if (!url.includes("File_Placeholder.png")) {
                document.getElementById('<%=btn_Crop.ClientID%>').style.visibility = "visible";
            } 


        }

        function disableCropBtn() {
            document.getElementById('<%=btn_Crop.ClientID%>').style.visibility = "hidden";
        }

    </script>

嗨,我是编程新手。我试图使用CSS和StackOverflow上的其他解决方案将位置设置为静态,但无法使其响应。有没有一种方法可以使我使用CSS使其响应而不更改代码?

0 个答案:

没有答案