uniApp小程序保存图片canvas

落日映苍穹つ 2022-12-25 14:57 217阅读 0赞

<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>