wxml：
<!-- footer -->
<view class="s_foot">
<view class="s_simg">
<button open-type="share">
<image class="s_image" src="../../images/icon_share.png"></image>
<text class="s-text">分享給好友</text>
</button>
</view>
<view class="s_simg1 s_simg" bindtap='formSubmit'>
<button>
<image class="s_image" src="../../images/picture1.png"></image>
<text class="s-text s-text1">生成海報</text>
</button>
</view>
</view>
<!-- 生成海報 -->
<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樣式：
/* 底部 */
.s_foot {
display: flex;
position: fixed;
bottom: 0;
height: 100rpx;
width: 100%;
line-height: 100rpx;
background-color: #fff;
box-shadow: 0px -10rpx 26rpx 1px rgba(0, 0, 0, 0.13);
}
.s_image {
display: inline-block;
width: 40rpx;
height: 40rpx;
position: relative;
left: -30%;
}
.s_simg {
width: 45%;
margin: 10rpx 30rpx;
border: 2rpx solid rgba(234, 149, 24, 1);
border-radius: 10rpx;
}
.s_simg button {
background-color: transparent;
}
.s-text {
padding: 0 20rpx;
font-size: 26rpx;
font-family: PingFang SC;
font-weight: 500;
color: rgba(233, 148, 24, 1);
text-align: center;
position: absolute;
left: 35%;
bottom: 20rpx;
}
.s_simg1 {
background: rgba(234, 149, 24, 1);
border-radius: 10rpx;
}
.s-text1 {
color: #fff;
}
/* 生成海報樣式 */
.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: 90%;
height: 75%;
position: fixed;
top: 110rpx;
left: 50%;
margin-left: -45%;
z-index: 10;
box-shadow: 0px 10px 26rpx 1px rgba(0, 0, 0, 0.2);
border-radius: 10rpx;
}
.baocun {
display: block;
width: 90%;
height: 98rpx;
padding: 0;
line-height: 98rpx;
text-align: center;
position: fixed;
bottom: 50rpx;
left: 5%;
background: #ea9518;
color: #fff;
font-size: 24rpx;
font-family: PingFang SC;
font-weight: 500;
box-shadow: 0px -10px 26rpx 1px rgba(0, 0, 0, 0.13);
border-radius: 10rpx;
}
button[class="baocun"]::after {
border: 0;
}
js:
* 頁面的初始數據
*/
data: {
play: '../../images/icon-play.png',
shareimg:'../../images/share.png',
maskHidden: false,
example: [],
egvido: {
videoUrl: 'http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400', //視頻路徑
coverUrl: '../../images/i_cover.png', //視頻封面圖
english: 'All the bright precious things fade so fast...andthey do not come back.',
english1: 'so fast...andthey do not come back.',
chinese: '所有的光鮮亮麗都敵不過時間，並且一去不復返。',
loop: 'true',
},
// 生成海報
img: "../../images/s_head1.png",
wechat: "../../images/s_head2.png",
quan: "../../images/s_head1.png",
imagePath: '',
inputValue: "",
name: "",
touxiang: "",
nowDate: '',
},
// 生 成 海報
//將canvas轉換爲圖片保存到本地，然後將圖片路徑傳給image圖片的src
createNewImg: function () {
var that = this;
var context = wx.createCanvasContext('mycanvas');
context.setFillStyle("#ffffff")
context.fillRect(0, 0, 375, 667)
// var path = "../../../images/s_head1.png";
//將模板圖片繪製到canvas,在開發工具中drawImage()函數有問題，不顯示圖片
//不知道是什麼原因，手機環境能正常顯示
// context.drawImage(path, 0, 0, 375, 183);
var avatarUrl = that.data.touxiang;
console.log(avatarUrl, "avatarUrl")
var code = "../../images/code.png";
var name = that.data.name;
var english = that.data.egvido.english;
var english1 = that.data.egvido.english1;
var coverUrl = that.data.egvido.coverUrl;
var chinese = that.data.egvido.chinese;
var datetime = that.data.datetime;
var play = that.data.play;
var nowDate = that.data.nowDate;
//超出換行
//繪製名字
context.setFontSize(24);
context.setFillStyle('#333333');
context.setTextAlign('center');
context.fillText(name, 120, 80);
context.stroke();
//繪製時間
context.setFontSize(14);
context.setFillStyle('#000000');
context.setTextAlign('right');
context.fillText(nowDate, 350, 80);
context.stroke();
//繪製視頻默認圖片
context.drawImage(coverUrl, 20, 115, 335, 250);
//繪製播放按鈕
context.drawImage(play, 160, 220, 60, 60);
//繪製英語意思
context.setFontSize(18);
context.setFillStyle('#000000');
context.setTextAlign('center');
context.fillText(english, 185, 415);
context.stroke();
//繪製英語意思
context.setFontSize(18);
context.setFillStyle('#000000');
context.setTextAlign('center');
context.fillText(english1, 185, 450);
context.stroke();
//繪製視頻播放按鈕
// context.drawImage(play, 136, 196, 100, 100);
//繪製漢語翻譯
context.setFontSize(14);
context.setFillStyle('#000000');
context.setTextAlign('center');
context.fillText(chinese, 185, 490);
context.stroke();
//繪製二維碼
context.drawImage(code, 145, 535, 80, 80);
//繪製下方文字
context.setFontSize(14);
context.setFillStyle('#000');
context.setTextAlign('center');
context.fillText("長按識別二維碼觀看", 185, 640);
context.stroke();
//繪製頭像
context.arc(50, 70, 25, 0, 2 * Math.PI) //畫出圓
// context.arc(186, 246, 50, 0, 2 * Math.PI) //畫出圓
context.strokeStyle = "#fff";
context.clip(); //裁剪上面的圓形
context.drawImage(avatarUrl, 0, 20, 80, 80); // 在剛剛裁剪的園上畫圖
// context.drawImage(avatarUrl, 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)
},
/**
* 生命週期函數--監聽頁面顯示
*/
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
})
}
}
})
}
})
},
