250 lines
6.8 KiB
JavaScript
250 lines
6.8 KiB
JavaScript
/*
|
|
* 手太欠
|
|
* 愿这世界都如故事里一样 美好而动人~
|
|
*/
|
|
|
|
Page({
|
|
|
|
/**
|
|
* 页面的初始数据
|
|
*/
|
|
data: {
|
|
shareSee : false, //分享弹出
|
|
identity : '', //1为普通
|
|
userInfo : '', //用户信息
|
|
inviteText : '', //邀请码
|
|
inviteCode : '', //二维码
|
|
|
|
//海报
|
|
posterDatas: {
|
|
width : 375, //画布宽度
|
|
height : 800, //画布高度
|
|
// 缓冲区，无需手动设定
|
|
pic : null,
|
|
buttonType : 1,
|
|
show : false, // 显示隐藏海报弹窗
|
|
success : false, // 是否成功生成过海报
|
|
canvas : null, // 画布的节点
|
|
ctx : null, // 画布的上下文
|
|
dpr : 1, // 设备的像素比
|
|
},
|
|
},
|
|
|
|
/**
|
|
* 生命周期函数--监听页面加载
|
|
*/
|
|
onLoad(options) {
|
|
//生成海报初始化
|
|
var that = this;
|
|
var posterDatas = that.data.posterDatas
|
|
const query = wx.createSelectorQuery()
|
|
query.select('#firstCanvas').fields({
|
|
node: true,
|
|
size: true
|
|
},
|
|
function (res) {
|
|
const canvas = res.node
|
|
const ctx = canvas.getContext('2d')
|
|
const dpr = wx.getSystemInfoSync().pixelRatio
|
|
canvas.width = posterDatas.width * dpr
|
|
canvas.height = posterDatas.height * dpr
|
|
ctx.scale(dpr, dpr)
|
|
posterDatas.canvas = canvas
|
|
posterDatas.ctx = ctx
|
|
posterDatas.dpr = dpr
|
|
//存储
|
|
that.setData({
|
|
posterDatas
|
|
})
|
|
}).exec()
|
|
},
|
|
|
|
/**
|
|
* 生命周期函数--监听页面显示
|
|
*/
|
|
onShow() {
|
|
// 获取推广码
|
|
this.inviteInfo();
|
|
|
|
// 小程序码
|
|
this.ShareInfo();
|
|
},
|
|
|
|
/**
|
|
* 推广码
|
|
*/
|
|
inviteInfo() {
|
|
wx.$api.user.invite().then(res => {
|
|
this.setData({
|
|
identity : res.data.code,
|
|
userInfo : res.data.user_info,
|
|
inviteText : res.data.invite
|
|
})
|
|
}).catch(err => {})
|
|
},
|
|
|
|
/**
|
|
* 小程序码
|
|
*/
|
|
ShareInfo() {
|
|
wx.$api.user.miniShare({
|
|
url: '/pages/login/index'
|
|
}).then(res => {
|
|
this.setData({
|
|
inviteCode: res.data.qrcode
|
|
})
|
|
}).catch(err => {})
|
|
},
|
|
|
|
//海报生成 //画布 生成 海报[海报]
|
|
saveImg () {
|
|
var that = this;
|
|
var posterDatas = that.data.posterDatas
|
|
var canvas = posterDatas.canvas
|
|
var ctx = posterDatas.ctx
|
|
wx.showLoading({
|
|
title: '海报生成中',
|
|
mask: true
|
|
});
|
|
|
|
//二维码
|
|
var codeImg = new Promise(function (resolve, reject) {
|
|
const photo = canvas.createImage();
|
|
photo.src = that.data.inviteCode;
|
|
photo.onload = (e) => {
|
|
resolve(photo);
|
|
}
|
|
});
|
|
|
|
//背景素材
|
|
var backImg = new Promise(function (resolve, reject) {
|
|
const photo = canvas.createImage();
|
|
photo.src = "https://api.siyuankunlun.cn/storage/images/2023/03/14/7777441f7a2b25353f2d6de61452418c.png";
|
|
photo.onload = (e) => {
|
|
resolve(photo);
|
|
}
|
|
});
|
|
Promise.all([codeImg, backImg]).then(res => {
|
|
|
|
// 绘制背景
|
|
ctx.drawImage(res[1], 0, 0, posterDatas.width, posterDatas.height);
|
|
|
|
// 绘制[二维码-白色背景]
|
|
ctx.fillStyle = "#ffffff";
|
|
ctx.fillRect(200, 540, 120, 120);
|
|
|
|
// 绘制[二维码-白色背景黑框]
|
|
ctx.strokeStyle = "black";
|
|
ctx.strokeRect(199, 539, 122, 122);
|
|
|
|
// 绘制[二维码]
|
|
ctx.drawImage(res[0], 210, 550, 100, 100);
|
|
|
|
// 文字
|
|
ctx.font = "bold 14px Arial"; //字体大小
|
|
ctx.fillStyle = "#000"; //字体颜色
|
|
ctx.textAlign = "center"
|
|
ctx.fillText('扫描二维码了解更多', 260, 690);
|
|
|
|
// 关闭loading
|
|
wx.hideLoading();
|
|
//显示海报
|
|
posterDatas.success = true;
|
|
|
|
that.setData({
|
|
posterDatas
|
|
})
|
|
|
|
this.onDownloadImges();
|
|
|
|
}).catch(err=>{})
|
|
},
|
|
|
|
//下载图片[海报]
|
|
onDownloadImges () {
|
|
wx.showLoading({
|
|
title: '保存中',
|
|
mask: true
|
|
});
|
|
var that = this;
|
|
var posterDatas = that.data.posterDatas;
|
|
if (!posterDatas.pic) {
|
|
that.onCanvasBuildImges();
|
|
return;
|
|
}
|
|
//可写成函数调用 这里不做解释
|
|
wx.saveImageToPhotosAlbum({
|
|
filePath: posterDatas.pic,
|
|
success(res) {
|
|
wx.hideLoading();
|
|
wx.showToast({
|
|
icon: 'none',
|
|
title: '已保存到相册，快去分享吧',
|
|
})
|
|
that.setData({
|
|
posterDatas,
|
|
shareSee: !that.data.shareSee
|
|
})
|
|
},
|
|
fail() {
|
|
wx.hideLoading();
|
|
wx.showToast({
|
|
icon: 'none',
|
|
title: '进入设置页，开启“保存到相册”',
|
|
})
|
|
that.setData({
|
|
posterDatas
|
|
})
|
|
return;
|
|
}
|
|
})
|
|
},
|
|
|
|
//画布 转 图片[海报]
|
|
onCanvasBuildImges () {
|
|
var that = this;
|
|
var posterDatas = that.data.posterDatas;
|
|
wx.canvasToTempFilePath({
|
|
canvas: posterDatas.canvas,
|
|
width: posterDatas.width,
|
|
height: posterDatas.height,
|
|
destWidth: posterDatas.width * 3,
|
|
destHeight: posterDatas.height * 3,
|
|
success: res=> {
|
|
posterDatas["pic"] = res.tempFilePath;
|
|
that.setData({
|
|
posterDatas
|
|
})
|
|
that.onDownloadImges();
|
|
},
|
|
fail() {
|
|
wx.hideLoading();
|
|
wx.showToast({
|
|
icon: 'none',
|
|
title: 'sorry 保存失败,请稍后再试.',
|
|
})
|
|
return;
|
|
}
|
|
});
|
|
},
|
|
|
|
/**
|
|
* 分享弹出
|
|
*/
|
|
shareTap() {
|
|
this.setData({
|
|
shareSee: !this.data.shareSee
|
|
})
|
|
},
|
|
|
|
/**
|
|
* 微信分享
|
|
*/
|
|
onShareAppMessage(){
|
|
return {
|
|
title : this.data.userInfo.nickname + '邀请您了解锶源昆仑',
|
|
path : "/pages/index/index?invite=" + this.data.userInfo.inviteText,
|
|
imageUrl: "http://cdn.siyuankunlun.com/materials/2022/09/14/code.jpg"
|
|
}
|
|
}
|
|
}) |