• 前端uniapp生成海报并保存相册

    uiapp插件
    uiapp插件有轮播图，但是没有保存功能，下面是自己写的

    目录

    qrcode.vue图片效果

    请添加图片描述

    qrcode.vue源码完整版

    <template>
	<view class="qrcode">
		<div class="qrcode_swiper SourceHanSansSC-Normal">
			

			
			<view class="swiper-wrap" v-if="imgList.length">
				
				<swiper class="image-container" previous-margin="111rpx" next-margin="111rpx" circular
					@change="swiperChange">
					
					<swiper-item :class="currentIndex == index ? 'swiper-item' : 'swiper-item-side'"
						v-for="(item, index) in imgList" :key="index">
						<view class="item-content" :class="currentIndex == index ? 'item-img' : 'item-img-side'">
							<image :src="item.file_path" lazy-load :style="dontFirstAnimation ? 'animation: none;' : ''"
								mode="aspectFill">image>
							

							<image :src="bgwhite" class="bgwhiteImg">
								<view class="bottom-box flex-center">
									
									<image :src="qrcode" class="code">image>
									<view class="right-inner">
										<view class="invite-top">我的邀请码view>
										<view class="invite-center">
											{{inviteCode}}
										view>
										<view class="font-color-46 invite-bottom">长按识别二维码加入中闽天品view>
									view>
								view>

							image>
						view>
					swiper-item>
				swiper>
			view>
			
			<view style="width: 100%;z-index: 500;position: fixed;left: 0;top: -1000vh;">
				<view style="width: 100%;height: 1624upx;position: relative;background-color: #FFFFFF;">
					<canvas style="width: 400rpx;height: 710rpx;" canvas-id="myCanvas" ref="myBox">canvas>
				view>
			view>
			
		div>


		
		<view class="myinvitationcode">
			<view class="myinvitationcode_lft">
				<view class="myinvitationcode_lft_top">
					我的邀请码
				view>
				<view class="myinvitationcode_lft_btm">
					{{invite_code}}
				view>
			view>

			<view class="myinvitationcode_rgt" @tap="copy(invite_code)">
				<text class="myinvitationcode_rgt_txt">复制text>
			view>

						<view style="width: 100rpx; height: 100rpx; border: 1rpx solid red;" @tap="getSwiper">
				跳转
			view>
		view>

		
		<view class="invitationsteps">
			<view class="invitationsteps_lft">
				<text class="invitationsteps_lft_one">
					邀请步骤
				text>
				<text class="invitationsteps_lft_two">
					1.分享邀请海报给好友
				text>
				<text class="invitationsteps_lft_two">
					2.好友通过海报下载APP
				text>
				<text class="invitationsteps_lft_two">
					3.好友注册APP时填写您的邀请码
				text>
			view>
			<view class="invitationsteps_rgt">
				<image :src="qrcode_url" mode="aspectFill" class="poster_image">image>
			view>
		view>


		
		<view class="btns-wrap">

			
			
			
			
			
			<view class="wrapBtn" type="default" @click="downLoad">
				<image src="../../../static/poster/posterDownload.png" mode="aspectFill">image>
				<text>保存图片到相册text>
			view>
			
			
			
			
			
			
		view>
	view>
template>

<script>
	// import bwSwiper from '@/wxcomponents/bw-swiper/bw-swiper.vue';
	export default {
		components: {
			// bwSwiper
		},
		data() {
			return {
				qrcode_url: '',
				// user_id: '',
				invite_code: '',


				// 下面全是引入swiper数据 start！！！！！！！
				// 接口获取swiper图片数组
				imgList: [],
				// 本地测试假数据
				// imgList: [
				// 	{
				// 		currentIndex: 0,
				// 		file_path: 'https://testshop.yunjingwl.com/uploads/20230919/940337925d4f0a897d8447dd9b72d918.jpg',
				// 	},
				// 	{
				// 		currentIndex: 1,
				// 		file_path: 'https://testshop.yunjingwl.com/uploads/20230919/7686286376d8ab9627c892776384cf20.png',
				// 	},
				// 	{
				// 		currentIndex: 2,
				// 		file_path: 'https://testshop.yunjingwl.com/uploads/20230919/940337925d4f0a897d8447dd9b72d918.jpg',
				// 	},
				// 	{
				// 		currentIndex: 3,
				// 		file_path: 'https://testshop.yunjingwl.com/uploads/20230919/7686286376d8ab9627c892776384cf20.png',
				// 	},
				// ],
				// 轮播图索引index默认选中0，第一个
				currentIndex: 0,
				dontFirstAnimation: true,
				codeTwo: '',
				inviteCode: '', //邀请码
				// canvas绘制的图片路径
				picture: uni.getStorageSync('tempFilePath'),
				// 接口获取二维码图片
				qrcode: '', // view上面也要绑定image 绑定src路径
				bgwhite: '', // swiper底部白色背景图,要绑定image 绑定src路径
				// 上面全是引入swiper数据 end ！！！！！！！
			}
		},
		onShow() {
			// 下面全是引入swiper数据 start！！！
			this.getCavasSwiperImgData();
			// 上面全是引入swiper数据 end！！！
		},
		mounted() {
			/*获取数据1*/
			this.getData();
			// this.user_id = uni.getStorageSync('user_id');
			// 获取我的邀请码
			this.getMycodeData();

		},
		methods: {
			/*获取数据*/
			getData() {
				let self = this;
				uni.showLoading({
					title: '加载中',
				});
				let source = self.getPlatform();
				self._get('plus.agent.qrcode/poster', {
					source: source
				}, function(data) {
					uni.hideLoading();
					self.qrcode_url = data.data.qrcode;
				});
			},
			// 复制按钮https://blog.csdn.net/Zhuangvi/article/details/113089000
			copy(value) {
				uni.setClipboardData({
					data: value + '', //	接受字符串类型 value转化为字符串
					success: () => {
						uni.showToast({
							title: '复制成功',
							duration: 2000,
							icon: 'success'
						});
					}
				});
			},

			// 获取我的邀请码
			getMycodeData() {
				let self = this;
				uni.showLoading({
					title: '加载中'
				});
				self._post('user.index/detail', {
					source: self.getPlatform()
				}, function(res) {
					//#ifdef MP-WEIXIN
					if (res.data.getPhone) {
						//#ifdef MP-WEIXIN
						self.gotoPage('/pages/login/bindmobile');
						//#endif
						//#ifndef MP-WEIXIN
						self.bindMobile();
						//#endif
						return;
					}
					//#endif
					// self.detail = res.data.userInfo;

					// swiper 数据 end !!!!
					// swiper里面的		邀请码
					self.inviteCode = res.data.userInfo.invite_code;
					// swiper 数据 end !!!!

					// 图片下面的	我的邀请码
					self.invite_code = res.data.userInfo.invite_code
					// console.log(res, 'resssself.invite_code');
					uni.hideLoading();
				});
			},
			// 跳转自己封装的海报swiper组件
			getSwiper() {
				console.log(111);
				uni.navigateTo({
					url: '/pages/agent/qrcode/qrcodeSwiper/qrcodeSwiper',
				})
			},




			// 下面全是引入swiper数据 start！！！！！


			// 获取背景图 二维码后	执行  =>		cavas画布绘画
			// 必须先获取图片后在		执行  =>		cavas画布绘画 	=> 否则空白图片
			async getCavasSwiperImgData() {
				let self = this;

				// uni.showLoading({
				// 	title: '加载中',
				// });

				let source = self.getPlatform();
				self._get('plus.agent.qrcode/poster', {
						source: source
					},
					res => {
						// 必须是es6语法否则报错，如何这个不行就缓存普通函数funtion，报错显示this.setcanvas();未找到
						uni.hideLoading();
						if (res.data) {
							// console.log(res,'111获取swiper数组路径&&&222二维码路径');
							self.imgList = res.data.poster;
							self.qrcode = res.data.qrcode;
							self.bgwhite = res.data.back;

							// let qrcode_Path = uni.setStorageSync('qrcodePath',res.data.qrcode);
							// qrcode	二维码路径 放到本地存储防止	data取值为空
							uni.setStorageSync('qrcodePath', res.data.qrcode);

							//	获取底部白色背景图
							uni.setStorageSync('bgwhitePath', res.data.back);

							// 必须先获取图片二维码文字完后执行   =>	后 canvas绘画 this.setcanvas() 这个方法
							this.setcanvas();
						}
					});
			},
			// 这里面应该获取数字和二维码 这个是原始案例没用到注释即可 里面有需要兼容编译
			// async userFission() {
			// 	let source = ''
			// 	// #ifdef APP-PLUS
			// 	source = 'app'
			// 	// #endif
			// 	// // #ifdef MP-WEIXIN
			// 	// source = 'wx'
			// 	// // #endif
			// 	// #ifdef H5
			// 	source = 'h5'
			// 	// #endif
			// 	this._post('user.user/getMyInvitationInfo', {
			// 		category_id: 5,
			// 		source: source
			// 	}, res => {
			// 		if (res.data) {
			// 			const {
			// 				rtn
			// 			} = res.data;
			// 			this.codeTwo = rtn.invitation_code_img;
			// 			this.inviteCode = rtn.invitation_code;
			// 			this.imgList = rtn.supplier_bg;
			// 			// 必须先获取图片二维码文字完后执行   =>	后 canvas绘画 this.setcanvas() 这个方法
			// 			this.setcanvas();
			// 		}
			// 	});
			// },
			/**该方法用来绘制一个有填充色的圆角矩形
			 *@param cxt:canvas的上下文环境 
			 *@param x:左上角x轴坐标 
			 *@param y:左上角y轴坐标 
			 *@param width:矩形的宽度 
			 *@param height:矩形的高度 
			 *@param radius:圆的半径 
			 *@param fillColor:填充颜色 
			 **/

			fillRoundRect(cxt, x, y, width, height, radius, /*optional*/ fillColor) {
				//圆的直径必然要小于矩形的宽高          
				if (2 * radius > width || 2 * radius > height) {
					return false;
				}

				cxt.save();
				cxt.translate(x, y);
				//绘制圆角矩形的各个边  
				this.drawRoundRectPath(cxt, width, height, radius);
				cxt.fillStyle = fillColor || "#fff"; //若是给定了值就用给定的值否则给予默认值  
				cxt.fill();
				cxt.restore();
			},
			drawRoundRectPath(cxt, width, height, radius) {
				cxt.beginPath(0);
				//从右下角顺时针绘制，弧度从0到1/2PI  
				cxt.arc(width - radius, height - radius, radius, 0, Math.PI / 2);

				//矩形下边线  
				cxt.lineTo(radius, height);

				//左下角圆弧，弧度从1/2PI到PI  
				cxt.arc(radius, height - radius, radius, Math.PI / 2, Math.PI);

				//矩形左边线  
				cxt.lineTo(0, radius);

				//左上角圆弧，弧度从PI到3/2PI  
				cxt.arc(radius, radius, radius, Math.PI, Math.PI * 3 / 2);

				//上边线  
				cxt.lineTo(width - radius, 0);

				//右上角圆弧  
				cxt.arc(width - radius, radius, radius, Math.PI * 3 / 2, Math.PI * 2);

				//右边线  
				cxt.lineTo(width, height - radius);
				cxt.closePath();
			},

			// 1.获取图片下载下来 通过异步[return new Promise]返回到		绘制返回到下面 
			//  => setcanvas() 里面 =>ctx.drawImage(await this.downloadFiles 的await是等待的意思 return new Promise返回图片绘制
			downloadFiles(url, that) {
				// console.log(url.file_path, '图片地址未取到llllll');
				// console.log(that, '全局Vue this');
				return new Promise(function(resolve, reject) {
					uni.downloadFile({
						url: url.file_path,
						success: function(res) {
							// console.log(url.file_path,'resIIIIIIIIIIIIIIIIIIIIII');
							if (res.statusCode == 200) {
								resolve(res.tempFilePath)
							} else {
								console.log('出错了')
							}
						},
						fail: function() {
							console.log('服务未返回')
						}
					})
				})
			},
			// 获取二维码
			downloadQrcode(url, that) {
				// console.log(url.file_path, '图片地址未取到llllll');
				// console.log(that, '全局Vue this');
				// console.log(url, '获取二维码图片路径');
				return new Promise(function(resolve, reject) {
					uni.downloadFile({
						url: url,
						success: function(res) {
							// console.log(url.file_path,'resIIIIIIIIIIIIIIIIIIIIII');
							if (res.statusCode == 200) {
								resolve(res.tempFilePath)
							} else {
								console.log('出错了')
							}
						},
						fail: function() {
							console.log('服务未返回')
						}
					})
				})
			},
			// 这里是绘制
			async setcanvas() {
				let bg_img = this.imgList[this.currentIndex];
				// console.log(bg_img, '滑动的每一个对象');
				// 	获取整个canvas上面view
				let ctx = uni.createCanvasContext('myCanvas');
				// var ctx = uni.createCanvasContext('myCanvas', this);// 上面报错就用这个

				// 这个是背景图swiper !!!	获取每个swiper下面item滑动选中的哪一个
				ctx.drawImage(await this.downloadFiles(bg_img, this), 0, 0, uni.upx2px(400), uni.upx2px(
					710)); //绘制图 uni.upx2px(750) *



				// ctx.drawImage(this.codeTwo, uni.upx2px(28), uni.upx2px(590), uni.upx2px(82), uni.upx2px(82));
				// 注释1
				// ctx.drawImage(await this.downloadFiles(this.codeTwo, this), uni.upx2px(28), uni.upx2px(590), uni
				// 	.upx2px(82), uni.upx2px(82));

				// ctx.drawImage(await this.downloadFiles(this.qrcode, this), uni.upx2px(28), uni.upx2px(590), uni
				// 	.upx2px(82), uni.upx2px(82));

				// ctx.drawImage(this.qrcode, uni.upx2px(28), uni.upx2px(590), uni
				// 	.upx2px(82), uni.upx2px(82));
				// ctx.drawImage(await this.downloadFiles(this.qrcode, this), uni.upx2px(28), uni.upx2px(590), uni.upx2px(82), uni.upx2px(82));


				// 底部白色背景图1


				// ctx.drawImage(await this.downloadQrcode(this.bgwhite, this), uni.upx2px(26), uni.upx2px(590), uni
				// 	.upx2px(350), uni
				// 	.upx2px(100));

				ctx.drawImage(await this.downloadQrcode(this.bgwhite, this), uni.upx2px(26), uni.upx2px(590), uni
					.upx2px(350), uni
					.upx2px(100));




				// qrcode	二维码路径 放到本地存储防止	data取值为空
				let qrcode_Path = uni.getStorageSync('qrcodePath');

				// 可以二维码
				// ctx.drawImage(await this.downloadQrcode(qrcode_Path, this), uni.upx2px(28), uni.upx2px(590), uni
				// 	.upx2px(82), uni.upx2px(82));

				ctx.drawImage(await this.downloadQrcode(qrcode_Path, this), uni.upx2px(35), uni.upx2px(600), uni
					.upx2px(82), uni.upx2px(82));

				ctx.font = 'normal 8px sans-serif';
				ctx.fillStyle = "#848484";
				// ctx.fillText('我的邀请码', uni.upx2px(130), uni.upx2px(606));
				ctx.fillText('我的邀请码', uni.upx2px(135), uni.upx2px(620));
				ctx.font = 'normal 10px sans-serif';
				ctx.fillStyle = "#FF2741";
				// ctx.fillText(this.inviteCode, uni.upx2px(130), uni.upx2px(640));
				ctx.fillText(this.inviteCode, uni.upx2px(135), uni.upx2px(648));
				ctx.font = 'normal 8px sans-serif';
				ctx.fillStyle = "#282828";
				// ctx.fillText('长按识别二维码加入中闽天品', uni.upx2px(130), uni.upx2px(670));
				ctx.fillText('长按识别二维码加入中闽天品', uni.upx2px(135), uni.upx2px(675));



				ctx.draw(false, () => {

					// console.log('绘制完成')
					// 注释2
					// console.error(bg_img)

					this.getFail();
				})




				// // 注释2
				// console.log(bg_img, 'bg_imgbg_img');
			},
			//点击画布宽高设置	图片 
			getFail(type) {
				let self = this;
				uni.canvasToTempFilePath({ // 把画布转化成临时文件1
					x: 0,
					y: 0,
					width: uni.upx2px(400), // 截取的画布的宽
					height: uni.upx2px(710), // 截取的画布的高
					destWidth: uni.upx2px(360) * 3, // 保存成的画布宽度
					destHeight: uni.upx2px(680) * 3, // 保存成的画布高度
					fileType: 'png', // 保存成的文件类型
					quality: 1, // 图片质量
					canvasId: 'myCanvas', // 画布ID 
					success(res) {

						// 绘画图片路径
						self.picture = res.tempFilePath;

						//  绘制最后路径
						// console.log(res, '绘制完成图片路径');

						uni.setStorageSync('tempFilePath', res.tempFilePath);
						self.picture = uni.setStorageSync('tempFilePath', res.tempFilePath);



					},
					fail(fail) {
						uni.showToast({
							title: '保存失败，稍后再试', //'保存失败，稍后再试'
							duration: 2000,
							icon: 'none'
						})
						uni.hideLoading();
					}
				})
			},

			// 点击下载保存相册按钮
			downLoad() {
				// console.log(this.imgList[this.currentIndex],'this.imgList[this.currentIndex]');
				console.log(uni.getStorageSync('tempFilePath'), 'getStorageSync下载按钮未取到路径啊啊');


				let self = this;

				// 2-保存图片至相册
				uni.saveImageToPhotosAlbum({ // 存成图片至手机1
					// filePath: this.picture,
					// filePath: pathw,
					// filePath:'data:image/png;base64,base64'+ uni.getStorageSync('tempFilePath'),
					filePath: uni.getStorageSync('tempFilePath'), // 未取到路径myPromise

					success(res2) {
						uni.hideLoading();
						uni.showToast({
							title: '保存成功', //'保存成功'
							duration: 500
						})

					},
					fail(res3) {
						console.log(res3, 'res3AAAAAA');

						if (res3.errMsg === 'saveImageToPhotosAlbum:fail auth deny') {
							uni.showToast({
								title: '保存失败，稍后再试1', //'保存失败，稍后再试'
								duration: 2000,
								icon: 'none'
							})
							uni.hideLoading();
						} else {
							uni.showToast({
								title: '保存失败，稍后再试2', //'保存失败，稍后再试'
								duration: 2000,
								icon: 'none'
							})
							uni.hideLoading();
						}
					}
				})
			},


			copyCode() {
				uni.setClipboardData({
					data: this.inviteCode,
					success: () => {
						uni.showToast({
							title: '复制成功'
						})
					}
				});
			},
			swiperChange(e) {
				this.dontFirstAnimation = false
				this.currentIndex = e.detail.current
				this.setcanvas()
				// 切换调用图片二维码数据
				this.getCavasSwiperImgData();
			},

			// 上面全是引入swiper数据 end ！！！！！
		}
	}
script>

<style lang="scss" scoped>
	page {
		background: #F8F8F8;
	}

	.qrcode {
		width: 100%;
		// height: 100vh !important;
	}

	// 下面全是引入swiper数据 start！！！！！!
	.qrcode_swiper {
		margin-top: 71rpx;

		// height: 500rpx;
		// border:1rpx solid red;
		.swiper-wrap {
			padding-top: 20rpx;
		}

		.image-container {
			width: 750rpx;
			// height: 939rpx;
			height: 756rpx;
		}

		.item-img {
			width: 528rpx;
			// height: 939rpx;
			height: 756rpx;
			border-radius: 14rpx;
			animation: to-big .3s;
		}

		// 中间选中
		.swiper-item {
			// width: 528rpx;
			width: 540rpx;
			// height: 939rpx;
			height: 756rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.item-img-side {
			width: 528rpx;
			// height: 939rpx;
			height: 756rpx;
			border-radius: 14rpx;
			animation: to-mini .3s;
			// transform: scale(0.85);
			transform: scale(0.85);
			// @keyframes to-mini 也要改 在最下面scale(0.85)

			// 两侧底部有白边超出父元素隐藏
			overflow: hidden;
		}

		// 两边
		.swiper-item-side {
			width: 528rpx;
			// height: 939rpx;
			height: 756rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			// transform: scale(0.85);
			transform: scale(0.85);
		}

		.item-content {
			position: relative;

			image {
				width: 528rpx;
				// height: 939rpx;
				height: 756rpx;
				border-radius: 20rpx;
			}

			.bgwhiteImg {
				margin-left: 20rpx;
				// border-radius: 20rpx;
			}

			.bottom-box {
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				bottom: 31rpx;
				padding: 16rpx 19rpx;
				background-color: #FFFFFF;
				width: 492rpx;
				border-radius: 10rpx;
				// height: 140rpx;
				display: flex;
				box-sizing: border-box;

				.code {
					width: 111rpx;
					height: 108rpx;
					margin-right: 12rpx;
					flex-shrink: 0;
				}

				.right-inner {
					height: 80rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.invite-top {
						font-size: 25rpx;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: #848484;
						// line-height: 22rpx;
					}

					.invite-center {
						font-size: 28rpx;
						font-family: Microsoft YaHei;
						font-weight: bold;
						color: #FF2741;
						// line-height: 1.5;
					}

					.invite-bottom {
						font-size: 25rpx;
						font-family: Microsoft YaHei;
						font-weight: bold;
						color: #282828;
						// line-height: 1.5;
						// 强制不换行
						white-space: nowrap;
					}
				}
			}
		}

		@keyframes to-mini {
			from {
				transform: scale(1);
			}

			to {
				// transform: scale(0.85);
				transform: scale(0.85);
			}
		}

		@keyframes to-big {
			from {
				// transform: scale(0.85);
				transform: scale(0.85);
			}

			to {
				transform: scale(1);
			}
		}

	}

	// 上面全是引入swiper数据 end ！！！！！


	// 我的邀请码
	.myinvitationcode {
		// margin-top: 56rpx;
		width: 700rpx;
		height: 178rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		margin: 56rpx auto;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.myinvitationcode_lft {
			margin-left: 49rpx;
			display: flex;
			flex-direction: column;

			.myinvitationcode_lft_top {
				font-size: 26rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #727272;
				line-height: 38rpx;
			}

			.myinvitationcode_lft_btm {
				font-size: 45rpx;
				font-family: Microsoft YaHei;
				font-weight: bold;
				color: #000000;
				line-height: 1.2;
			}
		}

		.myinvitationcode_rgt {
			margin-right: 49rpx;
			width: 168rpx;
			height: 70rpx;
			// background: #FF2741;
			// background: rgb(223, 216, 239);
			background: #000;
			// opacity: 0.1;
			border-radius: 35rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			.myinvitationcode_rgt_txt {
				font-size: 32rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				// color: FF2741;
				// color: rgb(223, 51, 93);
				color: #fff;
				// line-height: 24rpx;

			}
		}
	}


	// 邀请步骤
	.invitationsteps {
		display: flex;
		justify-content: space-between;
		flex-direction: row;
		align-items: center;

		.invitationsteps_lft {
			margin-left: 31rpx;
			display: flex;
			flex-direction: column;

			.invitationsteps_lft_one {
				font-size: 28rpx;
				font-family: Microsoft YaHei;
				font-weight: bold;
				color: #9F9F9F;
				line-height: 38rpx;
			}

			.invitationsteps_lft_two {
				font-size: 28rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #AFAEAE;
				line-height: 38rpx;
			}
		}

		.invitationsteps_rgt {
			margin-right: 53rpx;
			width: 185rpx;
			height: 185rpx;
		}
	}

	// .poster_img {
	// 	width: 100%;
	// 	height: 100vh !important;
	// 	position: absolute;
	// }

	// .poster_image {
	// 	width: 100%;
	// 	height: 100vh !important;
	// }

	// uni-image {
	// 	width: 100%;
	// 	height: 100vh !important;
	// 	position: absolute;
	// }
	// .qrcode_img_box {
	// 	width: 100%;
	// 	display: flex;
	// 	justify-content: center;

	// 	.qrcode_img {
	// 		width: 80%;
	// 		position: relative;
	// 		border-radius: 15rpx;
	// 		position: fixed;
	// 		bottom: 150rpx;
	// 		z-index: 999;
	// 		background-color: #fff;
	// 		// width: 100rpx !important;
	// 		// height: 100rpx !important;
	// 		display: flex;
	// 		padding: 20rpx;

	// 		// margin: 20rpx;
	// 		.qrcode_img_left {
	// 			width: 150rpx;
	// 			height: 150rpx;
	// 		}

	// 		.qrcode_img_right {
	// 			display: flex;
	// 			flex-direction: column;
	// 			justify-content: space-around;
	// 			margin-left: 20rpx;

	// 			.qrcode_img_right_top {
	// 				color: #ccc;
	// 				font-size: 30rpx
	// 			}

	// 			.qrcode_img_right_center {
	// 				color: rgb(223, 70, 109);
	// 				font-size: 30rpx;
	// 				font-weight: 800;
	// 			}

	// 			.qrcode_img_right_tbtm {
	// 				color: #000;
	// 				font-size: 30rpx;
	// 			}
	// 		}
	// 	}
	// }





	.btns-wrap {
		position: fixed;
		height: 88rpx;
		right: 0;
		bottom: 35rpx;
		left: 0;
		display: flex;
		z-index: 10;

	}

	// button样式
	// .btns-wrap button {
	// 	width: 700rpx;
	// 	height: 94rpx;
	// 	background: linear-gradient(90deg, #FF2C43, #FC5B5A);
	// 	border-radius: 10rpx;
	// 	margin: 0 auto;
	// 	display: flex;
	// 	justify-content: center;
	// 	align-items: center;
	// }
	// .btns-wrap button image{
	// 	width: 33rpx;
	// 	height: 33rpx;
	// }
	// .btns-wrap button text {
	// 	font-size: 28rpx;
	// 	font-family: Microsoft YaHei;
	// 	font-weight: 400;
	// 	color: #FFFFFF;
	// 	line-height: 88rpx;
	// }

	.wrapBtn {
		width: 700rpx;
		height: 94rpx;
		background: linear-gradient(90deg, #FF2C43, #FC5B5A);
		border-radius: 10rpx;
		margin: 0 auto;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.wrapBtn image {
		width: 35rpx;
		height: 35rpx;
	}

	.wrapBtn text {
		font-size: 35rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 27rpx;
		// margin-left: 13rpx;
		margin-left: 10rpx;
	}


	.btns-wrap .btn-red {
		width: 100%;
		height: 88rpx;
		line-height: 88rpx;
		border-radius: 0;
	}
style>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115
    • 116
    • 117
    • 118
    • 119
    • 120
    • 121
    • 122
    • 123
    • 124
    • 125
    • 126
    • 127
    • 128
    • 129
    • 130
    • 131
    • 132
    • 133
    • 134
    • 135
    • 136
    • 137
    • 138
    • 139
    • 140
    • 141
    • 142
    • 143
    • 144
    • 145
    • 146
    • 147
    • 148
    • 149
    • 150
    • 151
    • 152
    • 153
    • 154
    • 155
    • 156
    • 157
    • 158
    • 159
    • 160
    • 161
    • 162
    • 163
    • 164
    • 165
    • 166
    • 167
    • 168
    • 169
    • 170
    • 171
    • 172
    • 173
    • 174
    • 175
    • 176
    • 177
    • 178
    • 179
    • 180
    • 181
    • 182
    • 183
    • 184
    • 185
    • 186
    • 187
    • 188
    • 189
    • 190
    • 191
    • 192
    • 193
    • 194
    • 195
    • 196
    • 197
    • 198
    • 199
    • 200
    • 201
    • 202
    • 203
    • 204
    • 205
    • 206
    • 207
    • 208
    • 209
    • 210
    • 211
    • 212
    • 213
    • 214
    • 215
    • 216
    • 217
    • 218
    • 219
    • 220
    • 221
    • 222
    • 223
    • 224
    • 225
    • 226
    • 227
    • 228
    • 229
    • 230
    • 231
    • 232
    • 233
    • 234
    • 235
    • 236
    • 237
    • 238
    • 239
    • 240
    • 241
    • 242
    • 243
    • 244
    • 245
    • 246
    • 247
    • 248
    • 249
    • 250
    • 251
    • 252
    • 253
    • 254
    • 255
    • 256
    • 257
    • 258
    • 259
    • 260
    • 261
    • 262
    • 263
    • 264
    • 265
    • 266
    • 267
    • 268
    • 269
    • 270
    • 271
    • 272
    • 273
    • 274
    • 275
    • 276
    • 277
    • 278
    • 279
    • 280
    • 281
    • 282
    • 283
    • 284
    • 285
    • 286
    • 287
    • 288
    • 289
    • 290
    • 291
    • 292
    • 293
    • 294
    • 295
    • 296
    • 297
    • 298
    • 299
    • 300
    • 301
    • 302
    • 303
    • 304
    • 305
    • 306
    • 307
    • 308
    • 309
    • 310
    • 311
    • 312
    • 313
    • 314
    • 315
    • 316
    • 317
    • 318
    • 319
    • 320
    • 321
    • 322
    • 323
    • 324
    • 325
    • 326
    • 327
    • 328
    • 329
    • 330
    • 331
    • 332
    • 333
    • 334
    • 335
    • 336
    • 337
    • 338
    • 339
    • 340
    • 341
    • 342
    • 343
    • 344
    • 345
    • 346
    • 347
    • 348
    • 349
    • 350
    • 351
    • 352
    • 353
    • 354
    • 355
    • 356
    • 357
    • 358
    • 359
    • 360
    • 361
    • 362
    • 363
    • 364
    • 365
    • 366
    • 367
    • 368
    • 369
    • 370
    • 371
    • 372
    • 373
    • 374
    • 375
    • 376
    • 377
    • 378
    • 379
    • 380
    • 381
    • 382
    • 383
    • 384
    • 385
    • 386
    • 387
    • 388
    • 389
    • 390
    • 391
    • 392
    • 393
    • 394
    • 395
    • 396
    • 397
    • 398
    • 399
    • 400
    • 401
    • 402
    • 403
    • 404
    • 405
    • 406
    • 407
    • 408
    • 409
    • 410
    • 411
    • 412
    • 413
    • 414
    • 415
    • 416
    • 417
    • 418
    • 419
    • 420
    • 421
    • 422
    • 423
    • 424
    • 425
    • 426
    • 427
    • 428
    • 429
    • 430
    • 431
    • 432
    • 433
    • 434
    • 435
    • 436
    • 437
    • 438
    • 439
    • 440
    • 441
    • 442
    • 443
    • 444
    • 445
    • 446
    • 447
    • 448
    • 449
    • 450
    • 451
    • 452
    • 453
    • 454
    • 455
    • 456
    • 457
    • 458
    • 459
    • 460
    • 461
    • 462
    • 463
    • 464
    • 465
    • 466
    • 467
    • 468
    • 469
    • 470
    • 471
    • 472
    • 473
    • 474
    • 475
    • 476
    • 477
    • 478
    • 479
    • 480
    • 481
    • 482
    • 483
    • 484
    • 485
    • 486
    • 487
    • 488
    • 489
    • 490
    • 491
    • 492
    • 493
    • 494
    • 495
    • 496
    • 497
    • 498
    • 499
    • 500
    • 501
    • 502
    • 503
    • 504
    • 505
    • 506
    • 507
    • 508
    • 509
    • 510
    • 511
    • 512
    • 513
    • 514
    • 515
    • 516
    • 517
    • 518
    • 519
    • 520
    • 521
    • 522
    • 523
    • 524
    • 525
    • 526
    • 527
    • 528
    • 529
    • 530
    • 531
    • 532
    • 533
    • 534
    • 535
    • 536
    • 537
    • 538
    • 539
    • 540
    • 541
    • 542
    • 543
    • 544
    • 545
    • 546
    • 547
    • 548
    • 549
    • 550
    • 551
    • 552
    • 553
    • 554
    • 555
    • 556
    • 557
    • 558
    • 559
    • 560
    • 561
    • 562
    • 563
    • 564
    • 565
    • 566
    • 567
    • 568
    • 569
    • 570
    • 571
    • 572
    • 573
    • 574
    • 575
    • 576
    • 577
    • 578
    • 579
    • 580
    • 581
    • 582
    • 583
    • 584
    • 585
    • 586
    • 587
    • 588
    • 589
    • 590
    • 591
    • 592
    • 593
    • 594
    • 595
    • 596
    • 597
    • 598
    • 599
    • 600
    • 601
    • 602
    • 603
    • 604
    • 605
    • 606
    • 607
    • 608
    • 609
    • 610
    • 611
    • 612
    • 613
    • 614
    • 615
    • 616
    • 617
    • 618
    • 619
    • 620
    • 621
    • 622
    • 623
    • 624
    • 625
    • 626
    • 627
    • 628
    • 629
    • 630
    • 631
    • 632
    • 633
    • 634
    • 635
    • 636
    • 637
    • 638
    • 639
    • 640
    • 641
    • 642
    • 643
    • 644
    • 645
    • 646
    • 647
    • 648
    • 649
    • 650
    • 651
    • 652
    • 653
    • 654
    • 655
    • 656
    • 657
    • 658
    • 659
    • 660
    • 661
    • 662
    • 663
    • 664
    • 665
    • 666
    • 667
    • 668
    • 669
    • 670
    • 671
    • 672
    • 673
    • 674
    • 675
    • 676
    • 677
    • 678
    • 679
    • 680
    • 681
    • 682
    • 683
    • 684
    • 685
    • 686
    • 687
    • 688
    • 689
    • 690
    • 691
    • 692
    • 693
    • 694
    • 695
    • 696
    • 697
    • 698
    • 699
    • 700
    • 701
    • 702
    • 703
    • 704
    • 705
    • 706
    • 707
    • 708
    • 709
    • 710
    • 711
    • 712
    • 713
    • 714
    • 715
    • 716
    • 717
    • 718
    • 719
    • 720
    • 721
    • 722
    • 723
    • 724
    • 725
    • 726
    • 727
    • 728
    • 729
    • 730
    • 731
    • 732
    • 733
    • 734
    • 735
    • 736
    • 737
    • 738
    • 739
    • 740
    • 741
    • 742
    • 743
    • 744
    • 745
    • 746
    • 747
    • 748
    • 749
    • 750
    • 751
    • 752
    • 753
    • 754
    • 755
    • 756
    • 757
    • 758
    • 759
    • 760
    • 761
    • 762
    • 763
    • 764
    • 765
    • 766
    • 767
    • 768
    • 769
    • 770
    • 771
    • 772
    • 773
    • 774
    • 775
    • 776
    • 777
    • 778
    • 779
    • 780
    • 781
    • 782
    • 783
    • 784
    • 785
    • 786
    • 787
    • 788
    • 789
    • 790
    • 791
    • 792
    • 793
    • 794
    • 795
    • 796
    • 797
    • 798
    • 799
    • 800
    • 801
    • 802
    • 803
    • 804
    • 805
    • 806
    • 807
    • 808
    • 809
    • 810
    • 811
    • 812
    • 813
    • 814
    • 815
    • 816
    • 817
    • 818
    • 819
    • 820
    • 821
    • 822
    • 823
    • 824
    • 825
    • 826
    • 827
    • 828
    • 829
    • 830
    • 831
    • 832
    • 833
    • 834
    • 835
    • 836
    • 837
    • 838
    • 839
    • 840
    • 841
    • 842
    • 843
    • 844
    • 845
    • 846
    • 847
    • 848
    • 849
    • 850
    • 851
    • 852
    • 853
    • 854
    • 855
    • 856
    • 857
    • 858
    • 859
    • 860
    • 861
    • 862
    • 863
    • 864
    • 865
    • 866
    • 867
    • 868
    • 869
    • 870
    • 871
    • 872
    • 873
    • 874
    • 875
    • 876
    • 877
    • 878
    • 879
    • 880
    • 881
    • 882
    • 883
    • 884
    • 885
    • 886
    • 887
    • 888
    • 889
    • 890
    • 891
    • 892
    • 893
    • 894
    • 895
    • 896
    • 897
    • 898
    • 899
    • 900
    • 901
    • 902
    • 903
    • 904
    • 905
    • 906
    • 907
    • 908
    • 909
    • 910
    • 911
    • 912
    • 913
    • 914
    • 915
    • 916
    • 917
    • 918
    • 919
    • 920
    • 921
    • 922
    • 923
    • 924
    • 925
    • 926
    • 927
    • 928
    • 929
    • 930
    • 931
    • 932
    • 933
    • 934
    • 935
    • 936
    • 937
    • 938
    • 939
    • 940
    • 941
    • 942
    • 943
    • 944
    • 945
    • 946
    • 947
    • 948
    • 949
    • 950
    • 951
    • 952
    • 953
    • 954
    • 955
    • 956
    • 957
    • 958
    • 959
    • 960
    • 961
    • 962
    • 963
    • 964
    • 965
    • 966
    • 967
    • 968
    • 969
    • 970
    • 971
    • 972
    • 973
    • 974
    • 975
    • 976
    • 977
    • 978
    • 979
    • 980
    • 981
    • 982
    • 983
    • 984
    • 985
    • 986
    • 987
    • 988
    • 989
    • 990
    • 991
    • 992
    • 993
    • 994
    • 995
    • 996
    • 997
    • 998

    封装图片效果

    请添加图片描述

    封装源码qrcodeSwiper.vue

    <template>
	<view class="page-view SourceHanSansSC-Normal">
		
		<view class="swiper-wrap" v-if="imgList.length">
			
			<swiper class="image-container" previous-margin="111rpx" next-margin="111rpx" circular
				@change="swiperChange">
				
				<swiper-item :class="currentIndex == index ? 'swiper-item' : 'swiper-item-side'"
					v-for="(item, index) in imgList" :key="index">
					<view class="item-content" :class="currentIndex == index ? 'item-img' : 'item-img-side'">
						<image :src="item.file_path" lazy-load :style="dontFirstAnimation ? 'animation: none;' : ''"
							mode="aspectFill">image>
							
						

						<image :src="bgwhite" class="bgwhiteImg">
							<view class="bottom-box flex-center">
								
								<image :src="qrcode" class="code">image>
								<view class="right-inner">
									<view class="invite-top">我的邀请码view>
									<view class="invite-center">
										{{inviteCode}}
									view>
									<view class="font-color-46 invite-bottom">长按识别二维码加入中闽天品view>
								view>
							view>

						image>
					view>
				swiper-item>
			swiper>
		view>
		<view class="section-wrap">

			<view class="group-three-wrap flex-item-center" v-if="imgList.length">
				<view class="flex-item-center btn" @tap="downLoad">
					
					<text class="font-color-fff">保存到手机text>
				view>
			view>
		view>
		
		<view style="width: 100%;z-index: 500;position: fixed;left: 0;top: -1000vh;">
			<view style="width: 100%;height: 1624upx;position: relative;background-color: #FFFFFF;">
				<canvas style="width: 400rpx;height: 710rpx;" canvas-id="myCanvas" ref="myBox">canvas>
			view>
		view>
	view>
template>

<script>
	export default {
		data() {
			return {
				// 接口获取swiper图片数组
				imgList: [],
				// 本地测试假数据
				// imgList: [
				// 	{
				// 		currentIndex: 0,
				// 		file_path: 'https://testshop.yunjingwl.com/uploads/20230919/940337925d4f0a897d8447dd9b72d918.jpg',
				// 	},
				// 	{
				// 		currentIndex: 1,
				// 		file_path: 'https://testshop.yunjingwl.com/uploads/20230919/7686286376d8ab9627c892776384cf20.png',
				// 	},
				// 	{
				// 		currentIndex: 2,
				// 		file_path: 'https://testshop.yunjingwl.com/uploads/20230919/940337925d4f0a897d8447dd9b72d918.jpg',
				// 	},
				// 	{
				// 		currentIndex: 3,
				// 		file_path: 'https://testshop.yunjingwl.com/uploads/20230919/7686286376d8ab9627c892776384cf20.png',
				// 	},
				// ],
				// 轮播图索引index默认选中0，第一个
				currentIndex: 0,
				dontFirstAnimation: true,
				codeTwo: '',
				inviteCode: '', //邀请码
				// canvas绘制的图片路径
				picture: uni.getStorageSync('tempFilePath'),
				// 接口获取二维码图片
				qrcode: '', // view上面也要绑定image 绑定src路径
				bgwhite: '', // swiper底部白色背景图,要绑定image 绑定src路径
			}
		},
		onShow() {
			this.getCavasSwiperImgData();
			// this.userFission();// 之前是注释状态
		},
		onLoad() {
			// console.log(this.imgList,'swiper路径');
			// console.log(this.qrcode,'二维码路径');
			this.getMycodeData();
		},
		methods: {
			// 获取背景图 二维码后	执行  =>		cavas画布绘画 
			// 必须先获取图片后在		执行  =>		cavas画布绘画 	=> 否则空白图片
			async getCavasSwiperImgData() {
				let self = this;
				uni.showLoading({
					title: '加载中',
				});
				let source = self.getPlatform();
				self._get('plus.agent.qrcode/poster', {
						source: source
					},
					res => {
						// 必须是es6语法否则报错，如何这个不行就缓存普通函数funtion，报错显示this.setcanvas();未找到
						uni.hideLoading();
						if (res.data) {
							// console.log(res,'111获取swiper数组路径&&&222二维码路径');
							self.imgList = res.data.poster;
							self.qrcode = res.data.qrcode;
							self.bgwhite = res.data.back;

							// let qrcode_Path = uni.setStorageSync('qrcodePath',res.data.qrcode);
							// qrcode	二维码路径 放到本地存储防止	data取值为空
							uni.setStorageSync('qrcodePath', res.data.qrcode);

							//	获取底部白色背景图
							uni.setStorageSync('bgwhitePath', res.data.back);

							// 必须先获取图片二维码文字完后执行   =>	后 canvas绘画 this.setcanvas() 这个方法
							this.setcanvas();
						}
					});
			},
			// 这里面应该获取数字和二维码 这个是原始案例没用到注释即可
			// async userFission() {
			// 	let source = ''
			// 	// #ifdef APP-PLUS
			// 	source = 'app'
			// 	// #endif
			// 	// // #ifdef MP-WEIXIN
			// 	// source = 'wx'
			// 	// // #endif
			// 	// #ifdef H5
			// 	source = 'h5'
			// 	// #endif
			// 	this._post('user.user/getMyInvitationInfo', {
			// 		category_id: 5,
			// 		source: source
			// 	}, res => {
			// 		if (res.data) {
			// 			const {
			// 				rtn
			// 			} = res.data;
			// 			this.codeTwo = rtn.invitation_code_img;
			// 			this.inviteCode = rtn.invitation_code;
			// 			this.imgList = rtn.supplier_bg;
			// 			// 必须先获取图片二维码文字完后执行   =>	后 canvas绘画 this.setcanvas() 这个方法
			// 			this.setcanvas();
			// 		}
			// 	});
			// },
			/**该方法用来绘制一个有填充色的圆角矩形
			 *@param cxt:canvas的上下文环境 
			 *@param x:左上角x轴坐标 
			 *@param y:左上角y轴坐标 
			 *@param width:矩形的宽度 
			 *@param height:矩形的高度 
			 *@param radius:圆的半径 
			 *@param fillColor:填充颜色 
			 **/

			fillRoundRect(cxt, x, y, width, height, radius, /*optional*/ fillColor) {
				//圆的直径必然要小于矩形的宽高          
				if (2 * radius > width || 2 * radius > height) {
					return false;
				}

				cxt.save();
				cxt.translate(x, y);
				//绘制圆角矩形的各个边  
				this.drawRoundRectPath(cxt, width, height, radius);
				cxt.fillStyle = fillColor || "#fff"; //若是给定了值就用给定的值否则给予默认值  
				cxt.fill();
				cxt.restore();
			},
			drawRoundRectPath(cxt, width, height, radius) {
				cxt.beginPath(0);
				//从右下角顺时针绘制，弧度从0到1/2PI  
				cxt.arc(width - radius, height - radius, radius, 0, Math.PI / 2);

				//矩形下边线  
				cxt.lineTo(radius, height);

				//左下角圆弧，弧度从1/2PI到PI  
				cxt.arc(radius, height - radius, radius, Math.PI / 2, Math.PI);

				//矩形左边线  
				cxt.lineTo(0, radius);

				//左上角圆弧，弧度从PI到3/2PI  
				cxt.arc(radius, radius, radius, Math.PI, Math.PI * 3 / 2);

				//上边线  
				cxt.lineTo(width - radius, 0);

				//右上角圆弧  
				cxt.arc(width - radius, radius, radius, Math.PI * 3 / 2, Math.PI * 2);

				//右边线  
				cxt.lineTo(width, height - radius);
				cxt.closePath();
			},

			// 1.获取图片下载下来 通过异步[return new Promise]返回到		绘制返回到下面 
			//  => setcanvas() 里面 =>ctx.drawImage(await this.downloadFiles 的await是等待的意思 return new Promise返回图片绘制
			downloadFiles(url, that) {
				// console.log(url.file_path, '图片地址未取到llllll');
				// console.log(that, '全局Vue this');
				return new Promise(function(resolve, reject) {
					uni.downloadFile({
						url: url.file_path,
						success: function(res) {
							// console.log(url.file_path,'resIIIIIIIIIIIIIIIIIIIIII');
							if (res.statusCode == 200) {
								resolve(res.tempFilePath)
							} else {
								console.log('出错了')
							}
						},
						fail: function() {
							console.log('服务未返回')
						}
					})
				})
			},
			// 获取二维码
			downloadQrcode(url, that) {
				// console.log(url.file_path, '图片地址未取到llllll');
				// console.log(that, '全局Vue this');
				console.log(url, '获取二维码图片路径');
				return new Promise(function(resolve, reject) {
					uni.downloadFile({
						url: url,
						success: function(res) {
							// console.log(url.file_path,'resIIIIIIIIIIIIIIIIIIIIII');
							if (res.statusCode == 200) {
								resolve(res.tempFilePath)
							} else {
								console.log('出错了')
							}
						},
						fail: function() {
							console.log('服务未返回')
						}
					})
				})
			},
			// 这里是绘制
			async setcanvas() {
				let bg_img = this.imgList[this.currentIndex];
				// console.log(bg_img, '滑动的每一个对象');
				// 	获取整个canvas上面view
				let ctx = uni.createCanvasContext('myCanvas');
				// var ctx = uni.createCanvasContext('myCanvas', this);// 上面报错就用这个

				// 这个是背景图swiper !!!	获取每个swiper下面item滑动选中的哪一个
				ctx.drawImage(await this.downloadFiles(bg_img, this), 0, 0, uni.upx2px(400), uni.upx2px(
					710)); //绘制图 uni.upx2px(750) *



				// ctx.drawImage(this.codeTwo, uni.upx2px(28), uni.upx2px(590), uni.upx2px(82), uni.upx2px(82));
				// 注释1
				// ctx.drawImage(await this.downloadFiles(this.codeTwo, this), uni.upx2px(28), uni.upx2px(590), uni
				// 	.upx2px(82), uni.upx2px(82));

				// ctx.drawImage(await this.downloadFiles(this.qrcode, this), uni.upx2px(28), uni.upx2px(590), uni
				// 	.upx2px(82), uni.upx2px(82));

				// ctx.drawImage(this.qrcode, uni.upx2px(28), uni.upx2px(590), uni
				// 	.upx2px(82), uni.upx2px(82));
				// ctx.drawImage(await this.downloadFiles(this.qrcode, this), uni.upx2px(28), uni.upx2px(590), uni.upx2px(82), uni.upx2px(82));


				// 底部白色背景图1


				// ctx.drawImage(await this.downloadQrcode(this.bgwhite, this), uni.upx2px(26), uni.upx2px(590), uni
				// 	.upx2px(350), uni
				// 	.upx2px(100));

				ctx.drawImage(await this.downloadQrcode(this.bgwhite, this), uni.upx2px(26), uni.upx2px(590), uni
					.upx2px(350), uni
					.upx2px(100));




				// qrcode	二维码路径 放到本地存储防止	data取值为空
				let qrcode_Path = uni.getStorageSync('qrcodePath');

				// 可以二维码
				// ctx.drawImage(await this.downloadQrcode(qrcode_Path, this), uni.upx2px(28), uni.upx2px(590), uni
				// 	.upx2px(82), uni.upx2px(82));

				ctx.drawImage(await this.downloadQrcode(qrcode_Path, this), uni.upx2px(35), uni.upx2px(600), uni
					.upx2px(82), uni.upx2px(82));

				ctx.font = 'normal 8px sans-serif';
				ctx.fillStyle = "#848484";
				// ctx.fillText('我的邀请码', uni.upx2px(130), uni.upx2px(606));
				ctx.fillText('我的邀请码', uni.upx2px(135), uni.upx2px(620));
				ctx.font = 'normal 10px sans-serif';
				ctx.fillStyle = "#FF2741";
				// ctx.fillText(this.inviteCode, uni.upx2px(130), uni.upx2px(640));
				ctx.fillText(this.inviteCode, uni.upx2px(135), uni.upx2px(648));
				ctx.font = 'normal 8px sans-serif';
				ctx.fillStyle = "#282828";
				// ctx.fillText('长按识别二维码加入中闽天品', uni.upx2px(130), uni.upx2px(670));
				ctx.fillText('长按识别二维码加入中闽天品', uni.upx2px(135), uni.upx2px(675));




				ctx.draw(false, () => {
					console.log('绘制完成')
					// 注释2
					// console.error(bg_img)

					this.getFail();
				})




				// // 注释2
				// console.log(bg_img, 'bg_imgbg_img');
			},
			//点击画布宽高设置	图片 
			getFail(type) {
				let self = this;
				uni.canvasToTempFilePath({ // 把画布转化成临时文件1
					x: 0,
					y: 0,
					width: uni.upx2px(400), // 截取的画布的宽
					height: uni.upx2px(710), // 截取的画布的高
					destWidth: uni.upx2px(400) * 3, // 保存成的画布宽度
					destHeight: uni.upx2px(710) * 3, // 保存成的画布高度
					fileType: 'jpg', // 保存成的文件类型
					quality: 1, // 图片质量
					canvasId: 'myCanvas', // 画布ID 
					success(res) {

						// 绘画图片路径
						self.picture = res.tempFilePath;

						//  绘制最后路径
						console.log(res, '绘制完成图片路径');

						uni.setStorageSync('tempFilePath', res.tempFilePath);
						self.picture = uni.setStorageSync('tempFilePath', res.tempFilePath);



					},
					fail(fail) {
						uni.showToast({
							title: '保存失败，稍后再试', //'保存失败，稍后再试'
							duration: 2000,
							icon: 'none'
						})
						uni.hideLoading();
					}
				})
			},

			// 点击下载保存相册按钮
			downLoad() {
				// console.log(this.imgList[this.currentIndex],'this.imgList[this.currentIndex]');
				console.log(uni.getStorageSync('tempFilePath'), 'getStorageSync下载按钮未取到路径啊啊');


				let self = this;







				// 2-保存图片至相册
				uni.saveImageToPhotosAlbum({ // 存成图片至手机1
					// filePath: this.picture,
					// filePath: pathw,
					// filePath:'data:image/png;base64,base64'+ uni.getStorageSync('tempFilePath'),
					filePath: uni.getStorageSync('tempFilePath'), // 未取到路径myPromise

					success(res2) {
						uni.hideLoading();
						uni.showToast({
							title: '保存成功', //'保存成功'
							duration: 2000
						})

					},
					fail(res3) {
						console.log(res3, 'res3AAAAAA');

						if (res3.errMsg === 'saveImageToPhotosAlbum:fail auth deny') {
							uni.showToast({
								title: '保存失败，稍后再试1', //'保存失败，稍后再试'
								duration: 2000,
								icon: 'none'
							})
							uni.hideLoading();
						} else {
							uni.showToast({
								title: '保存失败，稍后再试2', //'保存失败，稍后再试'
								duration: 2000,
								icon: 'none'
							})
							uni.hideLoading();
						}
					}
				})
			},


			copyCode() {
				uni.setClipboardData({
					data: this.inviteCode,
					success: () => {
						uni.showToast({
							title: '复制成功'
						})
					}
				});
			},
			swiperChange(e) {
				this.dontFirstAnimation = false
				this.currentIndex = e.detail.current
				this.setcanvas()
				// 切换调用图片二维码数据
				this.getCavasSwiperImgData();
			},
			// 获取我的邀请码
			getMycodeData() {
				let self = this;
				uni.showLoading({
					title: '加载中'
				});
				self._post('user.index/detail', {
					source: self.getPlatform()
				}, function(res) {
					//#ifdef MP-WEIXIN
					if (res.data.getPhone) {
						//#ifdef MP-WEIXIN
						self.gotoPage('/pages/login/bindmobile');
						//#endif
						//#ifndef MP-WEIXIN
						self.bindMobile();
						//#endif
						return;
					}
					//#endif
					// self.detail = res.data.userInfo;
					// invite_code
					self.inviteCode = res.data.userInfo.invite_code
					// console.log(self.detail, 'detail');
					console.log(res, 'resss');
					uni.hideLoading();
				});
			},
		}
	}
script>

<style lang="scss">
	page {
		background: #FFFFFF;
	}

	.page-view {}

	.section-wrap {
		padding: 111rpx 25rpx 44rpx;

		.group-three-wrap {
			display: flex;
			justify-content: center;

			.btn {
				width: 600rpx;
				height: 88rpx;
				background: #FFA615;
				border-radius: 44rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #FFFFFF;
				font-size: 28rpx;

				image {
					width: 26rpx;
					height: 26rpx;
					margin-right: 12rpx;
				}
			}
		}
	}

	.swiper-wrap {
		padding-top: 20rpx;
	}

	.image-container {
		width: 750rpx;
		// height: 939rpx;
		height: 756rpx;
		
	}


	.item-img {
		width: 528rpx;
		// height: 939rpx;
		height: 756rpx;
		border-radius: 14rpx;
		animation: to-big .3s;
	}

	// 中间选中
	.swiper-item {
		// width: 528rpx;
		width: 540rpx;
		// height: 939rpx;
		height: 756rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.item-img-side {
		width: 528rpx;
		// height: 939rpx;
		height: 756rpx;
		border-radius: 14rpx;
		animation: to-mini .3s;
		// transform: scale(0.85);
		transform: scale(0.85);
		// @keyframes to-mini 也要改 在最下面scale(0.85)
		
		// swiper图两侧底部有白边超出父元素隐藏
		overflow:hidden;
	}

	// 两边
	.swiper-item-side {
		width: 528rpx;
		// height: 939rpx;
		height: 756rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		// transform: scale(0.85);
		transform: scale(0.85);
	}

	.item-content {
		position: relative;

		image {
			width: 528rpx;
			// height: 939rpx;
			height: 756rpx;
			border-radius: 20rpx;
		}

		.bgwhiteImg {
			margin-left: 20rpx;
			// border-radius: 20rpx;
		}

		.bottom-box {
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			bottom: 31rpx;
			padding: 16rpx 19rpx;
			background-color: #FFFFFF;
			width: 492rpx;
			border-radius: 10rpx;
			// height: 140rpx;
			display: flex;
			box-sizing: border-box;

			.code {
				width: 111rpx;
				height: 108rpx;
				margin-right: 12rpx;
				flex-shrink: 0;
			}

			.right-inner {
				height: 80rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.invite-top {
					font-size: 15rpx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #848484;
					line-height: 22rpx;
				}

				.invite-center {
					font-size: 21rpx;
					font-family: Microsoft YaHei;
					font-weight: bold;
					color: #FF2741;
					// line-height: 32rpx;
					line-height: 2.5;
				}

				.invite-bottom {
					font-size: 16rpx;
					font-family: Microsoft YaHei;
					font-weight: bold;
					color: #282828;
					// line-height: 22rpx;
					line-height: 1.5;
					// 强制不换行
					white-space: nowrap;
				}
			}
		}
	}

	@keyframes to-mini {
		from {
			transform: scale(1);
		}

		to {
			// transform: scale(0.85);
			transform: scale(0.85);
		}
	}

	@keyframes to-big {
		from {
			// transform: scale(0.85);
			transform: scale(0.85);
		}

		to {
			transform: scale(1);
		}
	}
style>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115
    • 116
    • 117
    • 118
    • 119
    • 120
    • 121
    • 122
    • 123
    • 124
    • 125
    • 126
    • 127
    • 128
    • 129
    • 130
    • 131
    • 132
    • 133
    • 134
    • 135
    • 136
    • 137
    • 138
    • 139
    • 140
    • 141
    • 142
    • 143
    • 144
    • 145
    • 146
    • 147
    • 148
    • 149
    • 150
    • 151
    • 152
    • 153
    • 154
    • 155
    • 156
    • 157
    • 158
    • 159
    • 160
    • 161
    • 162
    • 163
    • 164
    • 165
    • 166
    • 167
    • 168
    • 169
    • 170
    • 171
    • 172
    • 173
    • 174
    • 175
    • 176
    • 177
    • 178
    • 179
    • 180
    • 181
    • 182
    • 183
    • 184
    • 185
    • 186
    • 187
    • 188
    • 189
    • 190
    • 191
    • 192
    • 193
    • 194
    • 195
    • 196
    • 197
    • 198
    • 199
    • 200
    • 201
    • 202
    • 203
    • 204
    • 205
    • 206
    • 207
    • 208
    • 209
    • 210
    • 211
    • 212
    • 213
    • 214
    • 215
    • 216
    • 217
    • 218
    • 219
    • 220
    • 221
    • 222
    • 223
    • 224
    • 225
    • 226
    • 227
    • 228
    • 229
    • 230
    • 231
    • 232
    • 233
    • 234
    • 235
    • 236
    • 237
    • 238
    • 239
    • 240
    • 241
    • 242
    • 243
    • 244
    • 245
    • 246
    • 247
    • 248
    • 249
    • 250
    • 251
    • 252
    • 253
    • 254
    • 255
    • 256
    • 257
    • 258
    • 259
    • 260
    • 261
    • 262
    • 263
    • 264
    • 265
    • 266
    • 267
    • 268
    • 269
    • 270
    • 271
    • 272
    • 273
    • 274
    • 275
    • 276
    • 277
    • 278
    • 279
    • 280
    • 281
    • 282
    • 283
    • 284
    • 285
    • 286
    • 287
    • 288
    • 289
    • 290
    • 291
    • 292
    • 293
    • 294
    • 295
    • 296
    • 297
    • 298
    • 299
    • 300
    • 301
    • 302
    • 303
    • 304
    • 305
    • 306
    • 307
    • 308
    • 309
    • 310
    • 311
    • 312
    • 313
    • 314
    • 315
    • 316
    • 317
    • 318
    • 319
    • 320
    • 321
    • 322
    • 323
    • 324
    • 325
    • 326
    • 327
    • 328
    • 329
    • 330
    • 331
    • 332
    • 333
    • 334
    • 335
    • 336
    • 337
    • 338
    • 339
    • 340
    • 341
    • 342
    • 343
    • 344
    • 345
    • 346
    • 347
    • 348
    • 349
    • 350
    • 351
    • 352
    • 353
    • 354
    • 355
    • 356
    • 357
    • 358
    • 359
    • 360
    • 361
    • 362
    • 363
    • 364
    • 365
    • 366
    • 367
    • 368
    • 369
    • 370
    • 371
    • 372
    • 373
    • 374
    • 375
    • 376
    • 377
    • 378
    • 379
    • 380
    • 381
    • 382
    • 383
    • 384
    • 385
    • 386
    • 387
    • 388
    • 389
    • 390
    • 391
    • 392
    • 393
    • 394
    • 395
    • 396
    • 397
    • 398
    • 399
    • 400
    • 401
    • 402
    • 403
    • 404
    • 405
    • 406
    • 407
    • 408
    • 409
    • 410
    • 411
    • 412
    • 413
    • 414
    • 415
    • 416
    • 417
    • 418
    • 419
    • 420
    • 421
    • 422
    • 423
    • 424
    • 425
    • 426
    • 427
    • 428
    • 429
    • 430
    • 431
    • 432
    • 433
    • 434
    • 435
    • 436
    • 437
    • 438
    • 439
    • 440
    • 441
    • 442
    • 443
    • 444
    • 445
    • 446
    • 447
    • 448
    • 449
    • 450
    • 451
    • 452
    • 453
    • 454
    • 455
    • 456
    • 457
    • 458
    • 459
    • 460
    • 461
    • 462
    • 463
    • 464
    • 465
    • 466
    • 467
    • 468
    • 469
    • 470
    • 471
    • 472
    • 473
    • 474
    • 475
    • 476
    • 477
    • 478
    • 479
    • 480
    • 481
    • 482
    • 483
    • 484
    • 485
    • 486
    • 487
    • 488
    • 489
    • 490
    • 491
    • 492
    • 493
    • 494
    • 495
    • 496
    • 497
    • 498
    • 499
    • 500
    • 501
    • 502
    • 503
    • 504
    • 505
    • 506
    • 507
    • 508
    • 509
    • 510
    • 511
    • 512
    • 513
    • 514
    • 515
    • 516
    • 517
    • 518
    • 519
    • 520
    • 521
    • 522
    • 523
    • 524
    • 525
    • 526
    • 527
    • 528
    • 529
    • 530
    • 531
    • 532
    • 533
    • 534
    • 535
    • 536
    • 537
    • 538
    • 539
    • 540
    • 541
    • 542
    • 543
    • 544
    • 545
    • 546
    • 547
    • 548
    • 549
    • 550
    • 551
    • 552
    • 553
    • 554
    • 555
    • 556
    • 557
    • 558
    • 559
    • 560
    • 561
    • 562
    • 563
    • 564
    • 565
    • 566
    • 567
    • 568
    • 569
    • 570
    • 571
    • 572
    • 573
    • 574
    • 575
    • 576
    • 577
    • 578
    • 579
    • 580
    • 581
    • 582
    • 583
    • 584
    • 585
    • 586
    • 587
    • 588
    • 589
    • 590
    • 591
    • 592
    • 593
    • 594
    • 595
    • 596
    • 597
    • 598
    • 599
    • 600
    • 601
    • 602
    • 603
    • 604
    • 605
    • 606
    • 607
    • 608
    • 609
    • 610
    • 611
    • 612
    • 613
    • 614
    • 615
    • 616
    • 617
    • 618
    • 619
    • 620
    • 621
    • 622
    • 623
    • 624
    • 625
    • 626
    • 627
    • 628
    • 629
    • 630
    • 631
    • 632
    • 633
    • 634
    • 635
    • 636
    • 637
    • 638
    • 639
    • 640
    • 641
    • 642
    • 643
    • 644
    • 645
    • 646
    • 647
    • 648
    • 649
    • 650
    • 651
    • 652
    • 653
    • 654
    • 655
    • 656
    • 657
    • 658
    • 659
    • 660
    • 661

    最后

    感觉文章好的话记得点个心心和关注和收藏，有错的地方麻烦指正一下，如果需要转载,请标明出处，多谢！！！

  • 相关阅读:
    Java List 过滤重复数据
    Nginx中关于虚拟主机的一点冷门知识
    【31】GPU（下）：为什么深度学习需要使用GPU？
    IOS工程：如何在apple后台为app添加沙盒测试账户
    【无标题】
    Rust错误处理简介
    【工具类】阿里域名关联ip(python版)
    【Lilishop商城】No1-1.业务了解+划分各模块逻辑
    【JMeter】控制器If Controller
    论文实验可视化方法
  • 原文地址：https://blog.csdn.net/m0_49714202/article/details/133668649