tj/pages/user/shareQrCode.vue

<template>
	<view class="main">
		<view class="qrimg">
			<tki-qrcode :cid="cid" ref="qrcode" :val="val" :size="size" :unit="unit" :background="background"
				:foreground="foreground" :pdground="pdground" :icon="icon" :iconSize="iconSize" :lv="lv" :onval="onval"
				:showLoading="showLoading" :loadMake="loadMake" :usingComponents="usingComponents" @result="qrR" />
		</view>
		<!-- 		<view class="qrcode-wrapper">
			<image class="qrcode-save__image" :src="shareQrcodeUrl" mode="aspectFit"></image>
			<view class="qrcode-save__btn">
				
			</view>
		</view> -->
		<!-- <canvas :style="{ width: canvasW + 'px', height: canvasH + 'px',}" canvas-id="myCanvas" id="myCanvas"></canvas> -->
		<canvas :style="{ width:  '600rpx', height: '1066rpx',}" canvas-id="myCanvas" id="myCanvas" class="hb"></canvas>
		<!-- <view class="" v-if="fina">
			<button text="保存图片" @click="saveShareQrcode">保存图片</button>
		</view>
		<view class="" v-if="fina">
			<button text="保存图片" @click="saveShareQrcode">分享链接</button>
		</view> -->
		<!-- <view class="btm-btn" v-if="fina">
			<view class="btn" @click="comfirm">
				<image src="../../static/icon/fzlj.png" mode=""></image>
				<view class="">
					复制邀请链接
				</view>
			</view>
			<view class="btn" @click="saveShareQrcode">
				<image src="../../static/icon/fxhb.png" mode=""></image>
				<view class="">
					保存分享海报
				</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import {
		getUserInfo
	} from '@/api/user.js';

	var that
	export default {
		data() {
			return {
				cid: 'tki-qrcode-canvas', //canvasId，页面存在多个二维码组件时需设置不同的ID
				size: 300, //生成的二维码大小
				unit: 'upx', //大小单位尺寸
				// show: true,//默认使用组件中的image标签显示二维码
				val: '', //要生成的内容
				background: '#ffffff', //二维码背景色
				foreground: '#333333', //二维码前景色
				pdground: '#333333', //二维码角标色
				icon: '', //二维码图标URL（必须是本地图片，网络图需要先下载至本地）
				iconSize: 40, //二维码图标大小
				lv: 3, //容错级别
				onval: true, //监听val值变化自动重新生成二维码
				loadMake: true, //组件初始化完成后自动生成二维码，val需要有值
				usingComponents: false, //是否使用了自定义组件模式（主要是为了修复非自定义组件模式时 v-if 无法生成二维码的问题）
				showLoading: false, //是否显示loading

				erweimasrc: '',
				canvasW: 0, // 画布宽
				canvasH: 0, // 画布高
				SystemInfo: {}, // 设备信息
				goodsImg: {}, // 商品主图
				ewmImg: {}, // 二维码图片
				ewmW: 0, // 二维码大小
				title: '', // 商品标题
				canvasShow: true,
				shareQrcodeUrl: '', //canvas本地路径
				ratio: '', //画布比例
				fina: false,
			}
		},
		computed: {
			...mapState(['baseURL', 'urlFile']),
			...mapState('user', ['userInfo', 'orderInfo', 'hasLogin'])
		},
		onLoad(options) {
			const obj = this;
			if (!this.userInfo.uid) {
				getUserInfo({}).then(e => {
					// 保存返回用户数据
					obj.setUserInfo(e.data);
					//成功跳转首页
					uni.switchTab({
						url: '/pages/index/index'
					});
				});
			} else {
				this.val = 'http://www.tingjiu.liuniukj.com/index/#/pages/public/register?spread=' + this.userInfo
					.phone
			}
		},
		methods: {
			uniCopy(content) {
				/**
				 * 小程序端 和 app端的复制逻辑
				 */
				//#ifndef H5
				uni.setClipboardData({
					data: content,
					success: function() {
						console.log('success');
						return true;
					}
				});
				//#endif

				/**
				 * H5端的复制逻辑
				 */
				// #ifdef H5
				if (!document.queryCommandSupported('copy')) {
					//为了兼容有些浏览器 queryCommandSupported 的判断
					// 不支持
					return false;
				}
				let textarea = document.createElement('textarea');
				textarea.value = content;
				textarea.readOnly = 'readOnly';
				document.body.appendChild(textarea);
				textarea.select(); // 选择对象
				textarea.setSelectionRange(0, content.length); //核心
				let result = document.execCommand('copy'); // 执行浏览器复制命令
				textarea.remove();
				return result;
				// #endif
			},
			comfirm() {
				const result = this.uniCopy(this.val);
				if (result === false) {
					uni.showToast({
						title: '不支持'
					});
				} else {
					uni.showToast({
						title: '复制成功',
						icon: 'none'
					});
				}
			},
			qrR(res) {
				this.erweimasrc = res
				console.log(res, 'erweima');
				this.createPoster()
			},
			async createPoster() {
				let that = this
				// 获取设备信息，主要获取宽度，赋值给canvasW 也就是宽度：100%
				this.SystemInfo = await this.getSystemInfo();
				// 获取商品主图，二维码信息，APP端会返回图片的本地路径（H5端只能返回原路径）
				this.goodsImg = await this.getImageInfo('/static/img/sharebase.jpg');
				this.ewmImg = await this.getImageInfo(this.erweimasrc);
				// this.canvasW = this.SystemInfo.windowWidth; // 画布宽度
				this.ratio = this.SystemInfo.windowWidth / 750;
				this.canvasW = 600 * this.ratio;
				this.canvasH = 1066 * this.ratio;
				this.ewmW = 150 * this.ratio;
				this.ewmBg = 180 * this.ratio;
				console.log(this.canvasH, 'this.canvasH')
				// this.canvasH = this.goodsImg.height + this.ewmW + 200;  // 画布高度 = 主图高度+二维码高度 + 文字图片的间距（大概50）

				// 如果主图，二维码图片，设备信息都获取成功，开始绘制海报，这里需要用setTimeout延时绘制，否则可能会出现图片不显示。
				if (this.goodsImg.errMsg == 'getImageInfo:ok' && this.ewmImg.errMsg == 'getImageInfo:ok' && this
					.SystemInfo.errMsg == 'getSystemInfo:ok') {
					console.log('ok')
					uni.showToast({
						icon: 'loading',
						mask: true,
						duration: 10000,
						title: '海报绘制中',
					});
					setTimeout(() => {
						var ctx = uni.createCanvasContext('myCanvas', this);
						// 填充背景色，白色
						ctx.setFillStyle('#fff'); // 默认白色
						ctx.fillRect(0, 0, this.canvasW, this.canvasH) // fillRect(x,y,宽度，高度)

						// 绘制商品主图，二维码
						ctx.drawImage(this.goodsImg.path, 0, 0, this.canvasW, this
							.canvasH) // drawImage(图片路径,x,y,绘制图像的宽度，绘制图像的高度)
						ctx.fillRect((this.canvasW / 2 - this.ewmBg / 2), this.canvasH - 70 *
							this.ratio - this.ewmBg, this.ewmBg, this.ewmBg) // fillRect(x,y,宽度，高度)

						ctx.drawImage(this.ewmImg.path, (this.canvasW / 2 - this.ewmW / 2), this.canvasH - 85 *
							this.ratio - this.ewmW,
							this.ewmW, this.ewmW) // drawImage(图片路径,x,y,绘制图像的宽度，绘制图像的高度,二维码的宽,高)

						// 3、绘制商品标题，多余文字自动换行
						ctx.setFontSize(16); // setFontSize() 设置字体字号
						ctx.setFillStyle('#333'); // setFillStyle() 设置字体颜色

						/* str 这段代码是我百度找的，参考别人的。canvas不能自动换行，需要自行计算 */
						// let _strlineW = 0;
						// let _strLastIndex = 0; //每次开始截取的字符串的索引
						// let _strHeight = this.canvasW +20; //绘制字体距离canvas顶部的初始高度
						// let _num = 1;
						// for (let i = 0; i < this.title.length; i++) {
						// 	_strlineW += ctx.measureText(this.title[i]).width;
						// 	if (_strlineW > this.canvasW-155) {
						// 		if(_num == 2 && 2){
						// 			//文字换行数量大于二进行省略号处理
						// 			ctx.fillText(this.title.substring(_strLastIndex, i-5)+'...', 40, _strHeight);
						// 			_strlineW = 0;
						// 			_strLastIndex = i;
						// 			_num++;
						// 			break;
						// 		}else{
						// 			ctx.fillText(this.title.substring(_strLastIndex, i), 40, _strHeight);
						// 			_strlineW = 0;
						// 			_strHeight += 20;
						// 			_strLastIndex = i;
						// 			_num++;
						// 		}
						// 	}else if (i == this.title.length - 1) {
						// 		ctx.fillText(this.title.substring(_strLastIndex, i + 1), 40, _strHeight);
						// 		_strlineW = 0;
						// 	}
						// }
						/* end */

						// ctx.setFontSize(16) // 字号
						// ctx.setFillStyle('#e31d1a') // 颜色
						// ctx.fillText('￥'+this.price, 10, this.canvasW +75); // （文字，x，y）
						// ctx.setFontSize(12)
						// ctx.setFillStyle('#b8b8b8')
						// ctx.fillText('原价￥'+this.Oldprice, 100, this.canvasW +75);


						// 邀请信息
						// ctx.setFontSize(16)
						// ctx.setFillStyle('#333')
						// ctx.fillText('长按二维码立即预约', this.ewmW + 40, this.canvasW +100);

						// ctx.setFontSize(16)
						// ctx.setFillStyle('#333')
						// ctx.fillText('分享自小程序', this.ewmW + 40, this.canvasW +120);
						ctx.draw(false, (ret) => { // draw方法 把以上内容画到 canvas 中。
							console.log(ret)
							uni.showToast({
								icon: 'none',
								title: '生成成功！',
							});
							that.fina = true
							uni.canvasToTempFilePath({ // 保存canvas为图片
								canvasId: 'myCanvas',
								quality: 1,
								fileType: 'jpg',
								complete: function(res) {
									// 在H5平台下，tempFilePath 为 base64, // 图片提示跨域 H5保存base64失败，APP端正常输出临时路径
									console.log(res)
									that.canvasShow = false
									that.shareQrcodeUrl = res.tempFilePath
									that.$forceUpdate()
									setTimeout(function() {
										console.log(that.shareQrcodeUrl, that
											.canvasShow)
									}, 2000)
								},
							})
						});
					}, 1500)
				} else {
					console.log('err')
				}
			},
			// 获取图片信息
			getImageInfo(image) {
				return new Promise((req, rej) => {
					uni.getImageInfo({
						src: image,
						success: function(res) {
							req(res)
						},
					});
				})
			},

			// 获取设备信息
			getSystemInfo() {
				return new Promise((req, rej) => {
					uni.getSystemInfo({
						success: function(res) {
							req(res)
						}
					});
				})
			},
			//保存图片
			saveShareQrcode() {
				console.log(this.shareQrcodeUrl)
				uni.saveImageToPhotosAlbum({
					filePath: this.shareQrcodeUrl,
					success: (res) => {
						uni.showToast({
							icon: 'none',
							position: 'bottom',
							title: "成功保存到相册",
						});
					},
					fail: (err) => {
						//重新提示用户打开保存图片的授权
						if (err.errMsg === "saveImageToPhotosAlbum:fail auth deny") {
							uni.showModal({
								title: '提示',
								content: '需要您授权保存相册',
								showCancel: false,
								success(res) {
									if (res.confirm) {
										uni.openSetting({
											success(settingdata) {
												if (settingdata.authSetting[
														'scope.writePhotosAlbum']) {
													uni.showModal({
														title: '提示',
														content: '获取权限成功,再次保存图片即可成功',
														showCancel: false,
													})
												} else {
													uni.showModal({
														title: '提示',
														content: '获取权限失败，无法保存到相册',
														showCancel: false
													})
												}
											}
										})
									}
								}
							})
						}
					},
				})
			}
		}
	}
</script>

<style lang="scss">
	.hb {
		margin: auto;
	}

	.qrimg {
		position: absolute;
		left: -9999rpx;
		top: -9999rpx;
	}

	button {
		height: 88upx;
		background-color: #feca00;
		color: #fff;
		border-radius: 44upx;
		text-align: center;
		line-height: 88upx;
		width: 60%;
		margin: 0 auto;
		margin-top: 30upx;
	}

	.btm-btn {
		position: fixed;
		bottom: 0;
		width: 750rpx;
		height: 200rpx;
		display: flex;
		background-color: #fff;
		border-radius: 20rpx 20rpx 0 0;

		.btn {
			width: 50%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			font-size: 26rpx;

			image {
				width: 66rpx;
				height: 66rpx;
				margin-bottom: 20rpx;
			}
		}
	}
</style>