uniapp-canvas海报模版

<template>
	<view class="pages">
		<view v-if="show"></view>
		<canvas @longpress="saveposter" :style="'width: '+ w +'px; height:' + h +'px;background-color: #fff;'" canvas-id="firstCanvas" id="firstCanvas"></canvas>
	</view>
</template>


<script>
import { h } from "vue";
	export default {
		data(){
			return{
				firstCanvasImg:'',
				show:true,
				// w:375,
				// h:665
				h:0,
				w:0
			}
		},
		onLoad() {
			uni.showLoading({
				title: '海报生成中...'
			});
			this.getSystemInfo();
		},
		onReady: function(e) {
			
			
		},
		methods:{
			// 获取系统适配
			getSystemInfo() {
				let _this = this;
				uni.getSystemInfo({
					success(res) {
						_this.h = res.windowHeight*0.9;  //改变0.9用于改变海报占用屏幕的比例
						_this.w = res.windowWidth*0.9;
						console.log(_this.w,_this.h,'W')
						setTimeout(() => {
							_this.getCanvas();
						},2000)
					}
				});
			},
			//保存图片
			saveposter() {
				const that = this;
				uni.showModal({
					title: '',
					content: '是否下载海报？',
					success: function (res) {
						if (res.confirm) {
							console.log('用户点击确定');
							uni.getImageInfo({
								src: that.firstCanvasImg,
								success: res => {
									console.log('res', res.path);
									uni.saveImageToPhotosAlbum({
										filePath: res.path,
										success: function() {
											uni.showToast({
												title: '保存成功'
											});
										},
										fail: function(err) {
											console.log('err1', err);
										}
									});
								},
								fail: err => {
									console.log('errr', err);
								}
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			getCanvas(){
				var _this = this;
				setTimeout(() => {
					
					var context = uni.createCanvasContext('firstCanvas')
					
					context.rect(0,0,_this.w,_this.h);
					context.setFillStyle('#ffffff');
					context.fill();
					
					context.drawImage('/static/img.png', 0, 0, _this.w, _this.h*0.79) // drawImage(图片路径,x,y,绘制图像的宽度，绘制图像的高度)
					context.drawImage('/static/img.png', _this.w*0.7, _this.h*0.82, _this.w*0.22, _this.h*0.13) // drawImage(图片路径,x,y,绘制图像的宽度，绘制图像的高度)
					
					
					context.font = "14px Arial";
					context.setFillStyle('#333333');
					context.fillText("设科教育 SHEKEJIAOYU", _this.w*0.05, _this.h*0.83);
					
					
					context.font = "12px Arial";
					context.setFillStyle('#999999');
					context.fillText("来自于", _this.w*0.05, _this.h*0.88);
					
					context.font = "17px Arial";
					context.setFillStyle('#333333');
					context.fillText("望无", _this.w*0.05, _this.h*0.91);
					
					context.font = "12px Arial";
					context.setFillStyle('#999999');
					context.fillText("长按二维码下单，收藏商城不迷路", _this.w*0.05, _this.h*0.96);
					
					
					// context.setStrokeStyle("#FFFFFF")
					// context.setLineWidth(5)
					// context.rect(0, 0, 375, 667)
					// context.stroke()
					context.draw()
					
					setTimeout(() => {
						uni.canvasToTempFilePath({
							canvasId: 'firstCanvas',
							success: res => {
								console.log(res.tempFilePath, '生成图片');
								this.firstCanvasImg = res.tempFilePath;
										
								uni.hideLoading();
								this.show = false;
								uni.showToast({
									title: '长按保存',
									icon: 'none'
								});
							},
							fail: err => {
								console.log('err', err);
								uni.showToast({
									title: '生成失败',
									icon: 'none'
								});
								uni.hideLoading();
							}
						});
					},1000)
					
					
				}, 1000);
			}
		}
		
	}
</script>

<style lang="scss" scoped>
	.pages{
		width: 100%;
		height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		background-color: #000;
		view{
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 1);
			position: absolute;
			top: 0;
			left: 0;
			z-index: 99;
		}
	}
</style>