小程序头像挂件-canvas生成图片

近期因为假日来临，微信官方的请给我一面红旗活动引起朋友圈的热潮，做了头像挂件demo,代码如下；

wxml页面布局；（弹窗的样式没写）
<canvas canvas-id="flagctx"></canvas>
<view class='container'>  <view class='mask' wx:if='{{!userInfo}}'><view class='dialog autoorize'>    <button>取消</button><button open-type='getUserInfo' bindgetuserinfo='getInfo'>确定</button></view></view><scroll-view class="scroll-avatar" scroll-x="true"  wx:if='{{userInfo}}'><view class='avatar-preview-container'><block wx:for="{{flagList}}" wx:key='{{index}}'><view class='avatar-item' bindtap='changeAvatar' data-idx='{{index}}'><image src="{{userInfo.avatarUrl}}" mode="aspectFit"  /><image src="{{item}}" mode="aspectFit"  />  </view></block>  </view>   </scroll-view><button  wx:if='{{userInfo}}' bindtap='saveAvatar'>保存头像</button>
</view>

wxss样式
.big-avatar{width:100%;height: 300rpx; position: relative;
}
.big-avatar image{width:300rpx;height: 300rpx;box-sizing:border-box;position: absolute;top:0;left:188rpx;
}
.scroll-avatar{width:90%;height: 200rpx;margin:10rpx auto;
}
.avatar-preview-container{display: flex;justify-content:space-between;align-items: center;flex-wrap: nowrap;
}
.avatar-item{width:150rpx;height:150rpx;position: relative;margin:40rpx 30rpx;flex-shrink: 0;flex-grow: 0;
}
.avatar-item image{width:150rpx;height: 150rpx;position: absolute;left:0;top:0;
}
canvas{position:fixed;left:55rpx;top:0;width: 640rpx;height: 640rpx;background: #fff;
}

js文件
//Page Object
var ctx = wx.createCanvasContext('flagctx')
const app = getApp()
Page({data: {avatar: '',userInfo: '',flagList: ['../../images/head0.png', '../../images/head1.png', '../../images/head2.png', '../../images/head3.png'],idx:1,loadAvatar:''},//options(Object)onLoad: function (options) {var that = this  console.log(app);if (app.globalData.userInfo) {that.setData({userInfo: app.globalData.userInfo})that.produceAvatar() } else {// 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回所以此处加入 callback 以防止这种情况app.userInfoReadyCallback = res => {that.setData({userInfo: res.userInfo})console.log(that.data.userInfo);that.produceAvatar() }}// that.produceAvatar() },getInfo(e) {console.log(e.detail.userInfo);this.setData({userInfo: e.detail.userInfo})},changeAvatar(e){var that = this;console.log(e.currentTarget.dataset.idx);this.setData({idx:e.currentTarget.dataset.idx})that.produceAvatar() },drawImage(avatarUrl,index){var that = this;wx.showLoading({title: '生成中', //提示的内容,mask: true, //显示透明蒙层，防止触摸穿透,success: res => {}});var promise1 = new Promise(function(resolve,reject){wx.getImageInfo({src: avatarUrl, //图片的路径，可以是相对路径，临时文件路径，存储文件路径，网络图片路径,success: res => {console.log(res.path);resolve(res)}});})var promise2 = new Promise(function(resolve,reject){wx.getImageInfo({src: `../../images/head${index}.png`, //图片的路径，可以是相对路径，临时文件路径，存储文件路径，网络图片路径,success: res => {console.log(res.path);resolve(res)}});})Promise.all([promise1,promise2]).then(res=>{console.log(res);let num = 273;ctx.drawImage(res[0].path,0,0,num,num)ctx.drawImage(`../../${res[1].path}`,0,0,num,num)ctx.draw(false,()=>{wx.canvasToTempFilePath({x:0,y:0,width:num,height:num,destWidth: num,destHeight: num,canvasId: 'flagctx',success:res=>{console.log(res);wx.hideLoading();that.setData({loadAvatar:res.tempFilePath})   console.log(that.data.loadAvatar);         },fail:res=>{wx.hideLoading();}})})})},  // 获取高清图像headimgHd(imgUrl){var that = this;console.log('原头像',that.data.userInfo.avatarUrl);imgUrl = imgUrl.split('/')//把头像的路径切成数组//把大小数值为 46 || 64 || 96 || 132 的转换为0,0代表高清的图像if(imgUrl[imgUrl.length-1] && imgUrl[imgUrl.length-1]!=0){imgUrl[imgUrl.length-1]=0}//重新拼接为字符串imgUrl = imgUrl.join('/')console.log('高清头像',imgUrl);return imgUrl},produceAvatar(){var that = this  var avatarUrl = that.headimgHd(that.data.userInfo.avatarUrl)var index = that.data.idxthat.drawImage(avatarUrl,index)},saveAvatar(){var that = this   console.log(1111111,that.data.loadAvatar);   wx.saveImageToPhotosAlbum({filePath: that.data.loadAvatar, //图片文件路径，可以是临时文件路径也可以是永久文件路径，不支持网络图片路径,success: res => {console.log('保存成功',res);},fail: () => {},complete: () => {}});},onReady: function () {},onShow: function () {},onHide: function () {},onUnload: function () {},onPullDownRefresh: function () {},onReachBottom: function () {},onShareAppMessage: function () {},onPageScroll: function () {},//item(index,pagePath,text)onTabItemTap: function (item) {}
});

说明：源代码来自’编程小石头’，根据个人需求做了更改。

小程序头像挂件-canvas生成图片相关推荐

微信小程序之通过Canvas生成图片保存到手机相册
需求描述: 电商项目中有很多需要分享邀请的海报页面,需要带上自己的小程序码,并且保存在本地,然后分享到朋友圈. 解决方法: 将海报通过wx.createCanvasContext绘制到画布canvas ...
微信壁纸小程序+头像挂件+头像
在插件市场点击"导入插件并试用"或者购买源码授权版同意付费插件试用协议选择绑定的服务空间勾选部署云函数,初始化db_init后(全部勾选),点击"直接部署服务空间& ...
微信小程序：使用canvas 生成图片并分享
废话不多说直接上代码!!!! html <canvas canvas-id="positionPoster" style="width: 414px; height ...
微信小程序之用canvas给微信头像加小红旗(canvas无法使用网络资源绘画)
微信小程序之使用canvas给微信头像加小红旗情境:新中国成立70周年,普天同庆.昨天看到朋友圈中被刷屏的@官方微信给自己的头像加小红旗.服务器被卡爆,很多朋友说换头像不成功. 任务:打算自己写一 ...
在H5、微信小程序中使用canvas绘制二维码、分享海报
在H5.微信小程序中使用canvas绘制二维码.分享海报文章目录在H5.微信小程序中使用canvas绘制二维码.分享海报前言一.canvas绘制二维码 1.H5中使用canvas 2.微信小程 ...
小程序之保存canvas生成商品图片附加小程序二维码分享到朋友圈
小程序之保存canvas生成商品图片附加小程序二维码分享到朋友圈一.概述需要用到的生成二维码组件(可自行下载添加到小程序根目录utils里):https://github.com/demi52 ...
微信小程序头像上传(一)
记录一下自己实现微信小程序头像上传的过程. wxml部分( 用了vant组件库 ): <view class="info"><van-imageroundwidt ...
小程序离屏canvas(createOffscreenCanvas)生成推广海报
小程序离屏canvas(createOffscreenCanvas)生成推广海报离屏canvas调用wx.canvasToTempFilePath报错Failed to execute 'drawI ...
小程序头像上传成功但是小程序码没更新
微信小程序头像上传了,但是小程序码没更新怎么处理? 如图: 小程序头像上传成功,但是小程序码没更新,是不是让你怀疑人生? 其实不用怀疑,退出登录,重新登录就行了重新登录后,就可以刷新出新的小程序码图 ...

小程序头像挂件-canvas生成图片

小程序头像挂件-canvas生成图片相关推荐

最新文章

热门文章