头像生成器微信小程序代码

微信小程序需要wxml，wxss，js三种类型代码

1，wxml

<view class="container"><view class="title">兔年头像生成器</view><view class="description">选择一张图片，生成你的兔年头像吧！</view><image class="avatar" src="{{avatarUrl}}"></image><button class="btn" bindtap="onButtonClick">生成头像</button><view class="result" wx:if="{{result}}">{{result}}</view>
</view>

2，wxss

.container {display: flex;flex-direction: column;align-items: center;justify-content: center;height: 100vh;}.title {font-size: 24px;font-weight: bold;margin-bottom: 20px;}.description {font-size: 18px;color: #666;margin-bottom: 30px;}.avatar {width: 200px;height: 200px;margin-bottom: 30px;}.btn {width: 200px;height: 40px;background-color: #007aff;color: #fff;border-radius: 20px;}.result {margin-top: 30px;font-size: 18px;color: #f00;}

3，js

Page({data: {avatarUrl: '/images/default-avatar.jpg',result: ''},onButtonClick: function() {wx.chooseImage({count: 1,success: res => {const tempFilePath = res.tempFilePaths[0];wx.getImageInfo({src: tempFilePath,success: res => {wx.showLoading({title: '头像生成中',});const ctx = wx.createCanvasContext('canvas');ctx.drawImage(res.path, 0, 0, 400, 400);const rabbitImage = '/images/rabbit.png';ctx.drawImage(rabbitImage, 250, 0, 150, 150);const rabbitEarsImage = '/images/rabbit-ears.png';ctx.drawImage(rabbitEarsImage, 230, -20, 200, 200);const rabbitNoseImage = '/images/rabbit-nose.png';ctx.drawImage(rabbitNoseImage, 280, 120, 100, 100);ctx.draw(false, () => {wx.canvasToTempFilePath({canvasId: 'canvas',success: res => {this.setData({avatarUrl: res.tempFilePath,result: '头像已生成！'});wx.hideLoading(); // 隐藏加载动画},fail: err => {console.error(err);wx.hideLoading(); // 隐藏加载动画}});});},fail: err => {console.error(err);}});},fail: err => {console.error(err);}});}})

头像生成器微信小程序代码相关推荐

国庆节头像生成器微信小程序源码，可挂流量主【源码好又多】
头像生成小工具手机版截图大家好我是源码好又多,最近看到好友都有很火的国庆节头像,我就很纳闷怎么做的?问了好友,原来是小程序做的,我就闲着国庆没事做了一个. 头像生成器制作工具小程序介绍: 国庆节头像 ...
超多制作模板的姓氏头像生成器微信小程序源码
☑️ 编号:ym612 ☑️ 品牌:无 ☑️ 语言:小程序 ☑️ 大小:0.2MB ☑️ 类型:姓氏头像生成器 ☑️ 支持:小程序
姓氏头像制作小工具超多制作模板的姓氏头像生成器微信小程序源码最新版
内容目录一.详细介绍二.效果展示 1.部分代码 2.效果图展示三.学习资料下载一.详细介绍这是一款姓氏头像制作小工具内含丰富多样的模板提供制作以前的基本是固定位置生成这款制作支持拖拽调 ...
DIY背景美化生成器微信小程序源码
这是一款DIY美化器小程序支持上传自定义图片作为背景内容支持DIY输入,支持上传识别读取总得来说还是不错的,好了下面大家可以来看看小编的测试演示图: 小程序源码下载地址:(已更新)二维码DIY背 ...
小程序源码：朋友圈集赞万能截图生成器微信小程序源码下载
大家好这是一款朋友圈积攒截图小程序里面内涵三款样式生成,一款图文,一款分享,一款查看的样式也就是我们微信朋友圈所用到的样式就包含了里面的流量主那些可以用户自由的添加哈! 赞的数量那些可以用户自 ...
未来老婆查询生成器微信小程序源码流量主系列
https://wwt.lanzouy.com/i8MF40dp8ykb 未来老婆查询生成器微信小程序源码下载,支持流量主. 一款未来老婆或女朋友查询生成器, 玩法也就相当于类似之前很火的一款重生模拟 ...
微信小程序：自动采集头像大全微信小程序源码
这是一款以头像为主的一款微信小程序源码该小程序内包含了各种分类,各种样式都有可以说是目前最全的一款头像小程序源码五大分类情侣,女生,男生,卡通,风景每大分类下面都有N个小分类,每个小分类下面有 ...
微信小程序：流量主头像组合微信小程序
这是一个头像类型的小程序源码支持多种流量主比如激励视频,Banner,视频,插屏,原生模板等小程序内包含多种头像非类,都是自动采集比如男生头像,男声头像,动漫头像等等另外该小程序还支持姓氏头 ...
小程序源码：自动采集头像大全微信小程序
这是一款以头像为主的一款微信小程序源码该小程序内包含了各种分类,各种样式都有可以说是目前最全的一款头像小程序源码五大分类情侣,女生,男生,卡通,风景每大分类下面都有N个小分类,每个小分类下面有 ...

头像生成器微信小程序代码

头像生成器微信小程序代码相关推荐

最新文章

热门文章