javascript - Web 界面允许用户选择图像中的矩形

Question

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

用户将看到一张照片，并且必须在照片中选择一个矩形(稍后将被裁剪)。所选矩形必须满足一定的尺寸/比例要求。实际的裁剪可以很容易地由服务器完成，但我想征求建议，处理前端界面的最佳方法是什么，该界面将采用选定的矩形坐标，可能对它们进行基本计算(检查比率等)并在批准后将它们发送到服务器。

这给了你一个想法:

/image/Fp2H9m.png

不需要特殊的移动支持 - 即仅桌面浏览器。

感谢一百万，

FSG

Answer 1

imgareaselect library 的演示:

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

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

<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" />