#精品
小程序10行代码实现微信头像挂红旗,国庆节个性化头像

最近朋友圈里经常有看到这样的头像

小程序10行代码实现微信头像挂红旗,国庆节个性化头像
既然这么火,大家要图又这么难,作为程序员的自己当然要自己动手实现一个。

老规矩,先看效果图

 

小程序10行代码实现微信头像挂红旗,国庆节个性化头像

仔细研究了下,发现实现起来并不难,核心代码只有下面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>

实现效果图如下

小程序10行代码实现微信头像挂红旗,国庆节个性化头像

三,使用canvas来画图

其实我们实现微信头像挂红旗,原理很简单,就是把头像放在下面,然后把有红旗的相框盖在头像上面

小程序10行代码实现微信头像挂红旗,国庆节个性化头像

下面就直接把核心代码贴给大家

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() 
} 
}) 
}) 
})

来看下画出来的效果图

小程序10行代码实现微信头像挂红旗,国庆节个性化头像

四,头像加红旗画好以后,我们就要想办法把图片保存到本地了

小程序10行代码实现微信头像挂红旗,国庆节个性化头像

保存图片的代码也很简单。

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('用户点击确定'); 
} 
} 
}) 
} 
}) 
}

来看下保存后的效果图

小程序10行代码实现微信头像挂红旗,国庆节个性化头像

到这里,我的微信头像就成功的加上了小红旗了。

小程序10行代码实现微信头像挂红旗,国庆节个性化头像

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

1. 本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!496719279@qq.com
2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理,有奖励!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有钻石奖励和额外收入!

五域源码网 图片/素材/资源 小程序10行代码实现微信头像挂红旗,国庆节个性化头像 https://www.wuyuymw.com/15962.html

下一篇:

已经没有下一篇了!

常见问题
  • 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。
查看详情
  • 最常见的情况是下载不完整, 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘
查看详情
  • 如果是蓝奏云下载链接,请将lanzous替换成lanzoui 如果是蓝奏云下载链接,请将lanzous替换成lanzoux 以上方法均可
查看详情

相关文章

评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务

源码
小程序源码

模块描述

按钮标题