如何使用户仅选择整个照片的特定部分

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/