国庆微信换头像小程序实现原理及源码

又准备到国庆了，很多人又要开始换头像了，每到节日微信小程序换头像小程序流量都要大涨。
在网上经常看到很多微信小程序换头像的，比如国庆节，圣诞节等节日头像框，一键换头像，其实原理很简单，就是微信小程序授权登陆后，获取你原始头像，在你选择国旗等头像后和你授权获取头像合并生成一张新头像，另存下载却可。
本源码采用ColorUI小程序框架，加了很多素材头像框架图，无后台接口，功能也很简单，只有一个页面。

其主要功能和逻辑：

授权获取微信头像
头像边框分类及边框图，所有边框图必须放在远程服务器，图片太大小程序不允许
选择切换头像功能，
小程序canvas生成图片保存
分享功能
加入视频广告点击，适合流量主，赚广告费。
先上图看效果：

 

 HTML源码：

<view class="wrapper">
    <view class="container">
        <image class="page-bg _img" mode="widthFix" src="{{bgImage}}"></image>
        <view class="avatar-container" style="{{'margin-top:'+(showHeight+'px')+';'}}" id="avatar-container">
        <!-- 屏蔽上传iocn -->
            <!-- <block wx:if="{{avatarImage}}">
                <view class="xiangji-icon"><label data-event-opts="{{[['tap',[['chooseImage',['$event']]]]]}}" class="iconfont iconxiangji2 _span" bindtap="__e"></label></view>
            </block> -->
            <image class="avatar-img _img" id="avatar-img" src="{{avatarImage}}"></image>
            <block wx:if="{{currentFrame}}">
                <image class="avatar-frame _img" src="{{frameImage}}"></image>
            </block>
            <block wx:if="{{!avatarImage}}">
                <view class="empty-avatar-view">
                    <image class="empty-avatar _img" src="/static/image/avatar_empty.svg"></image>
                    <button class="cu-btn round action-btn btn-primary" id="btn-choose-img"  bindtap="getUserProfile">获取头像</button>
                </view>
            </block>
            <view class="prev _p" wx:if="{{!avatarImage}}" bindtap="getUserProfile"><label class="iconfont iconqianfanicon _span"></label></view>
            <view class="next _p" wx:if="{{!avatarImage}}" bindtap="getUserProfile"><label class="iconfont iconhoufanicon _span"></label></view>

            <view class="prev _p" wx:if="{{avatarImage}}" data-type="pre" bindtap="cutover"><label class="iconfont iconqianfanicon _span"></label></view>
            <view class="next _p" wx:if="{{avatarImage}}" data-type="next"  bindtap="cutover"><label class="iconfont iconhoufanicon _span"></label></view>
        </view>
        <view class="_div"><canvas class="canvas" canvasId="canvas"></canvas></view>
        <view class="panel assets-container">
            <view style="display:flex;" clss="category-list" class="_div">
                <block wx:for="{{categoryList}}" wx:for-item="item" wx:for-index="index" wx:key="index">
                    <view class="_div"><text class="{{['category ',item.id===currentCategory?'active':'']}}" data-categroy-id="{{item.id}}" bindtap="imageListTab">{{item.name}}</text></view>
                </block>
            </view>
            <scroll-view class="assets-scroll-view" scroll-into-view="{{bottomId}}" scrollX="true">
                <block wx:for="{{imageList}}" wx:for-item="item" wx:for-index="index" wx:key="index">
                    <view class="{{['assets','_div',index===savedNum&&avatarImage?'active-border':'']}}" id="{{'img'+index}}">
                        <image src="{{item.src}}" data-index="{{index}}" data-src="{{item.src}}"  bindtap="selectAvatarImage" class="_img"></image>
                    </view>
                </block>
            </scroll-view>
        </view>
        <view class="flex justify-around">
        <button class="cu-btn round action-btn" openType="share" id="btn-choose-img"  bindtap="share">分享给朋友</button>
        <button class="cu-btn round action-btn btn-primary" id="btn-save" bindtap="saveCans">保存到相册</button></view>
        <view class="ad-container">
            <view binderror="__e" bindload="__e" unitId="adunit-43f7c4189a8e7c35" class="_div"></view>
        </view>
    </view>
</view>

　　源码演示：https://www.uihtm.com/wxapp/19102.html