最近朋友圈里经常有看到这样的头像
既然这么火,大家要图又这么难,作为程序员的自己当然要自己动手实现一个。
老规矩,先看效果图
仔细研究了下,发现实现起来并不难,核心代码只有下面10行。
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()
}
})
一,首先要创建一个小程序
至于如何创建小程序,我这里就不在细讲了,我也有写过创建小程序的文章,也有路过相关的学习视频,去翻下我历史文章找找就行。
二,创建好小程序后,我们就开始来布局
布局很简单,只有下面几行代码。
<!-- 画布大小按需定制 这里我按照背景图的尺寸定的 -->
<canvas canvas-id="shareImg"></canvas>
<!-- 预览区域 -->
<view class='preview'>
<image src='{{prurl}}' mode='aspectFit'></image>
<button size='mini' open-type="getUserInfo" bindgetuserinfo="shengcheng" data-k="1">生成头像1</button>
<button size='mini' open-type="getUserInfo" bindgetuserinfo="shengcheng" data-k="2">生成头像2</button>
<button size='mini' open-type="getUserInfo" bindgetuserinfo="shengcheng" data-k="3">生成头像3</button>
<button size='mini' open-type="getUserInfo" bindgetuserinfo="shengcheng" data-k="4">生成头像4</button>
<button type='primary' bindtap='save'>保存分享图</button>
</view>
实现效果图如下
三,使用canvas来画图
其实我们实现微信头像挂红旗,原理很简单,就是把头像放在下面,然后把有红旗的相框盖在头像上面
下面就直接把核心代码贴给大家
let promise1 = new Promise(function(resolve, reject) {
wx.getImageInfo({
src: "../../images/xiaoshitou.jpg",
success: function(res) {
console.log("promise1", res)
resolve(res);
}
})
});
let promise2 = new Promise(function(resolve, reject) {
wx.getImageInfo({
src: `../../images/head${index}.png`,
success: function(res) {
console.log(res)
resolve(res);
}
})
});
Promise.all([
promise1, promise2
]).then(res => {
console.log("Promise.all", res)
//主要就是计算好各个图文的位置
let num = 1125;
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: num,
destHeight: num,
canvasId: 'shareImg',
success: function(res) {
that.setData({
prurl: res.tempFilePath
})
wx.hideLoading()
},
fail: function(res) {
wx.hideLoading()
}
})
})
})
来看下画出来的效果图
四,头像加红旗画好以后,我们就要想办法把图片保存到本地了
保存图片的代码也很简单。
save: function() {
var that = this
wx.saveImageToPhotosAlbum({
filePath: that.data.prurl,
success(res) {
wx.showModal({
content: '图片已保存到相册,赶紧晒一下吧~',
showCancel: false,
confirmText: '好哒',
confirmColor: '#72B9C3',
success: function(res) {
if (res.confirm) {
console.log('用户点击确定');
}
}
})
}
})
}
来看下保存后的效果图
到这里,我的微信头像就成功的加上了小红旗了。
源码我也已经给大家准备好了,有需要的同学在文末留言即可。
后面我准备录制一门视频课程出来,来详细教大家实现这个功能,敬请关注。
这里有我的代码。 正好还有个bug, 可以麻烦大家帮我看一下。生成头像是没问题的哈:
代码片段: https://developers.weixin.qq.com/s/I7GECFmd7gbn
我的问题:https://developers.weixin.qq.com/community/develop/doc/0006ce56be02a8d079395905556800
关于获取微信高清头像的问题,也找到了解决办法。
//获取高清微信头像
headimgHD(imageUrl) {
console.log(
'原来的头像'
, imageUrl);
imageUrl = imageUrl.split(
'/'
);
//把头像的路径切成数组
//把大小数值为 46 || 64 || 96 || 132 的转换为0
if
(imageUrl[imageUrl.length - 1] && (imageUrl[imageUrl.length - 1] == 46 || imageUrl[imageUrl.length - 1] == 64 || imageUrl[imageUrl.length - 1] == 96 || imageUrl[imageUrl.length - 1] == 132)) {
imageUrl[imageUrl.length - 1] = 0;
}
imageUrl = imageUrl.join(
'/'
);
//重新拼接为字符串
console.log(
'高清的头像'
, imageUrl);
return
imageUrl;
},
哇,这个厉害了。在这个特殊的时期发出来。点赞
大佬,分享一下源码吧
大哥,我也想要挂红旗
领取吧
另外求源码
大佬,我的头像糊了哎咋回事
阿里云双11免费领取4000元优惠券
http://t.cn/Ai3UXe6z
阿里云双十一特惠活动正式开启!
1核-2G-1M,1年86元,3年229。
2核-4G-3M,3年799元。
2核-8G-5M,3年1399元。
4核-8G-5M,1年5621元。
8核-16G-8M,3年12209元。
1核-1G-1M,香港服务器1年119块。
2核-4G-5M,香港服务器3年2926块。
现在下单就可以买。拼团链接:https://www.aliyun.com/1111/2019/group-buying-share?ptCode=F9E6C0F5F69CFE2439882EFC16E69926647C88CF896EF535&userCode=wbqjs7bw&share_source=copy_link