Question

我一直致力于图片上传系统，用户可以调整图片上传系统。移动上传的图像，只保留目标区域内的部分（黑匣子），图像将在此时上传，并根据此处输入的用户进行裁剪。

我在从jQuery .offset（）方法中获取正确值时遇到问题，似乎将最高值注册为184，但在我看来它看起来不正确，当我在Photoshop中检查它时截图肯定是。这已经导致我的问题已经有一段时间了，我已经搜索了很多试图找到并回答这个问题无济于事。我开始怀疑我对jQuery文档的理解是否有问题。

我已经提供了下面有相同问题的代码的缩减版本，resize＆amp;拖动图像已被删除，因为.offset（）从显示的那一刻起报告错误的值，所以我试图尽可能多地删除复制问题所不需要的代码。

任何帮助都会非常感激，我基本上要做的就是获得img＆amp; .targetArea相对于文档来计算应该裁剪出图像的哪个部分。

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width">

    <title></title>

    <style type="text/css">
    #basic-modal-content{ display:none; }

    /* Overlay */
    #simplemodal-overlay{ background-color: black; }

    /* Container */
    #simplemodal-container{
        position: relative;
        padding: 10px;
        border: 4px solid white;
        background-color: rgb(31, 122, 207);
        color: white;
    }
        #simplemodal-container .simplemodal-data{ padding: 0; }

        #simplemodal-container #imageUploader div .targetArea{
            position: absolute;
            top: 50%;
            left: 50%;
            border: 5px solid black;
            margin: 0;
            pointer-events: none;
            z-index:2;
        }

        #simplemodal-container #imageUploader div .uploadedImageContainer{
            display: inline-block;
            cursor: move;
        }
    </style>
</head>

<body>
<div id="wrapper">
<div id="simplemodal-overlay" class="simplemodal-overlay" style="opacity: 0.5; height: 838px; width: 1707px; position: fixed; left: 0px; top: 0px; z-index: 1001;"></div>

<div id="simplemodal-container" class="simplemodal-container" style="position: fixed; z-index: 1002; height: 796.1px; width: 1621.65px; left: 28.6796875px; top: 6.953125px;">
    <a class="modalCloseImg simplemodal-close" title="Close"></a>
    <div tabindex="-1" class="simplemodal-wrap" style="height: 100%; outline: 0px; width: 100%; overflow: visible;">
        <div id="imageUploader" class="simplemodal-data">
            <div id="imageUploadStep1">
                <h2>Image uploader</h2>

                <div class="targetArea" style="width: 640px; height: 480px; margin-top: -240px; margin-left: -320px;"></div>
                <div class="uploadedImageContainer ui-draggable" style="position: absolute; top: 50%; left: 50%; margin-top: -235px; margin-left: -315px;">
                    <div class="ui-wrapper" style="overflow: hidden; position: relative; top: auto; left: auto; margin: 0px;">
                        <img src="https://farm4.staticflickr.com/3681/14261132661_36ab0bbf08_o.jpg" style="max-width: 640px; margin: 0px; resize: none; position: static; zoom: 1; display: block;" class="ui-resizable">
                        <div class="ui-resizable-handle ui-resizable-nw" style="z-index: 90;"></div>
                        <div class="ui-resizable-handle ui-resizable-ne" style="z-index: 90;"></div>
                        <div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90;"></div>
                        <div class="ui-resizable-handle ui-resizable-sw" style="z-index: 90;"></div>
                    </div>
                </div>

                <div class="uploadImageButtons">
                    <a id="saveStepOne" class="buttonStyle buttonImage saveImage positive">Save image</a>
                    <a id="closeImageUploader" class="cancelUploadImage buttonStyle buttonImage stopImage negative">Cancel image</a>
                </div>
            </div>
        </div>
    </div>
</div>
</div>

<script src='http://code.jquery.com/jquery-2.0.3.min.js'></script>

</body>
</html>

jQuery .offset（）给出不正确的值

0 个答案: