微信小程序实现国旗头像,国庆个性化头像。国庆头像
时间:2021-09-29
本文章向大家介绍微信小程序实现国旗头像,国庆个性化头像。国庆头像,主要包括微信小程序实现国旗头像,国庆个性化头像。国庆头像使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
请给我一面国旗@微信官方,先上生成的头像效果图
小程序的制作国庆头像的页面
利用 canvas 绘制头像:
核心代码:
wx.canvasToTempFilePath({ x: 0, y: 0, width: num, height: num, destWidth: num, destHeight: num, canvasId: 'shareImg', success: function(res) { that.setData({ prurl: res.tempFilePath }) wx.hideLoading() }, fail: function(res) { wx.hideLoading() } })
wx.canvasToTempFilePath的使用及各个属性介绍可到官方文档了解
https://developers.weixin.qq.com/miniprogram/dev/api/canvas/wx.canvasToTempFilePath.html
1,index.wxml
<!-- 画布大小按需定制 这里我按照背景图的尺寸定的 --> <view style="margin-top:88px;margin: 80px auto;"> <image src="../../images/20190906-logo2.png" height="50px" class="header"></image> </view> <view style="width: 80%; margin: 0 auto;"> <canvas canvas-id="shareImg" style="margin-left: 73px;margin-bottom:20px;"></canvas> </view> <view class="hot-biz" style="width: 85%;margin: 0 auto;border-radius: 10px;margin-bottom:15px;"> <view class="hot-top"> <view class="tx"> 热门 </view> </view> <view class="hot-item-list"> <scroll-view scroll-x> <view class="hot-biz-list" > <view class="item" wx:for="{{list}}" wx:key="id"> <image bindtap='selectImg' data-id='{{item}}' data-src='../../images/hat{{item}}.png' src="../../images/hat{{item}}.png" mode='aspectFill'></image> </view> </view> </scroll-view> </view> </view> <!-- 预览区域 --> <view class='preview'> <view style="display: flex;flex-wrap: wrap;width: 90%; margin: 0 auto;"> <button size='primary' lang="zh_CN" bindtap="getUserProfile" class="btn1">点我生成</button> <button size='primary' lang="zh_CN" bindtap="save" class="btn1">保存头像</button> </view> <button type='primary' open-type="share" bindtap='handleShare' class="btn2">分享好友,让TA也换上</button> </view>
2,index.wxss
/* 设置整个页面的背景图 */
page{ background-image: url('https://7778-wx-cloud-vyavv-1255811323.tcb.qcloud.la/20190829-bg.png?sign=482d59e33f6df0dd658b48cfabf69a4b&t=1632849707'); } .header{ width: 315px!important; height: 125px!important; } .btn1{ background-color:#EB9A41; margin:0 auto; border-radius: 50px; color:#ffffff; margin-bottom:26px; letter-spacing: 1px; font-weight: 700; width: 150px!important; height: 46px!important; line-height: 29px; display: flex; flex-direction: column; } .btn2{ background-color:#EB9A41!important; margin:0 auto; border-radius: 50px; letter-spacing: 1px; font-weight: 700; width: 310px!important; height: 46px!important; line-height: 29px; } /* list公共 */ .hot-biz{ margin-top: 10px; background: #fff; } .hot-biz .tx{ font-size: 15px; margin-left: 10px; padding: 9px 0; font-weight: 700; color: #FF5651; } .hot-top{ display: flex; } /* 热门壁纸 */ .hot-item-list{ margin: 0 auto; width: 94%; margin-bottom: 20px; } .hot-biz-list { display: flex; justify-content: space-between; /* flex-wrap: wrap; */ } .hot-biz-list .item { width: 50px; flex-direction: column; align-items: center; height: 50px; padding-right: 8px; } .hot-biz-list image { width: 50px; height: 50px; border-radius:5px; margin: 0 auto; display: block; } /* end */
3,index.js的核心代码
drawImg(avatarUrl){ let that = this; console.log("-- drawImg --"); // `${that.data.userInfo.avatarUrl}` let promise1 = new Promise(function(resolve, reject) { wx.getImageInfo({ src: avatarUrl, success: function(res) { console.log("promise1", res) resolve(res); } }) }); var index = that.data.defaultImg; // ../../images/head${index}.png // hat0.png avg.jpg let promise2 = new Promise(function(resolve, reject) { wx.getImageInfo({ src: `../../images/hat${index}.png`, success: function(res) { console.log(res) resolve(res); } }) }); Promise.all([ promise1, promise2 ]).then(res => { console.log("Promise.all", res) //主要就是计算好各个图文的位置 let num = 150; ctx.drawImage(res[0].path, 0, 0, num, num) ctx.drawImage('../../' + res[1].path, 0, 0, num, num) ctx.stroke() ctx.draw(false, () => { wx.canvasToTempFilePath({ x: 0, y: 0, width: num, height: num, destWidth: 960, destHeight: 960, canvasId: 'shareImg', success: function(res) { that.setData({ prurl: res.tempFilePath }) // wx.hideLoading() }, fail: function(res) { wx.hideLoading() } }) }) }) },
end:有兴趣可到以下小程序体验效果~
原文地址:https://www.cnblogs.com/QW-lzm/p/15353851.html
- 深入浅出解读卷积神经网络
- CNN模型之MobileNet
- 微博MySQL优化之路 - 肖鹏
- 一文看懂常用的梯度下降算法
- Oracle 12.2新特性掌上手册 - 第一卷 Availability
- 深度学习必备---用Keras和直方图均衡化---数据增强
- 基础|认识机器学习中的逻辑回归、决策树、神经网络算法
- CNN模型之ShuffleNet
- 目标检测算法之SSD
- Hadoop学习笔记
- 利用硬链接和truncate降低drop table对线上环境的影响
- 手把手教你实现GAN半监督学习
- 【超全】C语言小白最容易犯的17种错误,你中了几个?
- Oracle 12.2新特性掌上手册 - 第五卷 RAC and Grid
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- RabbitMQ 启动报错:Error: unable to perform an operation on node ‘rabbit@***‘. Please see diagnostics...
- MySQL|查询字段数量多少对查询效率的影响
- 如果MySQL事务中发生了网络异常?
- MySQL|update字段为相同的值是否会记录binlog
- 微服务配置 Config 与消息总线
- 贷款违约预测-Task5 模型融合
- Python字符串
- MYSQL logstash 同步数据到es的几种方案对比以及每种方案数据丢失原因分析。
- 手写“SpringBoot”:几十行代码基于Netty搭建一个 HTTP Server
- SpringCloud Sleuth 分布式请求链路追踪
- StarUML 使用方法
- nacos 服务注册与配置中心
- sql语句中(+)的作用
- 1.7 C++运算符
- 探花交友_搭建开发环境