uniapp 微信小程序 生成海报
注意,动态图片需要使用uni.getImageInfo获取一遍不然不显示。
缺点:渲染速度有点慢
<template>
<view>
<view class="pc-container">
<canvas canvas-id="mycanvas" style="width: 300px;height: 450px;margin: 0 auto;"> </canvas>
</view>
<view class="save">
<view class="btn" @click="saveImage">
<u-icon name="download" color="#ffffff" size="32" style="margin-right: 10rpx;"></u-icon>
保存海报
</view>
</view>
</view>
</template>
<script>
const app = getApp();
export default {
data() {
return {
nickname: '',
imgurl: '',
openClassId: '',
detail: {},
showCanvas: true,
imglist: {
heardImg: '',
coverIcon: '',
weChatImg: '',
}
};
},
onLoad: function(options) {
let openClassId = options.openClassId
this.openClassId = openClassId
},
onReady: function() {},
onShow: function() {
this.getDetail()
},
onHide: function() {},
onHide: function() {
uni.removeStorageSync('person-card');
},
methods: {
// 获取公开课详情
getDetail() {
let user = uni.getStorageSync('user')
if (this.shareType == 'share' && user == '') {
this.shareShow = true
}
app.globalData.api.openClassDetail({
"id": this.openClassId
}).then(res => {
if (res.coverIcon == "") {
res.coverIcon = '/static/image/img.png'
}
this.detail = res
this.getSceneCode()
});
},
getSceneCode() {
let user = uni.getStorageSync('user')
let arr = {
uid: user.uid,
openClassId: this.openClassId
}
app.globalData.api.sceneCreate({
"uid": user.uid,
"bizData": JSON.stringify(arr),
"sceneType": 1
}).then(res => {
let data = res.sceneCode
this.getWEchart(data)
});
},
//这里是为了生成小程序二维码
getWEchart(scene) {
app.globalData.api.getQrcode({
scene: scene,
page: 'packageA/pages/subscribe/subscribe'
}).then(res => {
let user = uni.getStorageSync('userInfo').userInfo
let headerPath = user.headerPath
this.nickname = user.nickname
let imglist = {
heardImg: headerPath,
coverIcon: this.detail.coverIcon,
weChatImg: res
}
this.imglist = imglist
this.canvasImage()
});
},
// 这里是为了绘制海报
canvasImage() {
let that = this
uni.getImageInfo({
src: that.imglist.heardImg,
success(res1) {
let myCanvas = uni.createCanvasContext('mycanvas', this);
myCanvas.fillStyle = "#2388FD"
myCanvas.fillRect(0, 0, 300, 450)
// 头像
myCanvas.drawImage(res1.path, 20, 20, 55, 55);
uni.getImageInfo({
src: that.imglist.coverIcon,
success(res2) {
// 背景产品图
myCanvas.drawImage('/static/image/bg.jpg', 20, 90, 260, 340);
myCanvas.drawImage(res2.path, 30, 100, 240, 120);
uni.getImageInfo({
src: that.imglist.weChatImg,
success(res3) {
// 二维码
myCanvas.drawImage('/static/image/er.png', 60, 355, 140,
70);
myCanvas.drawImage(res3.path, 180, 360, 60, 60);
//参数:图片,左偏移,上偏移,宽,高
myCanvas.fillStyle = "#FFFFFF"
myCanvas.font = `14px Arial `;
myCanvas.fillText(that.nickname, 95, 45);
myCanvas.fillText(`向你推荐了`, 95, 65);
myCanvas.fillStyle = "#000000";
myCanvas.font = `14px Arial `;
myCanvas.fillText(that.detail.openClassName.slice(0, 19),
30, 240, 260, 100);
myCanvas.fillText(that.detail.openClassName.slice(19, that
.detail.openClassName.length),
30, 260, 260, 100);
// myCanvas.fillText('直播课程直播 ', 30, 260, 260, 100);
myCanvas.font = `12px Arial `;
myCanvas.fillText('直播时间:' + that.detail.onlineLiveRoom
.startTime, 30, 280, 260, 100);
let num = that.detail.meetNum || 0
myCanvas.fillText('已有' + num + "人预约", 30, 300, 200, 100);
//开始绘画,必须调用这一步,才会把之前的一些操作实施
myCanvas.draw(true, () => {
uni.canvasToTempFilePath({
canvasId: 'mycanvas',
fileType: 'jpg',
// 在H5平台下,tempFilePath 为 base64
success: (res) => {
uni.getImageInfo({
src: res.tempFilePath,
success: function (res) {
that.imgurl = res.path
}
});
},
fail: () => {
uni.showToast({
title: '名片加载失败',
duration: 2000
});
}
});
})
},
fail(res) {
console.log("fail3", res)
}
})
},
fail(res) {
console.log("fail2", res)
}
})
},
fail(res) {
console.log("fail1", res)
}
})
},
// 这里是为了保存海报到相册
saveImage() {
let that = this;
uni.showActionSheet({
itemList: ['保存图片'],
success: (res) => {
if (res.tapIndex == 0) {
uni.saveImageToPhotosAlbum({
filePath: that.imgurl, // 图片文件路径,可以是临时文件路径也可以是永久文件路径,不支持网络图片路径
success: () => {
uni.showToast({
title: '保存成功',
duration: 2000
});
},
fail: () => {
uni.showToast({
title: '保存失败',
duration: 2000
});
}
});
}
},
fail: function(res) {
console.log(res.errMsg);
}
});
}
}
}
</script>
<style lang="scss">
.pc-container {
width: 300px;
height: 450px;
margin: 0 auto;
margin-top: 46rpx;
overflow: hidden;
box-shadow: 0px 6px 12px rgba(22, 26, 31, 0.1);
border-radius: 20px;
image {
margin: 0 auto;
width: 300px;
height: 450px;
display: block;
}
}
.save {
width: 280px;
text-align: center;
margin: 0rpx auto;
background: #2388FD;
opacity: 1;
border-radius: 20px;
margin-top: 30rpx;
.btn {
height: 88rpx;
line-height: 88rpx;
font-size: 32rpx;
font-weight: 400;
color: #FFFFFF;
opacity: 1;
}
}
</style>