微信小程序之用canvas给微信头像加小红旗(canvas无法使用网络资源绘画)

微信小程序之使用canvas给微信头像加小红旗

情境：新中国成立70周年，普天同庆。昨天看到朋友圈中被刷屏的@官方微信给自己的头像加小红旗。服务器被卡爆，很多朋友说换头像不成功。
任务：打算自己写一个小程序实现这个换小红旗的功能。
行动：于是去看了一眼给头像加小红旗的入口页面，看了下里面的功能。
结果：自己写了一个小程序并实现了加小红旗的功能，与官方的不完全一致，功能点是差不多的。
实现效果如下：

其实这里面主要就是读取了一下用户登录的信息，头像是从用户信息中取的，然后小图标是在网上找了几个自己比较喜欢的图标放上去的。
首先分析一下整个过程：先读取用户的登录信息，将用户头像渲染出来，然后把自己喜欢的小图标放在右下角，最后使用canvas把用户的头像和小图标画出来再保存到本地相册。
小程序存储用户信息中返回的用户头像是一个链接，在这里面遇到的坑就是canvas无法直接用链接进行绘画，所以需要使用getImageInfo方法把这个链接转换成本地资源才能进行绘画
我的wxml代码如下：

<view class="container"><canvas canvas-id="shareImg" style="width:200px;height:200px;position:absolute;left:100%"></canvas><view class="userinfo"><button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo" class="userBtn"> 获取头像 </button><block wx:else><text class="title">点击头像切换头像图标</text><image bindtap="change" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"><view class="photo" style="background:url({{images[index]}}) no-repeat top/cover"></view></image><button class="save" bindtap="downloadFile">保存头像</button></block></view>
</view>

wxss代码如下：

/**index.wxss**/
.userBtn {margin-top: 250rpx;
}.userinfo {display: flex;flex-direction: column;align-items: center;
}.title{margin: 230rpx 0 30rpx;font-size: 32rpx;color: #fff;
}.userinfo-avatar {width: 230rpx;height: 230rpx;border-radius: 20rpx;border: 10rpx solid #fff;position: relative;
}.photo {width: 80rpx;height: 80rpx;position: absolute;border-radius: 5rpx;bottom: 0;right: 0;
}.save {width: 230rpx;font-size: 24rpx;color: #fff;background: rgb(255, 174, 0);margin-top: 15rpx;
}

重要的是以下的js代码

//index.js
//获取应用实例
const app = getApp()Page({data: {userInfo: {},hasUserInfo: false,canIUse: wx.canIUse('button.open-type.getUserInfo'),images: ["../../images/0.jpg", "../../images/1.jpg", "../../images/2.jpg", "../../images/3.jpg", "../../images/4.jpg", "../../images/5.jpg", "../../images/6.jpg"],index: 0,canvasHidden: true,image: ""},downloadFile(event) {//绘制canvas图let that = this;const ctx = wx.createCanvasContext('shareImg')wx.getImageInfo({src: that.data.userInfo.avatarUrl,success: function(res) {that.setData({image: res.path})// console.log(res)ctx.drawImage(that.data.image, 0, 0, 200, 200)ctx.drawImage('../../images/' + that.data.index + '.jpg', 120, 120, 80, 80)ctx.setTextAlign('left')ctx.stroke()ctx.draw()}})//获取相册授权wx.getSetting({success(res) {if (!res.authSetting['scope.writePhotosAlbum']) {wx.authorize({scope: 'scope.writePhotosAlbum',success() {that.savaImageToPhoto();}})} else {that.savaImageToPhoto();}}})},savaImageToPhoto: function() {let that = this;wx.showLoading({title: '努力生成中...'})wx.canvasToTempFilePath({x: 0,y: 0,width: 200,height: 200,destWidth: 200,destHeight: 200,canvasId: 'shareImg',success: function(res) {// console.log(res)wx.hideLoading()wx.saveImageToPhotosAlbum({filePath: res.tempFilePath,success(res) {wx.showModal({content: '图片已保存到相册了',showCancel: false,confirmText: '朕知道啦',confirmColor: '#72B9C3',success: function(res) {if (res.confirm) {// console.log('用户点击确定');that.setData({hidden: true})}}})}})},fail: function(res) {console.log(res)}})},change(event) {if (this.data.index > 5) {this.setData({index: 0})} else {this.setData({index: this.data.index + 1})}// console.log(this.data.index, event)},onLoad: function() {if (app.globalData.userInfo) {this.setData({userInfo: app.globalData.userInfo,hasUserInfo: true})} else if (this.data.canIUse) {// 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回// 所以此处加入 callback 以防止这种情况app.userInfoReadyCallback = res => {this.setData({userInfo: res.userInfo,hasUserInfo: true})console.log(res)}} else {// 在没有 open-type=getUserInfo 版本的兼容处理wx.getUserInfo({success: res => {app.globalData.userInfo = res.userInfothis.setData({userInfo: res.userInfo,hasUserInfo: true})}})}},getUserInfo: function(e) {console.log(e)app.globalData.userInfo = e.detail.userInfothis.setData({userInfo: e.detail.userInfo,hasUserInfo: true})}
})

这里还有一点要注意的是需要在本地设置中勾选此项不校验合法域名

以上代码即可实现想要的效果，这里遇到过的坑是canvas不能使用hidden隐藏，canvas绘画不能使用网络资源。下一篇博客中我会详细说明这里的坑怎么填。

微信小程序之用canvas给微信头像加小红旗(canvas无法使用网络资源绘画)相关推荐

【多功能小程序】古风姓氏圣诞国庆头像生成小程序源码
多功能生成头像小程序姓氏头像圣诞头像国庆头像形状头像公式头像下载地址:
【微信小程序宝典】从零开始做微信小程序开发
开发前必读简要基于大量无效开发,无法上线的案例,所以开发前部分知识十分重要:| 链接微信小程序个人注册简单步骤打开mp.weixin.qq.com,点击右上角立即注册,进入小程序注册| 链接微 ...
微信小程序周报（第十二期）-极乐小程序商店出品
重要:极乐商店域名变更:wxapp.dreawer.com/变更为store.dreawer.com/ 每周一笑对于各种凌乱的电脑问题,手机问题,其他行业的人,以为程序员们,什么都会,程序员中,女程 ...
微信小程序canva生成图片，长按图片识别小程序二维码详解
下面这个图片就是通过图片和文字等内容合成的一张带有微信小程序二维码的图片,在小程序内部长按可以识别出来: 基本思路是先将内容用canvas排好版,然后把该canvas转化成图片:图片利用wx.prev ...
微信小程序-从零开始制作一个跑步微信小程序 1
小编推荐:Fundebug专注于JavaScript.微信小程序.微信小游戏,Node.js和Java实时BUG监控.真的是一个很好用的bug监控费服务,众多大佬公司都在使用. 前言我已经把全部代码 ...
一起脱去小程序的外套和内衣 - 微信小程序架构解析
推荐理由: 微信小程序从一出现就引起很多人的关注,它的公测就掀起了学习小程序开发的浪潮:今天在微信公众平台看到一条公告,小程序开始开放个人开发者申请注册,个人用户可以访问微信公众平台,扫码验证个人身份 ...
微信小程序开发（3） - 微信小程序调用摄像头静默隐藏拍照功能实现方式
微信小程序最近非常火热,小编最近做了一个微信小程序开发新项目,使用小程序开发考试系统,在使用App参加考试的时候调用摄像头抓拍用户是否作弊,在开发过程中遇到点问题,下面小编把问题描述和解决方法分享给大 ...
小程序确定取消弹窗_微信小程序定制开发价格确定条件？
点击上方"蓝字"关注我们! 小程序做为变现微信流量的重要载体,已经成为了越来越多商家变现微信流量的主要方式,而在制作相应小程序的时候,我们知道是需要支付相应费用的,而开发费用也是有 ...
获取小程序用户信息+java_java获取微信小程序用户信息
第一步:获取openid.session_key等信息. /** * 获取微信小程序的用户openid和session_key/unionid * 返回格式:{"session_key&qu ...

微信小程序之用canvas给微信头像加小红旗(canvas无法使用网络资源绘画)

微信小程序之使用canvas给微信头像加小红旗

微信小程序之用canvas给微信头像加小红旗(canvas无法使用网络资源绘画)相关推荐

最新文章

热门文章