一：先看效果
AR
二: 整体思路以及用到的第三方图像识别算法
1.调用微信小程序的相机功能（主要使用实时帧数据，已附链接）；
2. 将获取到的相机实时帧数据转成base64.调取第三方图像识别算法；
该文档里边有详细的介绍怎么使用去训练我们要识别的图片或者物体，如果有问题可以随时私信我！
3.第三方识别接口识别成功以后会告诉前端扫描的是什么，以便我们去判断该播放哪一个IP人物形象的序列帧动画；
4.提前准备好我们要用到的IP人物资源，我这里是用的序列帧动画（一张张帧照片拼接起来一个人物动画），这些资源建议放在服务器上；
5.创建画布，通过小程序的canvas对所有帧动画进行渲染以及播放；
三：附上全部代码
1.index.wxml
<view class="content"> <block wx:if="{{!isShowCamera}}"> <view class="scan" bindtap="open"> <view class="pup"> <view class="pupTitle">活动规则介绍</view> <view class="pupbox"> <view class="top"> <view class="list"> <image mode="aspectFit" src="../../img/1.png"></image> </view> <view class="list"> <image mode="aspectFit" src="../../img/2.png"></image> </view> <view class="list"> <image mode="aspectFit" src="../../img/3.png"></image> </view> <view class="list"> <image mode="aspectFit" src="../../img/4.png"></image> </view> <view class="list"> <image mode="aspectFit" src="../../img/5.png"></image> </view> <view class="list"> <image mode="aspectFit" src="../../img/6.png"></image> </view> </view> <view> <view class="pupbot">纸上的人物竟然还能动起来？</view> <view class="pupbot">不信？！那就对着人物形象扫一扫</view> <view class="pupbot">解锁更多精彩吧</view> </view> </view> </view> <button>知道啦</button> </view> </block> <block wx:else> <view class="page-section page-section-spacing swiper" style="height: 100vh;"> <swiper easing-function="easeOutCubic" bindchange="swiperChange" style="height: 100vh;" vertical="{{true}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}"> <block> <swiper-item style="height: 100vh;"> <block> <view class="mask" style="height: 100vh;background: transparent;"> <camera class="camera" device-position="back" flash="off" frame-size="medium" bindinitdone="bindinitdone"> <cover-view hidden="{{!show}}" class='scan-animation' animation="{{animation}}"> <cover-image src="../../img/saomiao.png"></cover-image> </cover-view> <canvas class="prize-frame-canvas" type="2d" id="oneTitleFrameCanvas" style="width: {{width}}rpx;height: {{height}}rpx"></canvas> <block> <view style="display: flex;justify-content: center;"> <text wx:if="{{!textShow}}" class="bottom">扫一扫，开启你的奇妙体验</text> <view wx:if="{{textShow}}" class="bottom2"> <image class="shanghua" src="../../img/shanghua.png"></image> <text>上划发现更多精彩</text> </view> <view wx:if="{{textShow}}" class="left" hover-class="leftActive" bindtap="toIndex">再玩一次</view> </view> </block> </camera> </view> </block> </swiper-item> <swiper-item wx:if="{{textShow}}" catchtouchmove='stopTouchMove' style="height: 100vh;"> <block> <view class="box" style="background-color: block;"> </view> </block> </swiper-item> </block> </swiper> </view> </block> </view> <canvas canvas-id="myCanvas"></canvas>
