uniapp h5 海报

开发的时候用浏览器预览会出现跨域看不到的问题，不用慌上传到线上后就没问题了

<template>
	<view>
		<!-- 头部导航 -->
		<u-navbar bgColor="#ffffff" :placeholder="true" height="80rpx" leftIconSize="44rpx" @leftClick="back">
			<view class="navTitle" slot="center">邀请好友</view>
		</u-navbar>
		<view style="height: 50rpx;"></view>
		<canvas class="mycanvas" :style="{'width':canvasWidth+'px','height':canvasHeight+'px'}" canvas-id="secondCanvas" @error="canvasIdErrorCallback"></canvas>
		<swiper class="posters" previous-margin="110rpx" next-margin="50rpx">
			<swiper-item v-for="(item,index) in aclist" :key="index">
				<image :src="item" style="width: 540rpx;height: 1000rpx;"></image>
			</swiper-item>
		</swiper>
		<view class="showtoto">长按保存，分享邀请好友</view>
	
	</view>
</template>

<script>
	import {goback} from '@/common/publice.js'
	export default{
		data(){
			return{
				aclist:[],//生成的海报
				showList:[],//base64
				bglist:[],//海报背景图
				codeImg:'',
				nowCanvas:0,
				canvasWidth:270,
				canvasHeight:500,
			}
		},
		onLoad() {
			const postersList =  uni.getStorageSync('postersList');
			if(postersList){
				let dd = JSON.parse(postersList);
				this.aclist = dd;
			}else{
				this.getShareBackImgList();
				this.qrcode();
				uni.showLoading({
					title:'生成中...'
				})
			}
		},
		methods:{
			canvasIdErrorCallback(e) {
				uni.hideLoading()
				uni.showToast({
					title:'海报生成失败',
					icon:'none'
				})
			},
			// 返回
			back(){
				goback();
			},
			//生成海报
			svaeCanvas(e){
				const that = this;
				var ctx = uni.createCanvasContext('secondCanvas',this)
				  //绘制图像到画布
				  ctx.drawImage(e,0,0,this.canvasWidth,this.canvasHeight);//坐标0，0,铺满整个canvas
				  ctx.drawImage(this.codeImg,85,310,100,100);//坐标0，0,铺满整个canvas

					//画布生成执行
					ctx.draw(true, () => {
						//画布生成海报图
						uni.canvasToTempFilePath({
							x:0,
							y:0,
							destWidth: 750,//输出后的图片宽度
							destHeight: 1448,//输出后的图片高度
							canvasId: 'secondCanvas',
							quality:1,//图片质量
							success(res) {
							  // 在H5平台下，tempFilePath 为 base64
							  //base64格式的图片在h5下好像不能长按保存，要转成图片链接(文件流)才行
							  that.showList.push(res.tempFilePath)
							  ctx.clearRect(0,0,that.canvasWidth,that.canvasHeight); //清空画布
							 //多张海报
							  if((that.nowCanvas+1) !== that.bglist.length){
								  that.nowCanvas += 1;
								  that.svaeCanvas(that.bglist[that.nowCanvas].img)//继续生成
							  }else{
								   //等所有海报都生成成功,再去转换
								  that.showList.map((q,i) =>{
									  that.zhuan(i)
								  })
							  }
							},
							fail(res) {
								uni.hideLoading()
								ctx.clearRect(0,0,that.canvasWidth,that.canvasHeight);//清空画布
								uni.showToast({
									title:'海报生成失败',
									icon:'error'
								})
							}
						})
					})
			},
			//传给后端，将base64图片转成图片链接
			async zhuan(i){
				let data = await this.$api.base64imgsave({img:this.showList[i]})
				uni.hideLoading()
				if(data.code == 1){
					let path = this.$baseUrl + data.data.url;
					this.aclist.push(path);
					if(this.bglist.length == this.aclist.length){
						let dd = JSON.stringify(this.aclist);
						uni.setStorageSync('postersList',dd);
					}
				}else{
					uni.showToast({
						title:'图片转换失败',
						icon:'none'
					})
				}
			},
			//获取海报背景
			async getShareBackImgList(){
				let data = await this.$api.getShareBackImgList()
				if(data.code == 1){
					let arr = [];
					data.data.map(r =>{
						r.img = this.$baseUrl + r.img;
					})
					this.bglist = data.data;
					if(this.codeImg){
						this.svaeCanvas(this.bglist[0].img)
					}
				}else{
					uni.hideLoading()
					uni.showToast({
						title:'数据获取失败',
						icon:'error'
					})
				}
			},
			//获取个人二维码
			async qrcode(){
				let data = await this.$api.getVipEwm()
				if(data.code == 1){
					this.codeImg = this.$baseUrl + data.data;
					if(this.bglist.length>0){
						this.svaeCanvas(this.bglist[0].img)
					}
				}else{
					uni.hideLoading()
					uni.showToast({
						title:'二维码获取失败',
						icon:'none'
					})
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	.mycanvas{
		position: absolute;
		top: -1000px;
		left: -1000px;
		z-index: -999;
		margin-left: 100rpx;
	}
	.posters{
		width: 100%;
		height: 1000rpx;
	}
	.showtoto{
		margin-top: 40rpx;
		text-align: center;
		font-size: 30rpx;
		color: #666;
	}
	.can{
		position: absolute;
		top: -500px;
		left: -500px;
		z-index: -999;
	}
</style>