【上传头像】支持人脸智能定位和防变形压缩剪切(附上传教程和三组示例)

公告 未结 精帖 6 1544
你的瓦刀
你的瓦刀 站长 2020年3月31日 17:56 编辑
点击群号免费加入尼特社区交流群:813128395
<p id="descriptionP"><p>从即日起,本站开始支持上传头像啦~</p><p><span style="font-weight: bold;">并且,我们对用户上传头像进行了专门的优化,在简便用户操作的同时,完美地提升了头像展现的友好度,<span style="color: rgb(255, 0, 0);">即支持人脸智能定位和防变形压缩剪切</span>。未来我们将通过api的形式,开放这一接口。</span></p><p>废话不多说,直接看示例!</p><h2 id="ff00c2d2-24db-1b5f-c684-e06ec0ba22df"><span style="font-weight: bold;">一、简单示例</span></h2><p>先来欣赏一张高清大图(734 x 1059):</p><p></p><p class="video"></p><p><img src="https://qcdn2.niter.cn/demo/boy.jpg" style="max-width:100%;"><br></p><p>通常情况下,用户头像是长宽相等的正方形,绝大多数网站和app上都是推荐用户上传“方图”,然而实际上,用户不大可能为了一张头像去自己做剪切工作。</p><p><br></p><p>假设上面那张图是用户上传的头像,通常的网站会有三种处理方式(以下为168*168头像为例):</p><p><br></p><h3 id="1aff76bd-2e7f-49a1-f3c9-f38eb6862900"><span style="font-weight: bold;">第一种方式</span>:</h3><p>粗暴处理,强制压缩为168*168,<span style="font-weight: bold;">对于长宽比例较大的图片将会严重变形</span>,下面这张图可以看出,人脸已经被拉宽了!(如下图所示)(推荐指数:1颗星)</p><p><img src="https://qcdn.niter.cn/demo/boy_meitu_1.jpg" style="max-width:100%;"><br></p><p><span style="font-weight: bold;"><br></span></p><h3 id="13259ded-bd87-8bc6-8e5f-4fccc9c9b398"><span style="font-weight: bold;">第二种方式</span>:</h3><p>从图片正中心开始截取,取高或者宽的最小值作为正方形边长,生成n*n的图片,再压缩为168*168。虽然图片不会变形,但是<span style="font-weight: bold;">对于主要元素(人脸等)不在中间的图片,难以将人脸等主要元素完美地展现在正中央,导致损失一些元素</span>。(如下图所示)(推荐指数:三颗星)</p><p></p><p class="video"></p><p><img src="https://qcdn.niter.cn/demo/boy.jpg?imageMogr2/crop/168x168/gravity/center" style="max-width:100%;"><br></p><p><span style="font-weight: bold;"><br></span></p><h3 id="e2694f26-d475-eed5-893a-9446d949980e"><span style="font-weight: bold;">第三种方式</span>:</h3><p>手动截取,用户上传图片后通过提供的图片编辑工具对图片进行手动截取。很多网站采取的方式,可以更好的展现头像,但是流程繁琐,<span style="font-weight: bold;">极大地影响用户体验</span>(推荐指数:四颗星)&nbsp;&nbsp;<br></p><p><br></p><p>以上三种方式都有各自的缺陷,本站采用以下方式:</p><h3 id="8efdf987-11fe-6415-2e06-4a3e6547f27b"><span style="font-weight: bold;">第四种方式</span>:</h3><p><span style="color: rgb(255, 0, 0);">人脸智能定位和防变形压缩剪切</span>。用户上传图片后无需进行任何操作,生成完美地头像。在简化用户操作流程,提升用户体验的同时,将人脸更精准的展现在头像的正中央,极大地提高了头像展现的友好程度!(如下图所示)(<span style="color: rgb(255, 0, 0);">推荐指数:五颗星+</span>)&nbsp;&nbsp;&nbsp;&nbsp;</p><p></p><p class="video"></p><p><img src="https://qcdn.niter.cn/demo/boy.jpg?imageMogr2/scrop/168x168" style="max-width:100%;"><br></p><p></p><p><br></p><p></p><h2 id="9024cf57-d18a-fe73-ea15-e668ccade4dd"><span style="font-weight: bold;">二、上传教程</span></h2><div>&nbsp; &nbsp; &nbsp; &nbsp;点击导航栏“我的头像”-“基本设置”-“头像”-“上传头像”,即可,获取直接点击<a href="/user/set/info#avatar" target="_blank">此链接</a>直达。</div><div><img src="https://qcdn.niter.cn/upload/user/98/img/20200204235244_37kna.png" style="max-width:100%;"><img src="https://qcdn.niter.cn/upload/user/98/img/20200204235245_xlpik.png" style="max-width: 100%;"><br></div><p></p><p></p><p><br></p><h2 id="a6a0d29f-9eec-fe6e-d4d1-d41e0a3469c3"><span style="font-weight: bold;">三、更多示例</span></h2><div><p>一个示例不够说明问题,下面给出更多示例。</p><p>1.韩红</p><p><img src="https://qcdn.niter.cn/demo/hanhong.jpeg" style="max-width:100%;"><br></p><p>第一种方式:(变成瘦子了..)</p><p><img src="https://qcdn.niter.cn/demo/hanhong_1.jpg" style="max-width:100%;"><br></p><p>第二种方式:(人挤到边边上了..)&nbsp;</p><p><img src="https://qcdn.niter.cn/demo/hanhong.jpeg?imageMogr2/crop/168x168/gravity/center" style="max-width:100%;"><br></p><p><span style="font-weight: bold;">本站优化:</span>&nbsp;(不变形的同时,人更靠中心)<br></p><p><img src="https://qcdn.niter.cn/demo/hanhong.jpeg?imageMogr2/scrop/168x168" style="max-width:100%;"><br></p><p><br></p><p>2.boy2</p><p><img src="https://qcdn.niter.cn/demo/boy2.jpg" style="max-width:100%;"><br></p><p>第一种方式:(压缩变形,人变矮了)</p><p><img src="https://qcdn.niter.cn/demo/boy2_2.jpg" style="max-width:100%;"><br></p><p>第二种方式: (元素丢失,头发没了...)</p><p><img src="https://qcdn.niter.cn/demo/boy2.jpg?imageMogr2/crop/168x168/gravity/center" style="max-width:100%;"><br></p><p><span style="font-weight: bold;">本站优化:</span>&nbsp;(人脸靠中央展示)<br></p><p><img src="https://qcdn.niter.cn/demo/boy2.jpg?imageMogr2/scrop/168x168" style="max-width:100%;"><br></p></div><p></p><p></p><p><br></p><p><span style="color: rgb(255, 0, 0);">多说无用,快去试试吧,有任何BUG和建议可以在下方留言。</span></p><p></p></p><p><br></p>
收藏(3)  分享
相关标签: 教程 公告 讨论 java springboot
注意:本文归作者所有,未经作者允许,不得转载
6个回复
  • c.ja
    2020年3月11日 12:50
    请问人工智能是怎么对接web端的face[思考]
    0 1
  • c.ja
    2020年3月11日 12:59
    希望站长通过放送教学贴和学习资料引流face[偷笑]
    3 1
  • ???
    2020年3月12日 11:52
    韩红测试 过分了哦face[doge]
    1 1