<style scoped>
.page {
height: 100%;
width: 750rpx;
border: 1rpx red solid;
}
.share{
width:540rpx;
height: 754rpx;
position: fixed;
left: 105rpx;
right: 0;
top: 242rpx;
bottom: 200rpx;
border: 1rpx blue solid;
}
.btn-box{
padding: 10rpx 60rpx 0 60rpx;
}
.button{
background: darkturquoise;
}
.bottom{
width: 300rpx;
height: 400rpx;
background-color: black;
}
.bottom image{
width:140rpx;
height:140rpx;
}
</style>
<template>
<div class="page">
<div class='share'>
<canvas canvas-id="shareCanvas" style="width:386rpx;height:438px;margin:0 72rpx 0;"></canvas>
<!-- <div class='bottom'>
<image src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2368475193,3363966820&fm=26&gp=0.jpg" bindtap='closeShare'></image>
</div> -->
</div>
</div>
</template>
<script>
var app = getApp();
let timer = null;
export default {
name: "home",
components: {},
data() {
return {
userInfo:{
nickName:'王二',
headImg:"https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1252441405,2189346925&fm=26&gp=0.jpg"
},
sharebg: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2368475193,3363966820&fm=26&gp=0.jpg', // 分享底部背景图
shareTitle: '用户输入的内容', // 分享标题
shareCoverImg: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1273423055,2066875544&fm=26&gp=0.jpg',
shareQrImg: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2482456912,1666703692&fm=26&gp=0.jpg',
seeDate: '2018-12-04',
current: 0,
shareContent:'',
swiperList: [
{
imageUrl:
"https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2368475193,3363966820&fm=26&gp=0.jpg"
},
{
imageUrl:
"https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1273423055,2066875544&fm=26&gp=0.jpg"
},
{
imageUrl:
"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1586858273614&di=597a0c96dd5f7ab1ff5f97847c30ae3d&imgtype=0&src=http%3A%2F%2Fa3.att.hudong.com%2F63%2F17%2F01300543322754145561176407987_s.jpg"
}
],
startPageImageUrl: "http://placekitten.com/750/1206"
};
},
computed: {},
onShareAppMessage() {
return {
title: '弹出分享时显示的分享标题',
desc: this.shareContent,
path: '/page/user?id=123'
}
},
onPageScroll(e) {},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
let that = this;
var UserName = '张三'
wx.setNavigationBarTitle({
title: '分享到朋友圈',
})
var time = "2020-4-15";
var UserImage = "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2368475193,3363966820&fm=26&gp=0.jpg";
// 创建画布
const ctx = wx.createCanvasContext('shareCanvas')
// 白色背景
ctx.setFillStyle('#fff')
ctx.fillRect(0, 0, 198, 128)
ctx.draw()
// 下载底部背景图
// wx.getImageInfo({
// src: that.sharebg,
// success: (res1) => {
// ctx.drawImage(res1.path, 0, 250, 300, 130)
// 下载视频封面图
wx.getImageInfo({
src: that.shareCoverImg,
success: (res2) => {
ctx.drawImage(res2.path, 0, 0, 198, 128)
// 分享标题
// ctx.setTextAlign('center') // 文字居中
ctx.setFillStyle('#000') // 文字颜色:黑色
ctx.setFontSize(20) // 文字字号:20px
if (that.shareTitle.length <= 14) {
// 不用换行
ctx.fillText(that.shareTitle, 10, 200, 280)
} else if (that.shareTitle.length <= 28) {
// 两行
let firstLine = that.shareTitle.substring(0, 14);
let secondLine = that.shareTitle.substring(14, 27);
ctx.fillText(firstLine, 10, 200, 280)
ctx.fillText(secondLine, 10, 224, 280)
} else {
// 超过两行
let firstLine = that.shareTitle.substring(0, 14);
let secondLine = that.shareTitle.substring(14, 27) + '...';
ctx.fillText(firstLine, 10, 200, 280)
ctx.fillText(secondLine, 10, 224, 280)
}
// 下载二维码
wx.getImageInfo({
src: that.shareQrImg,
success: (res3) => {
let qrImgSize = 70
ctx.drawImage(res3.path, 212, 256, qrImgSize, qrImgSize)
ctx.stroke()
ctx.draw(true)
// 用户昵称
ctx.setFillStyle('#000') // 文字颜色:黑色
ctx.setFontSize(14) // 文字字号:16px
ctx.fillText(that.userInfo.nickName, 38, 284)
// 观看日期
ctx.setFillStyle('#999') // 文字颜色:黑色
ctx.setFontSize(10) // 文字字号:16px
ctx.fillText('在' + that.seeDate + '分享到朋友圈', 38, 298)
// 下载用户头像
wx.getImageInfo({
src: that.userInfo.headImg,
success: (res4) => {
// 先画圆形,制作圆形头像(圆心x,圆心y,半径r)
ctx.arc(22, 284, 12, 0, Math.PI * 2, false)
ctx.clip()
// 绘制头像图片
let headImgSize = 24
ctx.drawImage(res4.path, 10, 272, headImgSize, headImgSize)
// ctx.stroke() // 圆形边框
ctx.draw(true)
// 保存到相册
wx.canvasToTempFilePath({
canvasId: 'shareCanvas',
success: function (res) {
wx.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success: function (res) {
wx.showToast({
title: '分享图片已保存到相册,请到朋友圈选择图片发布'
})
}
})
}
}, this)
}
})
}
})
}
})
// }
// })
},
methods: {
change(e) {
this.current = e.detail.current;
},
}
};
</script>
网友评论