Question

我熟悉一些网络技术，但目前被要求为下面的任务找到一个简单的解决方案 - 我很难决定采取什么方法。是否有现成的解决方案？这可以在javascript中完成吗？还是需要闪光灯？

将向用户显示照片，并且必须在照片中选择一个矩形（稍后将被裁剪）。选定的矩形必须满足特定的尺寸/定量要求。实际裁剪可以很容易地通过服务器完成，但我想询问建议什么是最好的方法来处理前端界面，这将采取选定的矩形坐标，可能会对它们进行基本计算（检查比率等）并经批准后发送给服务器。

这可以给你一个想法：

http://i.stack.imgur.com/Fp2H9m.png

无需特殊的移动支持 - 仅限桌面浏览器。

万分感谢，

FSG

Answer 1

这可以在Javascript中完成。基本思想是在容器中处理图像中的mousedown / mousemove / mouseup事件（将其限制为宽高比要求），然后在服务器上处理裁剪。

以下是一个例子：

http://jsbin.com/zeneziwofe/1/edit?html,css,js,output

（请注意，为简单起见，它仅适用于“正面”，从左/上开始，右/下结束..但这很容易纠正）

Answer 2

imgareaselect library的演示：

＆＃13;

$(document).ready(function () {
    $('#pic').imgAreaSelect({
        handles: true
    });
});

＆＃13;

img#pic{
  width:500px;
  margin:10px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://odyniec.net/projects/imgareaselect/jquery.imgareaselect.pack.js"></script>
<link rel="stylesheet" type="text/css"
        href="http://odyniec.net/projects/imgareaselect/css/imgareaselect-animated.css" />
<img id="pic" src="https://c4.staticflickr.com/4/3552/3360463235_8997ec6278_b.jpg" />

＆＃13;

Web界面允许用户在图像中选择矩形

2 个答案: