vue-insagent-app/pages/tools/poster/poster-detail.vue

<template>
	<view class="pc-container" @longpress="saveImage">
		<!-- 公共组件-每个页面必须引入 -->
		<service-widget @btnClick="btn_click"></service-widget>
		<public-module></public-module>
		<image :src="imgurl" mode="widthFix" v-show="!canvasShow"></image>
		<canvas id="mycanvas" ref="mycanvas" canvas-id="mycanvas" style="width: 690rpx;height: 1246rpx;"></canvas>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from "vuex"
	import QR from "@/common/wxqrcode.js"
	export default {
		data() {
			return {
				imgurl: '',
				canvasShow: true,
				posterimg: "",
				recommendImg: "",
				orderissuerImg: "",
			}
		},
		onLoad(params) {
			var that = this;
			if (!!params.img) {
				this.posterimg = params.img;

			} else {
				this.posterimg = "/static/image/poster/baoxian/poster1.jpg";
			}
			var id = that.userInfo.sysUser.id;
			this.recommendImg = QR.createQrCodeImg(this.$base.h5BaseUrl + "/#/pages/register/register?id=" + id, {
				size: parseInt(220) //二维码大小  
			})
			this.orderissuerImg = QR.createQrCodeImg(this.$base.h5BaseUrl + "/#/pages/register/orderissuer?id=" + id, {
				size: parseInt(220) //二维码大小  
			})
		},
		computed: {
			...mapState(["userInfo", 'sources']),
		},
		mounted() {
			this.canvasImage();
		},
		methods: {
			btn_click() {
				uni.navigateTo({
					url: '/pages/chat/chat'
				})
			},
			canvasImage() {
				let myCanvas = uni.createCanvasContext('mycanvas', this);
				var ww = uni.upx2px("690");
				var hh = uni.upx2px("1246");
				//画布尺寸
				// 坐标(0,0) 表示从此处开始绘制，相当于偏移。
				//背景
				myCanvas.drawImage(this.posterimg, 0, 0, ww, hh);

				//头像
				// myCanvas.drawImage(this.avatar, ww - hh / 2, hh - ww / 3.8, ww / 8, ww / 8);
				//个人信息
				let fontSize1 = uni.upx2px(32);
				myCanvas.setFillStyle('#fff') //文字样式
				myCanvas.font = `${fontSize1}px Arial`; //绘制文字
				myCanvas.fillText(this.userInfo.sysUser.name, ww / 10 + ww / 5, hh - ww / 50 * 11);
				myCanvas.font = `${fontSize1}px Arial`; //绘制文字
				myCanvas.fillText(this.userInfo.sysUser.mobile, ww / 10 + ww / 5, hh - ww / 48 * 7);

				//二维码
				myCanvas.drawImage(this.sources == 1 ? this.recommendImg : this.orderissuerImg, ww - ww / 3, hh - ww / 3,
					ww / 4, ww / 4);

				//开始绘画，必须调用这一步，才会把之前的一些操作实施
				myCanvas.draw(true, () => {
					uni.hideLoading();
					uni.canvasToTempFilePath({
						canvasId: 'mycanvas',
						success: (res) => {
							// 在H5平台下，tempFilePath 为 base64
							this.imgurl = res.tempFilePath;
							this.canvasShow = false;
						},
						fail: () => {
							uni.showToast({
								title: '专属海报加载失败',
								duration: 2000
							});
						}
					});
				});

			},
			// 保存海报
			saveImage() {
				let tabList = [];
				// #ifdef APP-PLUS
				tabList = ['保存图片', '分享到微信'];
				// #endif

				// #ifndef APP-PLUS
				tabList = ['保存图片'];
				// #endif

				uni.showActionSheet({
					itemList: tabList,
					success: (res) => {
						if (res.tapIndex == 0) {
							uni.saveImageToPhotosAlbum({
								filePath: this.imgurl, //    图片文件路径，可以是临时文件路径也可以是永久文件路径，不支持网络图片路径
								success: () => {
									uni.showToast({
										title: '保存成功',
										duration: 2000
									});
								},
								fail: () => {
									uni.showToast({
										title: '保存失败',
										duration: 2000
									});
								}
							});
						} else if (res.tapIndex == 1) {
							uni.share({
								provider: "weixin",
								scene: "WXSceneSession",
								type: 2,
								imageUrl: this.imgurl
							})
						}
					},
					fail: function(res) {
						console.log(res.errMsg);
					}
				});
			}
		}
	};
</script>

<style>
	image {
		width: 100%;
		height: 1246rpx;
	}

	.pc-container {
		width: 690rpx;
		margin: 0 auto;
		padding-top: 80rpx;
		overflow: hidden;
	}

	#mycanvas {
		position: absolute;
		top: -10000px;
		left: -10000px;
	}
</style>