小程序开发框架_mpvue（六）卡通照片的实现思路

随着AI技术的发展，人脸识别可以识别到人的五官的位置，大小，甚至可以实时跟踪脸部运动轨迹，这样前端就产生了很多好玩的功能，比如人脸卡通，激萌和抖音都有这样的效果，我们看下激萌的实现效果

这样的效果是如何实现的？我们以左图来进行分析

这个效果图分为两个部分

1：背景
2：卡通人脸

其中卡通人脸又是由如下几个部分组成
1：原人物图片
2：素材图片，如特效耳朵图片，特效鼻子图片，特效嘴巴图片等等

所以为了实现如上效果，我们可以通过类似图片叠加的方式，逐一将背景，人物头像，特效素材进行叠加即可

但是我们要如何确定某张图片素材的叠加位置尼？这时候AI就要上场了，具体步骤如下

步骤一：首先用户进行拍照或者上传一张自己的照片
步骤二： AI对照片进行人脸识别，识别出基本特征，如眼睛的位置大小，鼻子的位置大小
步骤三：前端根据AI的计算结果将各个卡通素材叠加显示，就像photoshop里面的添加层一样

针对步骤二，根据服务端返回的人脸数据至少应包含
1）宽度，高度，用于设置元素的大小
2）左边距和上边距，用于设置元素的位置

所以前端核心代码如下

            layers: [{name:'hair', link:'xxxxxx', width: '160', height: '160' , top: '0', left: '0'},{name:'body', link:'xxxxxx', width: '160', height: '160' , top: '0', left: '0'},{name:'chin', link:'xxxxxx', width: '160', height: '160' , top: '0', left: '0'},{name:'eyeleft', link:'xxxxxx', width: '16', height: '16' , top: '74', left: '57'},{name:'eyeright', link:'xxxxxx', width: '16', height: '16' , top: '74', left: '85'},{name:'eyebrow', link:'xxxxxx', width: '48', height: '48' , top: '52', left: '55'},{name:'nose', link:'xxxxxx', width: '19', height: '19' , top: '82', left: '70'},{name:'mouth', link:'xxxxxx', width: '17', height: '17' , top: '96', left: '71'}]

其中
name字段表示人脸卡通某部位名称
link字段表示人脸卡通中某部位的默认使用元素图片
width/height表示人脸卡通中某部位的的大小
left/top表示人脸卡通中某部位的的位置

那么我们在mpvue中封装一个组件看下效果

<template><div class="preview-layer"><div class="layer"v-for="(layer, index) in layers":key="index":style="{height: layer.height + 'px'||5 + 'px', width: layer.width + 'px'||5 + 'px',left:layer.left + 'px', top: layer.top + 'px'}":type="layer.type"><img class="cartoon" :src="layer.link"></div></div>
</template><script>
/* eslint-disable */
export default {data() {return {layers: [{name:'hair', link:'xxxxxx', width: '160', height: '160' , top: '0', left: '0'},{name:'body', link:'xxxxxx', width: '160', height: '160' , top: '0', left: '0'},{name:'chin', link:'xxxxxx', width: '160', height: '160' , top: '0', left: '0'},{name:'eyeleft', link:'xxxxxx', width: '16', height: '16' , top: '74', left: '57'},{name:'eyeright', link:'xxxxxx', width: '16', height: '16' , top: '74', left: '85'},{name:'eyebrow', link:'xxxxxx', width: '48', height: '48' , top: '52', left: '55'},{name:'nose', link:'xxxxxx', width: '19', height: '19' , top: '82', left: '70'},{name:'mouth', link:'xxxxxx', width: '17', height: '17' , top: '96', left: '71'}]}},mounted() {},methods: {}
}
</script><style>
.preview-layer {width: 100%;height: 300px;position: absolute;
}
.layer {width: 100%;height: 100%;position: absolute;
}
.cartoon {width: 100%;height: 100%;
}
</style>

这样就很容易实现激萌/抖音那种人脸特效了

小程序开发框架_mpvue（六）卡通照片的实现思路相关推荐

常用小程序开发框架浅析
小程序第三方框架对比 ( wepy / mpvue / taro /Mpx /OKAM) 众所周知如今市面上端的形态多种多样,手机Web.ReactNative.微信小程序, 支付宝小程序, 快应用等 ...
如何选择适合自己的小程序开发框架
随着微信.支付宝等开放平台的壮大,移动应用生态市场的蓬勃发展,例如小程序已经成为各个企业和开发者的重要选择.为了提高小程序的开发效率和代码重用性,许多第三方开发框架应运而生. 准备为需要的朋友整理一些 ...
mpvue 微信小程序api_第三方框架与原生微信小程序开发框架性能之比较 | Q荐读...
作者 | 崔红保编辑 | 王莹自 2017年1月9日微信小程序诞生以来,历经 2 年多的迭代升级,已有数百万小程序上线,成为继 Web.iOS.Android 之后,第四大主流开发技术. 与之相随, ...
微信小程序_小程序开发框架
微信小程序_小程序开发框架微信小程序框架微信小程序小程序开发框架的目标是通过尽可能简单.高效的方式让开发者可以在微信中开发具有原生APP体验的服务. 框架提供了自己的视图层描述语言WXML和WXS ...
微信小程序怎么在wxml中插入多个图片_闲聊微信小程序开发框架(二)
在前面一篇文章中我们介绍了小程序开发框架的几个组成部分,今天就让我们了解一下小程序开发框架的底层架构是如何实现的. 小程序的开发框架成为MINA框架,通过上面的框架图我们可以看到三个部分.首先是Vie ...
小程序源码：AI微信小程序源码下载人脸照片AI转换动漫照片全新源码安装简单无需服务器域名-多玩法安装简单
这是一款AI人脸转动漫的一款微信小程序源码该款小程序源码无需服务器和域名搭建安装简单有多种风格转换模式可自选安装教程: 首先解压源码然后把源码上传到微信开发者工具打开另外设置一个合法域名合 ...
笔记3 小程序开发框架
[目录] 小程序开发框架 1 基本构成 (1)WXML-页面 (2)WXSS-样式 (3)WXS-对XML增强的脚本语言 (4)JavaScript-交互逻辑 2 详细介绍 (1)WXML (2)WX ...
小程序开发框架mpvue开发文档
什么是mpvue mpvue 继承自 Vue.js,其技术规范和语法特点与 Vue.js 保持一致.mpvue是一个微信小程序开发框架,他的语法特点和vue是一样的,除了一些微信小程序官方api以外. ...
如何选择微信小程序开发框架？2018年更新
微信小程序是一个建立不到两年的新兴科技生态体系.得益于中国科技发展的规模和速度,一百五十万人*的小程序开发者社区已经做出了非常实用的前端开发框架,进一步提高了小程序的开发效率. (*数据来源:腾讯 - ...

小程序开发框架_mpvue（六）卡通照片的实现思路

小程序开发框架_mpvue（六）卡通照片的实现思路相关推荐

最新文章

热门文章