主要是使用到canvas畫布的知識
代碼如下：
wxml
<view>
<image src="{{img}}" class='bgImg'></image>
<text class='mine'>我的邀請碼</text>
<text class='code'>{{code}}</text>
<text class='who'>誰邀請你一起吃面?</text>
<view class='inputBox'>
<input placeholder='輸入朋友的驗證碼' class='input' bindinput='bindKeyInput'/>
<button bindtap='btnclick' class='btn'>提交</button>
</view>
<text class='tishi'>輸入朋友的邀請碼，朋友和你各自獲得通用優惠券1張</text>
<text class='shareText'>生成海報分享至</text>
<view class='imgBox'>
<button open-type="share" class='zfbtn'><image src="{{wechat}}" class='img'></image></button>
<button class='zfbtn m_l' bindtap='formSubmit'><image src="{{quan}}" class='img'></image></button>
</view>
<!--生成海報 -->
<!-- <view class="img-box">
</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>
</view>
wxss
.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: #333;
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: 120rpx;
}
.img{
display: inline-block;
width: 100%;
height: 100%;
}
.m_l{
margin-left: 180rpx;
}
.zfbtn{
display: inline-block;
width: 120rpx;
height: 120rpx;
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;
}
js
// pages/prize/prize.js
const app = getApp()
Page({
/**
* 頁面的初始數據
*/
data: {
img:"../../images/gobg.png",
wechat:"../../images/wechat.png",
quan:"../../images/quan.png",
code:"E7AI98",
inputValue:"",
maskHidden: false,
name:"",
touxiang:"",
code: "E7A93C"
},
//獲取輸入框的值
bindKeyInput:function(e){
this.setData({
inputValue: e.detail.value
})
},
//點擊提交按鈕
btnclick:function(){
var text = this.data.inputValue
wx.showToast({
title: text,
icon: 'none',
duration: 2000
})
},
/**
* 生命周期函數--監聽頁面加載
*/
onLoad: function (options) {
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
})
}
}
})
}
})
},
//將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/gobg.png";
//將模板圖片繪制到canvas,在開發工具中drawImage()函數有問題，不顯示圖片
//不知道是什么原因，手機環境能正常顯示
context.drawImage(path, 0, 0, 375, 183);
var path1 = that.data.touxiang;
console.log(path1,"path1")
//將模板圖片繪制到canvas,在開發工具中drawImage()函數有問題，不顯示圖片
var path2 = "/images/txquan.png";
var path3 = "/images/heise.png";
var path4 = "/images/wenziBg.png";
var path5 = "/images/wenxin.png";
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(14);
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(that.data.code, 185, 435);
context.stroke();
//繪制左下角文字背景圖
context.drawImage(path4, 25, 520, 184, 82);
context.setFontSize(12);
context.setFillStyle('#333');
context.setTextAlign('left');
context.fillText("進入小程序輸入朋友的邀請", 35, 540);
context.stroke();
context.setFontSize(12);
context.setFillStyle('#333');
context.setTextAlign('left');
context.fillText("碼，朋友和你各自獲得通用", 35, 560);
context.stroke();
context.setFontSize(12);
context.setFillStyle('#333');
context.setTextAlign('left');
context.fillText("優惠券1張哦~", 35, 580);
context.stroke();
//繪制右下角掃碼提示語
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
})
}
}
})
}
})
},
/**
* 生命周期函數--監聽頁面隱藏
*/
onHide: function () {
},
/**
* 生命周期函數--監聽頁面卸載
*/
onUnload: function () {
},
/**
* 頁面相關事件處理函數--監聽用戶下拉動作
*/
onPullDownRefresh: function () {
},
/**
* 頁面上拉觸底事件的處理函數
*/
onReachBottom: function () {
},
/**
* 用戶點擊右上角分享
*/
onShareAppMessage: function (res) {
return {
title:"這個是我分享出來的東西",
success:function(res){
console.log(res,"轉發成功")
},
fail:function(res){
console.log(res,"轉發失敗")
}
}
}
})