国庆微信换头像小程序实现原理及源码
又准备到国庆了,很多人又要开始换头像了,每到节日微信小程序换头像小程序流量都要大涨。
在网上经常看到很多微信小程序换头像的,比如国庆节,圣诞节等节日头像框,一键换头像,其实原理很简单,就是微信小程序授权登陆后,获取你原始头像,在你选择国旗等头像后和你授权获取头像合并生成一张新头像,另存下载却可。
本源码采用ColorUI小程序框架,加了很多素材头像框架图,无后台接口,功能也很简单,只有一个页面。
其主要功能和逻辑:
授权获取微信头像
头像边框分类及边框图,所有边框图必须放在远程服务器,图片太大小程序不允许
选择切换头像功能,
小程序canvas生成图片保存
分享功能
加入视频广告点击,适合流量主,赚广告费。
先上图看效果:
HTML源码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | < 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 > |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
· DeepSeek 解答了困扰我五年的技术问题
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库