html - 如何让用户只选择整张照片的特定部分
问题描述
我想让用户选择一张照片。当他选择它时,他必须可以选择裁剪照片的某个部分。因为每张照片都不是我想要的大小。所以用户必须有选择权。
例如,当一张照片看起来像这样时
P=======================================P
||..................................... ||
||..................................... ||
||........... 11111111111...............||
||............11111111111...............||
||............11111111111...............||
||......................................||
||......................................||
||......................................||
||......................................||
P========================================P
将 P 视为照片的角
我只想要那里的ones(1)
部分
我怎样才能做到这一点。为了清楚理解,我上传了 Whatsapp 是如何做到的截图。我想要它以同样的方式。
看这个whatsapp的截图,我只需要脸,如图所示。请记住,我不希望自动检测面部,它应该只由用户选择。
解决方案
一个选项可能是使用 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/
推荐阅读
- javascript - “Uncaught SyntaxError: Unexpected token l in JSON at position 0”,但仍然有效,为什么?
- rest - 使用像 Nuxt 这样的服务器端渲染来保护 API
- typescript - React Native useState 和 useEffect 交互
- spring - 收件人地址
不是 553 5.1.3 有效的 RFC-5321 地址 - html - Html 必需属性未使用 html 选择标记触发
- python - Scrapy 项目更改列名
- c# - 我可以通过 c# 将数据上传到 firebase 吗?
- python - Python; 使用可变文件名在远程服务器上创建文件
- image - 如何在 Flutter 应用中使用 MQTT 协议下载从另一台设备发送的图像?
- amazon-s3 - 使用 Azure 数据工厂将大量文件 (400k) 从 S3 存储桶下载到 Azure Datalake Gen2