微信小程序海报分享
- 先从实现一个canvas绘制一张简单的图到可以保存到相册
上代码可以直接复制
<template>
<view class="posterBg">
<canvas canvas-id="poster" id="poster" class="poster-box"></canvas>
<u-popup v-model="show" mode="center">
<image :src="posterImg" class="posterImg"></image>
</u-popup>
<view class="button" @click="saveposter">保存到相册</view>
</view>
</template>
<script>
export default {
data() {
return {
_w:0,
bgImgUrl: 'https://yuanzai-zhjk.oss-accelerate.aliyuncs.com/health/uploads/20231129/e9e0eedfb12ff4da5af5d13125510d83.png', //海报背景
show: false,
posterImg: '',
};
},
async onReady() {
this.getSystemInfo(); //获取屏幕宽度适配比例
},
onLoad: function(option) {
},
onShow() {
},
mounted() {
this.showposter();
},
methods: {
//将canvas转图片
async showposter() {
uni.showLoading({
title: '海报生成中...'
});
// 绘制海报所需数据 如果是本地图片使用this.getImageInfoUrl
let bgImgUrl = await this.createImgUrl(this.bgImgUrl);
this.posterCanvas({
bgImgUrl
});
},
//保存图片
saveposter() {
const that = this;
uni.getImageInfo({
src: this.posterImg,
success: res => {
console.log('res', res.path);
uni.saveImageToPhotosAlbum({
filePath: res.path,
success: function() {
uni.showToast({
title: '保存成功'
});
},
fail: function(err) {
console.log('err1', err);
}
});
},
fail: err => {
console.log('errr', err);
}
});
},
// 绘制海报
posterCanvas({
bgImgUrl = ''}) {
let that = this;
let ctx = uni.createCanvasContext('poster', this);
//背景图
ctx.drawImage(bgImgUrl, 0, 0, this.calculate(310), this.calculate(500));
ctx.restore();
ctx.draw();
// 海报绘制完成
// 转换成图片
setTimeout(() => {
uni.canvasToTempFilePath({
x: 0,
y: 0,
width: that.calculate(310),
height: that.calculate(494.5),
// destWidth: this.calculate(930),
// destHeight: this.calculate(1483.5),
quality: 1,
canvasId: 'poster',
success: res => {
// console.log(res.tempFilePath, '生成图片');
that.posterImg = res.tempFilePath;
uni.hideLoading();
that.show = true;
},
fail: err => {
// console.log('err', err);
uni.showToast({
title: '生成失败',
icon: 'none'
});
uni.hideLoading();
}
});
}, 1000);
},
// 获取系统适配
getSystemInfo() {
let _this = this;
uni.getSystemInfo({
success(res) {
_this._w = res.windowWidth;
}
});
},
// 画布计算比例
calculate(num) {
let w = this._w;
let n = parseInt((w * num) / 375);
return n;
},
// 创建本地地址
createImgUrl: url =>
new Promise((resolve, reject) => {
// console.log(url)
uni.downloadFile({
url,
success: val => {
// console.log('创建本地地址',val)
resolve(val.tempFilePath)
},
fail: err => {
// console.log('e', err);
uni.showToast({
title: '图片出现错误',
icon: 'none'
});
reject(err);
}
});
}),
// 本地资源路径
getImageInfoUrl: url =>
new Promise((resolve, reject) => {
uni.getImageInfo({
src: url,
success: val => resolve(val.path),
fail: err => {
// console.log('e', err);
reject(err);
}
});
}),
}
};
</script>
<style lang="scss" scoped>
.posterBg{
text-align: center;
padding-top: 40rpx;
}
.poster-box {
width: 620rpx;
height: 989rpx;
position: fixed;
left: 110vw;
top: 0rpx;
z-index: -1;
}
.posterImg {
width: 620rpx;
height: 989rpx;
border-radius: 20rpx;
box-shadow: 0px 5px 10px #888888;
}
.button {
width: 400rpx;
height: 88rpx;
line-height: 88rpx;
margin: 0 auto;
text-align: center;
font-size: 30rpx;
font-family: PingFang SC;
font-weight: 500;
color: #262a32;
background: #ffffff;
border-radius: 16rpx;
margin-top: 48rpx;
background: #1887FB;
color: #fff;
border-radius: 10rpx 10rpx 10rpx 10rpx;
}
</style>
效果
场景 做一个分享海报 海报上需要又个人的分享码，分享码带个人的id
- 之前写过如何生成自己的带id的分享码（如何生成自己的小程序二维码）
现在需要做的是把一张图片和分享码组成一张海报，可以保存到相册。 - 遇到的问题 犹豫生成的二维码是base64编码，而在微信开发工具中使，是可以展示在画布上的，可是到了手机端调试时，发现base64是不能展示在画布上的
<canvas canvas-id="poster" id="poster" class="poster-box"></canvas>
let ctx = uni.createCanvasContext('poster', this);
ctx.drawImage(base64,0,0); // 在微信开发者工具里 是可以看到图片出来的 但是手机上不行
这时候就需要先把base64编码临时存储并生成一个临时的路径url，再用临时的路径去渲染图片