high-mini/physical-merchants/classify/poster/poster.vue

<template>
	<view>
		<canvas canvas-id="poster" class="poster_canvas"></canvas>
		<canvas canvas-id="qrImg" class="poster_qr"></canvas>
		<swiper v-if="dataInfo.recommendCodeGoods" class="poster_swiper" previous-margin="110rpx" :current="swiperIndex"
			next-margin="110rpx" @change="onSwiperChange">
			<swiper-item v-for="(item, index) of dataInfo.headImgs" :key="index">
				<view class="goods_info_box" :class="{ active: swiperIndex == index }">
					<image class="goods_image" :src="item" mode="aspectFit"></image>
					<view class="goods_info">
						<view class="goods_name">{{dataInfo.goodsName}}</view>
						<view class="price_box">
							<view class="price">{{dataInfo.goodsPrice}}</view>
							<view class="store_price">{{dataInfo.priceShop}}</view>
						</view>
						<view class="poster_info">
							<view class="info">
								<view>长按识别二维码访问</view>
								<text>{{platformName}}</text>
							</view>

							<image class="poster_code_image" :src="dataInfo.recommendCodeGoods" mode="aspectFit">
							</image>
						</view>
					</view>
				</view>
			</swiper-item>
		</swiper>

		<view class="share_save_box" v-if="dataInfo.recommendCodeGoods">
			<view class="b-con" @click="onSaveImg">
				<!-- <button class="onSave" > -->
				<image src="/physical-merchants/static/img/ic_weixin.png" mode="aspectFit"></image>
				<text class="mart5">保存图片</text>
				<!-- </button> -->
			</view>
		</view>
		<!-- #ifdef H5 -->
		<!--   -->
		<view class="h5_press_save" v-if="h5SaveImg" @click="h5SaveImg = ''">
			<image :src="h5SaveImg" mode="widthFix"></image>
			<button class="download">长按图片保存图片</button>
		</view>
		<!-- #endif -->
	</view>
</template>

<script>
	const qrCode = require('./weapp-qrcode.js');
	export default {
		data() {
			return {
				swiperIndex: 0,
				posterImgs: [],
				dataInfo: {
					// priceShop: "¥699.0", //原价
					// headImgs: [
					// 	"http://qn.kemean.cn/file/upload/202005/21/1590043402088i2jxb79n.jpg?imageView2/0/w/800",
					// 	"http://qn.kemean.cn/file/upload/202005/21/1590043404759qml3zmlm.jpg?imageView2/0/w/800",
					// ],
					// goodsName: "冰希黎巴黎红精粹沙龙香水50ml",
					// goodsPrice: "¥299.0", //现价
					recommendCodeGoods: "", //小程序码
				},
				platformName: "嗨森逛",
				h5SaveImg: "",
				settingWritePhotosAlbum: false

			};
		},
		//第一次加载
		onLoad(e) {

			if (e.obj) {
				this.dataInfo = JSON.parse(decodeURIComponent(e.obj));
			}
		},
		mounted() {
			this.couponQrCode()
		},
		//方法
		methods: {
			// 轮播图变化
			onSwiperChange(e) {
				this.swiperIndex = e.detail.current;
			},
			async couponQrCode() {

				uni.showLoading({
					title: '加载中...'
				});
				var that = this;
				/* if (this.quality == 'L') {
					this.level = qrCode.CorrectLevel.L
				} else if (this.quality == 'M') {
					this.level = qrCode.CorrectLevel.M
				} else if (this.quality == 'Q') {
					this.level = qrCode.CorrectLevel.Q
				} else if (this.quality == 'H') {
					this.level = qrCode.CorrectLevel.H
				} else {
					this.level = qrCode.CorrectLevel.L
				} */
				console.log(that.dataInfo, " that.dataInfo")
				let qrcode = await new qrCode('qrImg', {
					text: that.dataInfo.goLink,
					width: 100,
					height: 100,
					showLoading: true, // 是否显示loading
					loadingText: '二维码生成中', // loading文字
					colorDark: '#000000', //二维码暗部颜色
					colorLight: '#ffffff', //二维码亮部颜色
					correctLevel: qrCode.CorrectLevel.L, //二维码质量L/M/Q/H
					// usingIn: this //在自定义组件下，第二个参数传入组件实例this
				})
				// 把当前画布指定区域的内容导出生成图片，并返回文件路径。
				uni.canvasToTempFilePath({
					canvasId: 'qrImg',
					success: (res) => {
						uni.hideLoading()
						// 在H5平台下，tempFilePath 为 base64
						// console.log('yz-qr图片路径:', res)
						this.dataInfo.recommendCodeGoods = res.tempFilePath;
						qrcode = null;
						/* uni.getFileSystemManager().readFile({
						        filePath: res.tempFilePath, //选择图片返回的相对路径
						        encoding: 'base64', //编码格式
						        success: res => {
						            // 成功的回调
						            let base64 = 'data:image/jpeg;base64,' + res.data;
						           this.dataInfo.recommendCodeGoods = base64;
						        }
						    }); */

					},
					fail: (err) => {
						uni.hideLoading();
						qrcode = null;
						console.log(err)
					}
				}, this);

				// console.log('绘制完成');
			},
			// 创建海报
			createPoster() {
				let that = this;
				return new Promise((resolve, reject) => {
					uni.showLoading({
						title: '海报生成中'
					});
					const ctx = uni.createCanvasContext('poster');
					ctx.fillRect(0, 0, 375, 673);
					ctx.setFillStyle("#FFF");
					ctx.fillRect(0, 0, 375, 673);
					uni.downloadFile({
						url: this.dataInfo.headImgs[this.swiperIndex],
						success: (res) => {
							if (res.statusCode === 200) {
								ctx.drawImage(res.tempFilePath, 0, 0, 375, 375);

								if (res.statusCode === 200) {
									// 商品标题
									ctx.setFontSize(21);
									ctx.setFillStyle('#333');
									let drawtextList = that.drawtext(this.dataInfo
										.goodsName, 341);
									let textTop = 0;
									drawtextList.forEach((item, index) => {
										if (index < 2) {
											textTop = 380 + (index + 1) *
												28;
											ctx.fillText(item.content, 17,
												textTop);
										}
									});
									// 商品价格
									ctx.setFontSize(26);
									ctx.setFillStyle('#f00');
									ctx.fillText(this.dataInfo.goodsPrice, 17,
										textTop + 47);
									// 商品门市价
									ctx.setFontSize(18);
									ctx.setFillStyle('#999');
									let textLeft = 38 + (this.dataInfo.goodsPrice
										.length * 13)
									ctx.fillText(this.dataInfo.priceShop, textLeft,
										textTop + 45);
									// 商品门市价横线
									ctx.beginPath();
									ctx.setLineWidth(1);
									ctx.moveTo(textLeft - 1, textTop + 38);
									ctx.lineTo((textLeft + 5 + this.dataInfo
											.priceShop.length * 9), textTop +
										38);
									ctx.setStrokeStyle('#999');
									ctx.stroke();
									// 商品分割线
									ctx.beginPath();
									ctx.setLineWidth(1);
									ctx.moveTo(17, textTop + 70);
									ctx.lineTo(358, textTop + 70);
									ctx.setStrokeStyle('#eee');
									ctx.stroke();
									// 长按识别二维码访问
									ctx.setFontSize(19);
									ctx.setFillStyle('#333');
									ctx.fillText("长按识别二维码访问", 17, textTop + 136);
									// 平台名称
									ctx.setFontSize(16);
									ctx.setFillStyle('#999');
									ctx.fillText(this.platformName, 17, textTop +
										170);
									// 二维码
									ctx.drawImage(this.dataInfo.recommendCodeGoods, 238, textTop +
										88, 120, 120);
									ctx.draw(true, () => {
										// canvas画布转成图片并返回图片地址
										uni.canvasToTempFilePath({
											canvasId: 'poster',
											width: 375,
											height: 673,
											success: (res) => {
												/* if (this.posterImgs[this.swiperIndex]){
													this.posterImgs[this.swiperIndex].temporary=res.tempFilePath;
												} else {
													this.posterImgs[this.swiperIndex] = {temporary: res.tempFilePath};
												} */
												// console.log(
												// 	"海报制作成功！"
												// );
												resolve(res
													.tempFilePath
												);
											},
											fail: () => {
												uni.hideLoading();
												reject();
											}
										})
									});
								} else {
									uni.hideLoading();
									uni.showToast({
										title: '海报制作失败，图片下载失败',
										icon: 'none'
									});
								}
							} else {
								uni.hideLoading();
								uni.showToast({
									title: '海报制作失败，图片下载失败',
									icon: 'none'
								});
							}
						},
						fail: err => {
							console.log(err, "err")
							uni.hideLoading();
							uni.showToast({
								title: '海报制作失败，图片下载失败',
								icon: 'none'
							});
						}
					});
				});
			},
			// 保存图片
			async onSaveImg() {
				let imgUrl = await this.createPoster();
				/* if (this.posterImgs[this.swiperIndex] && this.posterImgs[this.swiperIndex].temporary) {
					imgUrl = await this.posterImgs[this.swiperIndex].temporary;
				} else {
					imgUrl = await this.createPoster();
				} */

				// console.log(imgUrl, "imgUrl")

				// #ifdef H5
				this.h5SaveImg = imgUrl;
				uni.hideLoading();
				// #endif
				// #ifdef MP-WEIXIN
				uni.showLoading({
					title: '海报下载中'
				});
				// if (this.settingWritePhotosAlbum) {
				uni.getSetting({
					success: res => {
						if (res.authSetting['scope.writePhotosAlbum']) {
							uni.saveImageToPhotosAlbum({
								filePath: imgUrl,
								success: () => {
									uni.hideLoading();
									uni.showToast({
										title: '保存成功'
									});
								},
								fail() {
									uni.hideLoading();
								}
							});
						} else {
							uni.showModal({
								title: '提示',
								content: '请先在设置页面打开“保存相册”使用权限',
								confirmText: '去设置',
								cancelText: '算了',
								success: data => {
									if (data.confirm) {

										uni.openSetting();
									}
									uni.hideLoading();
								},
								fail() {
									uni.hideLoading();
								}
							});
						}
					},
					fail() {
						uni.hideLoading();
					}
				});
				// } else {
				// 	this.settingWritePhotosAlbum = true;
				// 	uni.authorize({
				// 		scope: 'scope.writePhotosAlbum',
				// 		success: () => {
				// 			uni.saveImageToPhotosAlbum({
				// 				filePath: imgUrl,
				// 				success: () => {
				// 					uni.hideLoading();
				// 					uni.showToast({
				// 						title: '保存成功'
				// 					});
				// 				},
				// 				fail(){
				// 					uni.hideLoading();
				// 				}
				// 			});
				// 		},
				// 		fail(){
				// 			uni.hideLoading();
				// 		}
				// 	});
				// }
				// #endif

			},
			// 文字换行
			drawtext(text, maxWidth) {
				let textArr = text.split("");
				let len = textArr.length;
				// 上个节点
				let previousNode = 0;
				// 记录节点宽度
				let nodeWidth = 0;
				// 文本换行数组
				let rowText = [];
				// 如果是字母，侧保存长度
				let letterWidth = 0;
				// 汉字宽度
				let chineseWidth = 21;
				// otherFont宽度
				let otherWidth = 10.5;
				for (let i = 0; i < len; i++) {
					if (/[\u4e00-\u9fa5]|[\uFE30-\uFFA0]/g.test(textArr[i])) {
						if (letterWidth > 0) {
							if (nodeWidth + chineseWidth + letterWidth * otherWidth > maxWidth) {
								rowText.push({
									type: "text",
									content: text.substring(previousNode, i)
								});
								previousNode = i;
								nodeWidth = chineseWidth;
								letterWidth = 0;
							} else {
								nodeWidth += chineseWidth + letterWidth * otherWidth;
								letterWidth = 0;
							}
						} else {
							if (nodeWidth + chineseWidth > maxWidth) {
								rowText.push({
									type: "text",
									content: text.substring(previousNode, i)
								});
								previousNode = i;
								nodeWidth = chineseWidth;
							} else {
								nodeWidth += chineseWidth;
							}
						}
					} else {
						if (/\n/g.test(textArr[i])) {
							rowText.push({
								type: "break",
								content: text.substring(previousNode, i)
							});
							previousNode = i + 1;
							nodeWidth = 0;
							letterWidth = 0;
						} else if (textArr[i] == "\\" && textArr[i + 1] == "n") {
							rowText.push({
								type: "break",
								content: text.substring(previousNode, i)
							});
							previousNode = i + 2;
							nodeWidth = 0;
							letterWidth = 0;
						} else if (/[a-zA-Z0-9]/g.test(textArr[i])) {
							letterWidth += 1;
							if (nodeWidth + letterWidth * otherWidth > maxWidth) {
								rowText.push({
									type: "text",
									content: text.substring(previousNode, i + 1 - letterWidth)
								});
								previousNode = i + 1 - letterWidth;
								nodeWidth = letterWidth * otherWidth;
								letterWidth = 0;
							}
						} else {
							if (nodeWidth + otherWidth > maxWidth) {
								rowText.push({
									type: "text",
									content: text.substring(previousNode, i)
								});
								previousNode = i;
								nodeWidth = otherWidth;
							} else {
								nodeWidth += otherWidth;
							}
						}
					}
				}
				if (previousNode < len) {
					rowText.push({
						type: "text",
						content: text.substring(previousNode, len)
					});
				}
				return rowText;
			},

			savePic(Url) {
				Url = this.dialogImgUrl //图片路径，也可以传值进来
				var triggerEvent = "touchstart"; //指定下载方式
				var blob = new Blob([''], {
					type: 'application/octet-stream'
				}); //二进制大型对象blob
				var url = URL.createObjectURL(blob); //创建一个字符串路径空位
				var a = document.createElement('a'); //创建一个 a 标签
				a.href = Url; //把路径赋到a标签的href上
				//正则表达式，这里是把图片文件名分离出来。拿到文件名赋到a.download,作为文件名来使用文本
				a.download = Url.replace(/(.*\/)*([^.]+.*)/ig, "$2").split("?")[0];
				/* var e = document.createEvent('MouseEvents');  //创建事件（MouseEvents鼠标事件）
				e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); //初始化鼠标事件（initMouseEvent已弃用）*/

				//代替方法。创建鼠标事件并初始化（后面这些参数我也不清楚，参考文档吧 https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/MouseEvent）
				var e = new MouseEvent('click', (true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null));
				//派遣后，它将不再执行任何操作。执行保存到本地
				a.dispatchEvent(e);
				//释放一个已经存在的路径（有创建createObjectURL就要释放revokeObjectURL）
				URL.revokeObjectURL(url);
				/* 
				//这段好像并不影响，所以我不用，注释掉
				var imgs = document.getElementsByTagName("img");
				for(var i = 0,o;o = imgs[i];i++){
					
					o.addEventListener(triggerEvent,function(){
						var newurl = this.getAttribute("src");
						saveAs(newurl);
					},false);
				} */

			},
		},

		//用户点击分享
		// onShareAppMessage(e) {
		// 	let dataInfo = this.dataInfo;
		// 	let shareInfo = {
		// 		path: "/pages/home/shop/goodsDetail?objId="+dataInfo.objId,
		// 		title: dataInfo.share.shareTitle,
		// 		imageUrl: dataInfo.share.shareImg
		// 	};
		// 	if(this.userInfo.token){
		// 		shareInfo.path += "&recommendCode=" + this.userInfo.uid;
		// 	}
		// 	return shareInfo;
		// }
	};
</script>
<style lang="scss" scoped>
	// 背景图片地址和大小
	@mixin bis($url, $size: cover) {
		background-image: url($url);
		background-repeat: no-repeat;
		background-position: center center;
		background-size: $size;
	}

	// 多行省略号
	@mixin bov($num: 2) {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: $num;
		-webkit-box-orient: vertical;
	}

	.poster_qr {
		width: 100px;
		height: 100px;
		position: absolute;
		top: -999px;
		left: -999px;
	}

	.poster_page {
		min-height: 100vh;
		background-color: #f5f5f5;
		display: flex;
		align-items: center;
	}

	.poster_canvas {
		width: 750rpx;
		height: 1334rpx;
		position: fixed;
		top: -10000rpx;
		left: 0rpx;
	}

	.poster_swiper {
		height: 950rpx;
		width: 100%;

		swiper-item {
			box-sizing: border-box;
			display: flex;
			align-items: center;

			.goods_info_box {
				width: 100%;
				height: 100%;
				transform: scale(0.88);
				transition: all 0.4s;
				position: relative;
				overflow: hidden;
				background-color: #FFFFFF;

				&.active {
					transform: scale(1);
				}

				.goods_image {
					width: 100%;
					height: calc(100vw - 220rpx);
				}

				.goods_info {
					padding: 24rpx;

					.goods_name {
						color: #333;
						font-size: 30rpx;
						// @include bov(2);
					}

					.price_box {
						margin-top: 24rpx;
						display: flex;
						align-items: center;

						.price {
							font-size: 38rpx;
							color: red;
						}

						.store_price {
							margin-left: 30rpx;
							font-size: 26rpx;
							color: #999;
							text-decoration: line-through;
						}
					}

					.poster_info {
						border-top: 2rpx solid #f1f1f1;
						padding-top: 24rpx;
						margin-top: 24rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;

						.info {
							display: flex;
							flex-direction: column;

							view {
								color: #333;
								font-size: 28rpx;
							}

							text {
								color: #999;
								font-size: 24rpx;
								margin-top: 20rpx;
							}
						}

						.poster_code_image {
							width: 170upx;
							height: 170upx;
							flex-shrink: 0;
						}

					}
				}
			}
		}
	}

	.share_save_box {
		position: fixed;
		// bottom: calc((100vh - 950rpx - 240rpx) / 4);
		bottom: 10px;
		left: 0;
		z-index: 6;
		width: 100%;
		display: flex;
		justify-content: space-around;

		.b-con {
			display: flex;
			flex-direction: column;
			align-items: center;
			background-color: transparent;

			image {
				width: 60rpx;
				height: 60rpx;
			}

			text {
				font-size: 24rpx;
				color: #333333;
			}
		}
	}

	.h5_press_save {
		background-color: #000;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		z-index: 100;

		image {
			width: 100%;
		}

		.download {
			font-size: 24rpx;
			color: #ffffff;
			background-color: rgba(0, 0, 0, 0.5);
			display: flex;
			align-items: center;
			flex-direction: row;
			justify-content: center;
			position: absolute;
			padding: 5rpx 30rpx;
			border-radius: 40rpx;
			bottom: 30rpx;
			left: 50%;
			transform: translateX(-50%);

			&:before {
				content: '';
				@include bis('../../static/img/icon_download.png');
				width: 24rpx;
				height: 24rpx;
				margin-right: 15rpx;
			}
		}
	}
</style>