uniapp canvas画多个海报并保存到系统相册

方法比较鸡肋，但好在能用，要求不高

<template>
<view>
<swiper class="swiper" :style="'height:'+imgheight+'px;width:'+imgwidth+'px'" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration" @change="currentposer">
<block v-if="len==1">
<swiper-item>
<canvas :style="'height:'+imgheight+'px;width:'+imgwidth+'px'" class="canvas" canvas-id="poster1"></canvas>
</swiper-item>
</block>
<block v-else-if="len==2">
<swiper-item>
<canvas :style="'height:'+imgheight+'px;width:'+imgwidth+'px'" class="canvas" canvas-id="poster1"></canvas>
</swiper-item>
<swiper-item>
<canvas :style="'height:'+imgheight+'px;width:'+imgwidth+'px'" class="canvas" canvas-id="poster2"></canvas>
</swiper-item>
</block>
<block v-else-if="len==3">
<swiper-item>
<canvas :style="'height:'+imgheight+'px;width:'+imgwidth+'px'" class="canvas" canvas-id="poster1"></canvas>
</swiper-item>
<swiper-item>
<canvas :style="'height:'+imgheight+'px;width:'+imgwidth+'px'" class="canvas" canvas-id="poster2"></canvas>
</swiper-item>
<swiper-item>
<canvas :style="'height:'+imgheight+'px;width:'+imgwidth+'px'" class="canvas" canvas-id="poster3"></canvas>
</swiper-item>
</block>
<block v-else-if="len==4">
<swiper-item>
<canvas :style="'height:'+imgheight+'px;width:'+imgwidth+'px'" class="canvas" canvas-id="poster1"></canvas>
</swiper-item>
<swiper-item>
<canvas :style="'height:'+imgheight+'px;width:'+imgwidth+'px'" class="canvas" canvas-id="poster2"></canvas>
</swiper-item>
<swiper-item>
<canvas :style="'height:'+imgheight+'px;width:'+imgwidth+'px'" class="canvas" canvas-id="poster3"></canvas>
</swiper-item>
<swiper-item>
<canvas :style="'height:'+imgheight+'px;width:'+imgwidth+'px'" class="canvas" canvas-id="poster4"></canvas>
</swiper-item>
</block>
<block v-else-if="len==5">
<swiper-item>
<canvas :style="'height:'+imgheight+'px;width:'+imgwidth+'px'" class="canvas" canvas-id="poster1"></canvas>
</swiper-item>
<swiper-item>
<canvas :style="'height:'+imgheight+'px;width:'+imgwidth+'px'" class="canvas" canvas-id="poster2"></canvas>
</swiper-item>
<swiper-item>
<canvas :style="'height:'+imgheight+'px;width:'+imgwidth+'px'" class="canvas" canvas-id="poster3"></canvas>
</swiper-item>
<swiper-item>
<canvas :style="'height:'+imgheight+'px;width:'+imgwidth+'px'" class="canvas" canvas-id="poster4"></canvas>
</swiper-item>
<swiper-item>
<canvas :style="'height:'+imgheight+'px;width:'+imgwidth+'px'" class="canvas" canvas-id="poster5"></canvas>
</swiper-item>
</block>
</swiper>
<view class="download f30" @click="download" v-if="cansave">保存图片</view>
</view>
</template>
<script>
import request from "../../static/common/common.js"
export default {
data() {
return {
invitation_codeVal:'',
imgheight:'',
imgwidth:'',
qrcode:'',
filePath:'', //当前要保存的海报
indicatorDots: false,
autoplay: false,
interval: 2000,
duration: 500,
imgUrlArr:[],
len:'',
currentnum:1,
imgstartheight:'',
cansave:false
}
},
methods: {
currentposer(e){
var that = this;
let num = Number(e.detail.current+1);
that.currentnum = num;
},
// 获取海报背景图列表
getposter(){
var that = this;
request.httpRequest({
url:'api/index/poster'
}).then(res=>{
that.imgUrlArr = res.data.data.list;
that.qrcode = res.data.data.qrcode;
var len = res.data.data.list.length;
that.len = len;
if(len==0){
uni.showToast({
title:"暂无海报~",
icon:"none",
duration:2000
});
}else if(len==1){
that.mapping(1);
}else if(len==2){
that.mapping(1);
setTimeout(function(){
that.mapping(2);
},1000);
}else if(len==3){
that.mapping(1);
setTimeout(function(){
that.mapping(2);
},1000);
setTimeout(function(){
that.mapping(3);
},1000);
}else if(len==4){
that.mapping(1);
setTimeout(function(){
that.mapping(2);
},1000);
setTimeout(function(){
that.mapping(3);
},1000);
setTimeout(function(){
that.mapping(4);
},1000);
}else{
that.mapping(1);
setTimeout(function(){
that.mapping(2);
},1000);
setTimeout(function(){
that.mapping(3);
},1000);
setTimeout(function(){
that.mapping(4);
},1000);
setTimeout(function(){
that.mapping(5);
},1000);
}
});
},
// 绘制海报
mapping(num){
var that = this;
let ctx = uni.createCanvasContext('poster'+num);
ctx.fillStyle = "#007AFF";
let index = num -1;
uni.getImageInfo({
src:that.imgUrlArr[index].image,
success(res) {
ctx.drawImage(res.path, that.imgwidth*0.15/2, 12, that.imgwidth*0.85, that.imgheight*0.85);//绘制背景图
uni.getImageInfo({
src:that.qrcode,
success(res2) {
ctx.drawImage(res2.path, that.imgwidth*0.85-65, that.imgheight*0.85-90, 80,80);//绘制二维码
ctx.setFillStyle('#FFFFFF')//文字颜色：默认黑色
ctx.setFontSize(12)//设置字体大小，默认10
ctx.textAlign = 'center' // 设置位置
ctx.font = 'normal 12px sans-serif'; // 字体样式
ctx.fillText("邀请码:"+that.invitation_codeVal,that.imgwidth*0.85-24, that.imgheight*0.85-100);
setTimeout(function(){
ctx.draw();
uni.hideLoading();
that.cansave = true;
},2000);
}
});
}
});
},
// 保存图片
download(){
var that = this;
uni.showLoading({
title: '正在保存...',
mask:true
});
uni.canvasToTempFilePath({
canvasId: 'poster'+that.currentnum,
// x: 0,
// y: that.imgstartheight,
// fileType: 'jpg',
// width: that.imgwidth,
// height: that.imgheight,
// destWidth: that.imgwidth, // 如果保存到手机比较模糊 改这里 一般*2 即可解决
// destHeight: that.imgheight, // 如果保存到手机比较模糊 改这里 一般*2 即可解决
// quality:1,
success: (res) => {
uni.hideLoading();
that.savepic(res.tempFilePath);
},
fail(err) {
uni.hideLoading();
},
complete(com) {
uni.hideLoading();
}
});
},
savepic(filePath){
uni.saveImageToPhotosAlbum({
filePath: filePath,
success: function(response) {
uni.showToast({
title: '图片保存成功～'
});
},
fail: function(err) {
uni.showToast({
title: '图片保存失败～'
});
},
complete: function(com) {
uni.hideLoading();
}
});
}
},
onLoad(options) {
var that = this;
that.invitation_codeVal = options.invitation_codeVal;
uni.showLoading({
title:"海报生成中....",
mask:true
});
uni.getSystemInfo({
success(res) {
that.imgwidth = res.windowWidth;
that.imgheight = res.windowHeight;
// 图片绘图高度位置
let imgstartheight = Math.floor(res.windowHeight*0.06);
that.imgstartheight = imgstartheight-2*imgstartheight;
}
});
that.getposter();
},
}
</script>
<style lang="less" scoped>
.code{
position: absolute;
bottom:50rpx;
right: 50rpx;
}
.image_icon{
width: 100%;
height: 800rpx;
}
.swiper{
text-align: center;
}
.download{
width: 200rpx;
border-radius: 50rpx;
text-align: center;
background-color: #BAAE98;
padding: 20rpx;
box-shadow: 0rpx 8rpx 8rpx rgba(0, 0, 0, 0.25);
color: #FFFFFF;
position: absolute;
transform: translate(-50%,-50%);
left: 50%;
bottom: 10rpx;
}
</style>

效果如图：