uniApp小程序保存图片canvas

<template>
	<view class="poster_box">
		<!-- 显示的页面 -->
		<view class="myShare" >
			<image class="my_img" :src="app+'/yaoqing/bj.png'" mode=""></image>
			<view class="er_box">
				<image class="er" :src="er" mode=""></image>
			</view>
			<view class="zi">邀请好友领积分</view>
			<view class="font">
				<view class="font_info">
					<button class="share" open-type="share">
						<image :src="app+'/yaoqing/weixin.png'" mode=""></image>
						<view>微信好友</view>
					</button>
				</view>
				<view class="font_info" v-if="writePhotosAlbum==false">
					<button class="share" open-type="openSetting">
						<image :src="app+'/yaoqing/img.png'" mode=""></image>
						<view>保存图片</view>
					</button>
				</view>
				
				<view class="font_info" @tap="saveImage" v-else>
					<image :src="app+'/yaoqing/img.png'" mode=""></image>
					<view>保存图片</view>
				</view>
			</view>
		</view>
		
		<!-- 下面这个图片是参考位置，真正用隐藏*********************************************************** -->
		<image v-if="true" style="width: 100vw;display: none;" mode="widthFix" :src="imgurl"></image>
		<canvas canvas-id="mycanvas" style="width: 750px;height: 1206px;border: 1px solid red;position:absolute;left: -5000px;"></canvas>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				app: getApp().globalData.peiImg,
				result: '', //生成海报的url
				er: '',
				imgurl: '',
				canvasShow: true,
				canvasercode: '',
				bj: '',
				writePhotosAlbum: undefined
			};
		},
		onShow() {
			let that = this;
			uni.getSetting({
				success: res => {
					this.writePhotosAlbum = res.authSetting["scope.writePhotosAlbum"];
					console.log(this.writePhotosAlbum,"11111111111111")
				}
			})
		},
		onLoad() {
			/* 二维码接口 */
			/* 邀请 */
			let that = this;
			let url = '/api/user/userImage';
			let data = {
				token: uni.getStorageSync('userInfo').token
			};
			this.$request.post(url, data).then(res => {
				that.er = res.data.file;
				console.log('获取的er' + that.er);
				that.downfile(this.er);
			});
		},
		onShareAppMessage: function() {
			return {
				title: '邀请好友领积分',
				imageUrl: this.imgurl, //自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径。支持PNG及JPG。显示图片长宽比是 5:4。
				path: '/pages/index/index',
				success: function(res) {
					console.log(res);
				}
			};
		},
		onHide() {
			uni.removeStorageSync('person-card');
		},
		mounted() {
			if (uni.getStorageSync('person-card')) {
				this.canvasShow = false;
				this.imgurl = uni.getStorageSync('person-card');
			} else {
				// this.canvasImage();
			}
		},
		methods: {
			//网路图片先下载再绘制
			downfile(e) {
				let that = this;
				uni.downloadFile({
					url: e, //仅为示例，并非真实的资源
					success: res => {
						if (res.statusCode === 200) {
							console.log('下载成功');
							that.canvasercode = res.tempFilePath;
							console.log(that.canvasercode);
							that.canvasImage();
						}
					}
				});
			},
			canvasImage() {
				console.log('绘制');

				let myCanvas = uni.createCanvasContext('mycanvas', this);
				// 绘制背景
				myCanvas.drawImage('../../static/pei/yaoqing/bj.png', 0, 0, 750, 1260);
				//*******************************************************设置二维码大小就好了位置
				myCanvas.drawImage(this.canvasercode, 185, 420, 375, 375);
				let fontSize = 70;
				myCanvas.font = `bold ${fontSize}px Arial`;
				myCanvas.fillStyle = '#ff4d30'; //填充线样式
				myCanvas.fillText('邀请好友领积分', 130, 250);
				myCanvas.draw(true, () => {
					uni.canvasToTempFilePath({
						canvasId: 'mycanvas',
						success: res => {
							///************************************************有个保存图片到本地的方法
							this.imgurl = res.tempFilePath;
							this.canvasShow = false;
							uni.hideLoading();
							uni.setStorageSync('person-card', this.imgurl);
						},
						fail: () => {
							uni.showToast({
								title: '名片加载失败',
								duration: 2000
							});
						}
					});
				});
			},

			saveImage() {
				console.log(123)
				uni.saveImageToPhotosAlbum({
					filePath: this.imgurl,
					success: () => {
						uni.showToast({
							title: '保存成功',
							duration: 2000
						});
					},
					fail: () => {
						uni.showToast({
							title: '保存失败',
							duration: 2000,
							icon: "none"
						});
					}
				});
				return
				uni.showActionSheet({
					itemList: ['保存图片', '取消'],
					success: res => {
						if (res.tapIndex == 0) {

						}
					},
					fail: function(res) {
						console.log(res.errMsg);
					}
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	
	
	.poster_box {
		width: 100vw;
		height: 100vh;
		background-color: #fef8e8;
	}

	/* 去除点button的默认样式 */
	.share {
		background-color: rgba(0, 0, 0, 0);
		padding: 0;
		color: #ffffff;
		font-size: 32upx;
		line-height: 1.4;
	}

	.share::after {
		border: none;
	}






	.myShare {
		width: 100vw;
		height: 1200upx;
		position: fixed;
		bottom: 0;
		left: 0;

		.zi {
			color: #ff4d30;
			font-size: 70upx;
			font-weight: bold;
			position: absolute;
			top: 13%;
			width: 750upx;
			text-align: center;
			left: 0;
			z-index: 666;
			letter-spacing: 2px;
		}

		.my_img {
			width: 750upx;
			height: 1200upx;
			position: absolute;
			left: 0;
			right: 0;
			z-index: 1;
		}

		.er_box {
			position: absolute;
			z-index: 99;
			top: 35.7%;
			left: 24.7%;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 375rpx;
			height: 375rpx;
			background-color: #FFFFFF;
		}

		.er {

			width: 345rpx;
			height: 345rpx;
		}

		.font {
			position: absolute;
			left: 0;
			bottom: 90upx;
			font-size: 32upx;
			color: #ffffff;
			z-index: 66;
			width: 100vw;
			height: 250upx;
			display: flex;
			justify-content: space-around;
			align-items: center;
			text-align: center;

			.font_info {
				width: 225upx;
				height: 160upx;
			}

			image {
				width: 100upx;
				height: 100upx;
			}
		}
	}
</style>