JavaScript图像裁剪/矩形选择图像
Posted
技术标签:
【中文标题】JavaScript图像裁剪/矩形选择图像【英文标题】：JavaScript image crop / rectangle select on image 【发布时间】：2014-07-05 23:24:57 【问题描述】：我有一个关于 javascript 的问题。我想要一个项目这样的东西：
基本上，我想要在图片中选择某种矩形。我已经有 php 用于稍后处理它。我只需要获取作物顶部/左角的 X 和 Y 位置。这在 JS+html 中可行吗？如果有，怎么做？
【问题讨论】：
你想让用户移动鼠标以便他可以选择图像的一部分吗？ 是的，这正是我的意思。除了我只想获取作物顶部/左侧位置的坐标。因为那时我会将信息传递给我的 PHP 脚本。 尝试在 css 中使用z-index。我相信它会帮助你
【参考方案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" />
</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" 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 部分怎么样？以上是关于JavaScript图像裁剪/矩形选择图像的主要内容，如果未能解决你的问题，请参考以下文章