如何让用户只选择整张照片的特定部分

Question

我想让用户选择一张照片。当他选择它时，他必须可以选择裁剪照片的某个部分。因为每张照片都不是我想要的大小。所以用户必须有选择权。

例如当一张照片看起来像这样时

P=======================================P
||..................................... ||
||..................................... ||
||........... 11111111111...............||
||............11111111111...............||
||............11111111111...............||
||......................................||
||......................................||
||......................................||
||......................................||
P========================================P

将 P 视为照片的角

我只想要ones(1) 所在的部分

我怎样才能做到这一点。为了清楚理解，我上传了 Whatsapp 是如何做到的截图。我想要它以同样的方式。

看这个whatsapp的截图，我只需要脸，如图所示。 请记住，我不希望自动检测面部，它应该只由用户选择。

这是截图 https://photos.app.goo.gl/UZx4k4YQFSNg1JMt5

Answer 1

一个选项可以是使用 html 地图区域

<img src="https://via.placeholder.com/350x150" alt="imagemap" usemap="#imagemap">

<map name="imagemap">
  <area shape="rect" coords="100,100,200,200" alt="Sun" href="#" >
</map>

https://www.w3schools.com/tags/tag_area.asp

编辑：如果您正在寻找自定义裁剪器，这个 js 库可以帮助您https://fengyuanchen.github.io/cropperjs/