效果图
#HB.js
// pages/prize/prize.js
const app = getApp()
const context = wx.createCanvasContext('myCanvas')
Page({
/**
* 页面的初始数据
*/
data: {
img: "../images/HB/gobg.png",
imgm: "../images/HB/gobgm.png",
wechat: "../images/HB/wechat.png",
quan: "../images/HB/quan.png",
code: "8",
maskHidden: false,
name: "",
touxiang: ""
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
console.log("options", options)
this.setData({
site: options.site,
code: options.value
})
var that = this;
// 判断用户是否授权登录
wx.getSetting({
success: function (res) {
// 判断是否授权
if (res.authSetting['scope.userInfo']) {
//获取用户信息
wx.getUserInfo({
success: function (res) {
//用户已经授权过,添加用户信息
// var that = this
//wx.setStorageSync('nickName', res.userInfo.nickName)
//wx.setStorageSync('avatarUrl', res.userInfo.avatarUrl)
}
});
} else {
wx.showToast({
title: '请授权登录!',
icon: 'none',
duration: 1500,
success: function () {
//定时器,未授权1.5秒后跳转授权页面
setTimeout(function () {
wx.reLaunch({
url: '../index/index',
})
}, 1500);
}
})
}
}
})
wx.getUserInfo({
success: res => {
console.log(res.userInfo, "huoqudao le ")
this.setData({
name: res.userInfo.nickName,
})
wx.downloadFile({
url: res.userInfo.avatarUrl, //仅为示例,并非真实的资源
success: function (res) {
// 只要服务器有响应数据,就会把响应内容写入文件并进入 success 回调,业务需要自行判断是否下载到了想要的内容
if (res.statusCode === 200) {
console.log(res, "reererererer")
that.setData({
touxiang: res.tempFilePath
})
}
}
})
}
})
},
//将canvas转换为图片保存到本地,然后将图片路径传给image图片的src
createNewImg: function () {
var that = this;
var context = wx.createCanvasContext('mycanvas');
context.setFillStyle("#ffe200")
context.fillRect(0, 0, 375, 667)
var path = "../images/HB/gobg.png";
//将模板图片绘制到canvas,在开发工具中drawImage()函数有问题,不显示图片
//不知道是什么原因,手机环境能正常显示
context.drawImage(path, 0, 0, 375, 183);
var path1 = this.data.touxiang;
console.log(path1, "path1")
//将模板图片绘制到canvas,在开发工具中drawImage()函数有问题,不显示图片
var path2 = "../images/HB/bg.png";
var path3 = "../images/HB/heise.png";
var path4 = "../images/HB/wenxin.png";
var path5 = "../images/HB/sm.png";
var path6 = "../images/HB/MA.jpg";
context.drawImage(path2, 126, 186, 120, 120);
//不知道是什么原因,手机环境能正常显示
context.save(); // 保存当前context的状态
var name = that.data.name;
//绘制名字
context.setFontSize(24);
context.setFillStyle('#333333');
context.setTextAlign('center');
context.fillText(name, 185, 340);
context.stroke();
//绘制一起吃面标语
context.setFontSize(16);
context.setFillStyle('#333333');
context.setTextAlign('center');
context.fillText("邀你一起入职美团" + "大陆" + "专送骑手", 185, 370);
context.stroke();
//绘制验证码背景
context.drawImage(path3, 48, 390, 280, 84);
//绘制code码
context.setFontSize(40);
context.setFillStyle('#ffe200');
context.setTextAlign('center');
context.fillText("首月8元起", 185, 435);
context.stroke();
//绘制左下角文字背景图
context.drawImage(path4, 25, 520, 184, 82);
context.setFontSize(12);
context.setFillStyle('#333');
context.setTextAlign('left');
context.fillText("正常干7000---9000元/月", 35, 540);
context.stroke();
context.setFontSize(12);
context.setFillStyle('#333');
context.setTextAlign('left');
context.fillText("用心干8000---10000元/月", 35, 560);
context.stroke();
context.setFontSize(12);
context.setFillStyle('#333');
context.setTextAlign('left');
context.fillText("努力干1W+++++", 35, 580);
context.stroke();
//绘制右中二维码
context.drawImage(path6, 260, 513, 64, 60); // 左 上 宽 高
//绘制右下角扫码提示语
context.drawImage(path5, 248, 578, 90, 25);
//绘制头像
context.arc(186, 246, 50, 0, 2 * Math.PI) //画出圆
context.strokeStyle = "#ffe200";
context.clip(); //裁剪上面的圆形
context.drawImage(path1, 136, 196, 100, 100); // 在刚刚裁剪的园上画图
context.draw();
//将生成好的图片保存到本地,需要延迟一会,绘制期间耗时
setTimeout(function () {
wx.canvasToTempFilePath({
canvasId: 'mycanvas',
success: function (res) {
var tempFilePath = res.tempFilePath;
that.setData({
imagePath: tempFilePath,
canvasHidden: true
});
},
fail: function (res) {
console.log(res);
}
});
}, 200);
},
//点击保存到相册
baocun: function () {
var that = this
wx.saveImageToPhotosAlbum({
filePath: that.data.imagePath,
success(res) {
wx.showModal({
content: '图片已保存到相册,赶紧晒一下吧~',
showCancel: false,
confirmText: '好的',
confirmColor: '#333',
success: function (res) {
if (res.confirm) {
console.log('用户点击确定');
/* 该隐藏的隐藏 */
that.setData({
maskHidden: false
})
}
},
fail: function (res) {
console.log(11111)
}
})
}
})
},
//点击生成
formSubmit: function (e) {
var that = this;
this.setData({
maskHidden: false
});
wx.showToast({
title: '海报正在过来',
icon: 'loading',
duration: 1000
});
setTimeout(function () {
wx.hideToast()
that.createNewImg();
that.setData({
maskHidden: true
});
}, 1000)
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
var that = this;
wx.getUserInfo({
success: res => {
console.log(res.userInfo, "huoqudao le ")
this.setData({
name: res.userInfo.nickName,
})
wx.downloadFile({
url: res.userInfo.avatarUrl, //仅为示例,并非真实的资源
success: function (res) {
// 只要服务器有响应数据,就会把响应内容写入文件并进入 success 回调,业务需要自行判断是否下载到了想要的内容
if (res.statusCode === 200) {
console.log(res, "reererererer")
that.setData({
touxiang: res.tempFilePath
})
}
}
})
}
})
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function (res) {
return {
title: "美团专送,"+this.data.site+"站点直聘骑手,"+this.data.code+"元/单起!",
success: function (res) {
console.log(res, "转发成功")
},
fail: function (res) {
console.log(res, "转发失败")
}
}
}
})
#HB.wxml
<view class="UCenter-bg">
<image src="{
{touxiang}}" class="UCenter-bg image " mode="widthFix"></image>
<view class="text-xl">{
{name}}
</view>
</view>
<!-- <text class='code'>{
{code}}</text> -->
<text class='code'>邀请你一起入职美团</text>
<text class='code'>{
{site}}专送骑手</text>
<text class='shareText'>生成海报分享至</text>
<view class='imgBox'>
<button class='zfbtn m_l' bindtap='formSubmit'>
<image src="{
{quan}}" class='imgF'></image>
</button>
</view>
<!--生成海报 -->
<view class='imagePathBox' hidden="{
{maskHidden == false}}">
<image src="{
{imagePath}}" class='shengcheng'></image>
<button class='baocun' bindtap='baocun'>保存相册,分享到朋友圈</button>
</view>
<view hidden="{
{maskHidden == false}}" class="mask"></view>
<view class="canvas-box">
<canvas style="width: 375px;height: 667px;position:fixed;top:9999px" canvas-id="mycanvas" />
</view>
#HB.wxss
page {
background-color: #dddddd;
}
.bgImg {
display: block;
width: 100%;
height: 366rpx;
}
.mine {
display: block;
text-align: center;
color: #333;
margin-top: 44rpx;
}
.code {
display: block;
text-align: center;
color: rgb(51, 51, 51);
font-size: 76rpx;
font-weight: bold;
margin-top: 30rpx;
}
.who {
display: block;
margin-top: 80rpx;
font-size: 32rpx;
color: #333;
text-align: center;
}
.inputBox {
text-align: center;
margin-top: 44rpx;
}
.input {
text-align: center;
width: 440rpx;
height: 88rpx;
border-radius: 44rpx;
background: #f5f5f5;
font-size: 32rpx;
display: inline-block;
}
.btn {
width: 160rpx;
height: 88rpx;
border-radius: 44rpx;
background: linear-gradient(90deg, rgba(255, 226, 0, 1), rgba(255, 200, 11, 1));
box-shadow: 0px 4px 8px 0px rgba(255, 200, 11, 0.5);
color: #333;
font-size: 32rpx;
display: inline-block;
line-height: 88rpx;
margin-left: 40rpx;
}
button[class="btn"]::after {
border: 0;
}
.tishi {
display: block;
text-align: center;
color: #999;
margin-top: 30rpx;
}
.shareText {
display: block;
text-align: center;
color: #333;
font-size: 28rpx;
margin-top: 100rpx;
}
.imgBox {
text-align: center;
width: 100%;
margin-top: 60rpx;
padding-bottom: 100rpx;
}
.imgF {
display: inline-block;
width: 100%;
height: 100%;
}
.m_l {
margin-left: 180rpx;
}
.zfbtn {
display: inline-block;
width: 150rpx;
height: 150rpx;
border-radius: 50%;
background: transparent;
outline: none;
border: 0;
padding: 0;
}
button[class="zfbtn"]::after {
border: 0;
}
button[class="zfbtn m_l"]::after {
border: 0;
}
.imagePathBox {
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 10;
}
.shengcheng {
width: 80%;
height: 80%;
position: fixed;
top: 50rpx;
left: 50%;
margin-left: -40%;
z-index: 10;
}
.baocun {
display: block;
width: 80%;
height: 80rpx;
padding: 0;
line-height: 80rpx;
text-align: center;
position: fixed;
bottom: 50rpx;
left: 10%;
background: #ffe200;
color: #333;
font-size: 32rpx;
border-radius: 44rpx;
}
button[class="baocun"]::after {
border: 0;
}
.UCenter-bg {
/* background-image: url(https://image.weilanwl.com/color2.0/index.jpg); */
background-size: cover;
height: 350rpx;
display: flex;
justify-content: center;
position: relative;
flex-direction: column;
align-items: center;
color: rgb(12, 12, 12);
font-weight: 300;
text-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
}
.UCenter-bg image {
width: 180rpx;
height: 180rpx;
border-radius: 50%;
}
PS:里面有涉及个用户的头像,用户名,需要登录才会生成海报。
##源码获取:关注公众号,回复–[海报]–获取,
###也可以添加WX:qiaominliu