JavaScript图像裁剪/矩形选择图像答案

【问题标题】：JavaScript image crop / rectangle select on imageJavaScript图像裁剪/矩形选择图像
【发布时间】：2014-07-05 23:24:57
【问题描述】：

我有一个关于 JavaScript 的问题。我想要一个项目这样的东西：

基本上，我想要在图片中选择某种矩形。我已经有 PHP 用于稍后处理它。我只需要获取作物顶部/左角的 X 和 Y 位置。这在 JS+HTML 中可行吗？如果有，怎么做？

【问题讨论】：

你想让用户移动鼠标以便他可以选择图像的一部分吗？
是的，这正是我的意思。除了我只想获取作物顶部/左侧位置的坐标。因为那时我会将信息传递给我的 PHP 脚本。
尝试在 css 中使用 z-index。我相信它会帮助你

标签： javascript html image crop

【解决方案1】：

是的，这是可能的。您可以为裁剪选择器创建：一个 div 元素，设置其边框并使其位置为绝对。你让它跟随鼠标位置 $('#myImage').mousemove();

这是一个小提琴：http://jsfiddle.net/3kCPP/2/

这是一个你可以测试的代码：

<html>
<body>
<div id="info">Click on the image !</div>


<div id="myContainer" style="margin-left:140px;margin-top:40px;">
    <div id="myCropSelector" style="position:absolute; border:1px solid red; width:100px; height:100px;"></div>
    <img id="myImage" src="https://farm6.staticflickr.com/5340/8990232431_9f7a93d3ca.jpg" alt="myImage"/>
</div>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
    var $myCropSelector = $("#myCropSelector");
    var $myImage = $('#myImage');
    var $myContainer = $('#myContainer');

    var isMouseOnImage = function (mouseEvent, $image) {
        var imageOffset = $image.offset();
        return event.pageX >= imageOffset.left
            && event.pageX <= imageOffset.left + $image.width()
            && event.pageY >= imageOffset.top
            && event.pageY <= imageOffset.top + $image.height();
    }

    /**
     * Return the location inside the document and the size of the cropSelector
     * if it was supposed to be centered on the mouse location.
     * {
          pageX: absolute screen position
          pageY: absolute screen position
          imgX:  relative position to the image
          imgY:  relative position to the image
          w:     width of the crop
          h:     height of the crop
     * }
     }
     */
    var getCropInfo = function (mouseEvent, $cropSelector, $image) {
        var pageX = mouseEvent.pageX - $cropSelector.width() / 2;
        var pageY = mouseEvent.pageY - $cropSelector.height() / 2;
        var imageOffset = $image.offset();
        return {
            pageX: pageX,
            pageY: pageY,
            imgX: pageX - imageOffset.left,
            imgY: pageY - imageOffset.top,
            w: $cropSelector.width(),
            h: $cropSelector.height()
        };
    }

    $myContainer.mousemove(function (event) {

        // if the mouse is on the image
        if(isMouseOnImage(event, $myImage)) {

            // we center the crop selector
            var cropInfo = getCropInfo(event, $myCropSelector, $myImage);
            $myCropSelector.css({'top': cropInfo.pageY, 'left': cropInfo.pageX});
        }
    });

    $myContainer.click(function (event) {

        // if the mouse is on the image
        if(isMouseOnImage(event, $myImage)) {
            var cropInfo = getCropInfo(event, $myCropSelector, $myImage);
            var infoToDisplay = "";
            infoToDisplay += "x:" + cropInfo.imgX + "<br />";
            infoToDisplay += "y:" + cropInfo.imgY + "<br />";
            infoToDisplay += "width:" + cropInfo.w + "<br />";
            infoToDisplay += "height:" + cropInfo.h;
            $("#info").html(infoToDisplay);
        }
    });
</script>
</body>
</html>

【讨论】：

当我单击您示例中的图像时似乎没有发生任何事情。
页面顶部显示裁剪选择器信息。

【解决方案2】：

尝试使用 css 来做到这一点。

这很简单：

html

<div>
    <div id="crop"></div>
<img src="http://media1.santabanta.com/full1/Creative/Abstract/abstract-310v.jpg" height="350" width="400" id="img" />
</div>

css

#crop{
    width:100px;
    height:100px;
    border: 2px solid #ff0000;
    margin-left:200px; 
    position:absolute;
}

#img {
    border: 2px solid #ff0000;
   margin-top:-110px;
}

在这个小提琴中看到这个：DEMO

【讨论】：

让裁剪选择器移动的 Javascript 部分怎么样？