如何让用户选择的整个照片只有某些部分

Question

我想让用户选择照片。当他选择，他必须有裁剪照片的某一部分的选项。因为每一张照片是不一样的大小，因为我想它。因此，用户必须有该选项。

For example when a photo looks like this

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

Consider P as the corners of the photo

I want only the part where ones(1) are there

我怎样才能做到这一点。为了清楚的了解，我已经上传截图的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/