junzitang/pagesT/components/wm-poster/wm-poster.vue

<template>
	<view class="Canvas-view">
		<canvas :canvas-id="CanvasID" :style="{ width: canvasW + 'px', height: canvasH + 'px' }"></canvas>
		<view class="Canvas-two"><canvas canvas-id="CanvasTwo" :style="{ width: canvasWT + 'px', height: canvasHT + 'px' }"></canvas></view>
		<view class="btn-view primary-bg" @click="saveImg">保存图片</view>
		<view class="btn-view-close" @click="cancelImg">取消</view>
	</view>
</template>

<script>
import { getName } from '@/access/common.js';
var _this;
export default {
	name: 'wm-poster',
	props: {
		CanvasID: {
			//CanvasID 等同于 canvas-id
			Type: String,
			default: 'PosterCanvas'
		},
		imgSrc: {
			//展示图
			Type: String,
			default: ''
		},
		QrSrc: {
			//二维码
			Type: String,
			default: ''
		},
		Title: {
			//文本内容
			Type: String,
			default: ''
		},
		TitleColor: {
			//标题颜色
			Type: String,
			default: '#333333'
		},
		LineType: {
			//标题显示行数		（注超出2行显示会导致画布布局絮乱）
			Type: [String, Boolean],
			default: true
		},
		PriceTxt: {
			//价格值
			Type: String,
			default: ''
		},
		PriceColor: {
			//价格颜色
			Type: String,
			default: '#e31d1a'
		},
		OriginalTxt: {
			//原价值
			Type: String,
			default: ''
		},
		OriginalColor: {
			//默认颜色（如原价与扫描二维码颜色）
			Type: String,
			default: '#b8b8b8'
		},
		Width: {
			//画布宽度  (高度根据图片比例计算 单位upx)
			Type: String,
			default: 750
		},
		WidthT: {
			//画布宽度  (高度根据图片比例计算 单位upx)
			Type: String,
			default: 1500
		},
		CanvasBg: {
			//canvas画布背景色
			Type: String,
			default: '#ffffff'
		},
		Referrer: {
			//推荐人信息
			Type: String,
			default: getName() + '推荐给你'
		},
		ViewDetails: {
			//描述提示文字
			Type: String,
			// #ifdef MP-TOUTIAO
			default: '抖音/头条APP扫描查看商品'
			// #endif
			// #ifdef MP-WEIXIN || H5 || APP-PLUS
			default: '微信长按或扫描查看商品',
			// #endif
		}
	},
	data() {
		return {
			canvasW: 0,
			canvasH: 0,
			canvasWT: 0,
			canvasHT: 0,
			canvasImgSrc: '',
			ctx: null
		};
	},
	methods: {
		async OnCanvas() {
			uni.showLoading({
				title: '海报生成中'
			});
			let imgSrc = this.imgSrc;
			if (this.imgSrc.slice(0, this.imgSrc.indexOf('://')) === 'http') {
				imgSrc = 'https' + this.imgSrc.slice(this.imgSrc.indexOf('://'));
			}
			let QrSrc = this.QrSrc;
			if (this.QrSrc.slice(0, this.QrSrc.indexOf('://')) === 'http') {
				QrSrc = 'https' + this.QrSrc.slice(this.QrSrc.indexOf('://'));
			}
			_this.ctx = uni.createCanvasContext(_this.CanvasID, this);
			const C_W = uni.upx2px(_this.Width), //canvas宽度
				C_P = uni.upx2px(0), //canvas Paddng 间距
				C_Q = uni.upx2px(150); //二维码或太阳码宽高
			let _strlineW = 0; //文本宽度
			let _imgInfo = await _this.getImageInfo({ imgSrc: imgSrc }); //广告图
			let _QrCode = await _this.getImageInfo({ imgSrc: QrSrc }); //二维码或太阳码
			let r = [_imgInfo.width, _imgInfo.height];
			let q = [_QrCode.width, _QrCode.height];
			let imgW = C_W - C_P * 2;
			if (r[1] != imgW) {
				r[0] = Math.floor((imgW / r[1]) * r[0]);
				r[1] = imgW;
			}
			if (q[0] != C_Q) {
				q[1] = Math.floor((C_Q / q[0]) * q[1]);
				q[0] = C_Q;
			}
			_this.canvasW = C_W;
			_this.canvasH = r[1] + q[1] + 128;
			_this.ctx.setFillStyle(_this.CanvasBg); //canvas背景颜色
			_this.ctx.fillRect(0, 0, C_W, _this.canvasH); //canvas画布大小

			//添加图片展示

			_this.ctx.drawImage(_imgInfo.path, (C_W-r[0])/2 , C_P, r[0], r[1]);
			//添加图片展示 end

			//设置文本
			_this.ctx.setFontSize(uni.upx2px(28)); //设置标题字体大小
			_this.ctx.setFillStyle(_this.TitleColor); //设置标题文本颜色
			let _strLastIndex = 0; //每次开始截取的字符串的索引
			let _strHeight = r[1] + C_P * 2 + 20; //绘制字体距离canvas顶部的初始高度
			let _num = 1;
			for (let i = 0; i < _this.Title.length; i++) {
				_strlineW += _this.ctx.measureText(_this.Title[i]).width;
				if (_strlineW > r[0]) {
					if (_num == 2 && _this.LineType) {
						//文字换行数量大于二进行省略号处理
						// _this.ctx.fillText(_this.Title.substring(_strLastIndex, i - 8) + '...', C_P, _strHeight);
						_this.ctx.fillText(_this.Title.substring(_strLastIndex, i - 8) + '...', 15, _strHeight, C_W - 30);
						_strlineW = 0;
						_strLastIndex = i;
						_num++;
						break;
					} else {
						// _this.ctx.fillText(_this.Title.substring(_strLastIndex, i), C_P, _strHeight);
						_this.ctx.fillText(_this.Title.substring(_strLastIndex, i), 15, _strHeight, C_W - 30);
						_strlineW = 0;
						_strHeight += 20;
						_strLastIndex = i;
						_num++;
					}
				} else if (i == _this.Title.length - 1) {
					// _this.ctx.fillText(_this.Title.substring(_strLastIndex, i + 1), C_P, _strHeight);
					_this.ctx.fillText(_this.Title.substring(_strLastIndex, i + 1), 15, _strHeight, C_W - 30);
					_strlineW = 0;
				}
			}
			//设置文本 end

			//设置价格
			_strlineW = C_P;
			_strHeight += uni.upx2px(60);
			if (_num == 1) {
				_strHeight += 20; //单行标题时占位符
			}

			if (_this.PriceTxt != '') {
				//判断是否有销售价格
				_this.ctx.setFillStyle(_this.PriceColor);
				_this.ctx.setFontSize(uni.upx2px(38));
				// _this.ctx.fillText(_this.PriceTxt, _strlineW, _strHeight); //商品价格
				_this.ctx.fillText(_this.PriceTxt, 15, _strHeight); //商品价格
				console.log('_this.PriceTxt:', _this.PriceTxt.length*10)
				// _strlineW += _this.ctx.measureText(_this.PriceTxt).width + uni.upx2px(10);
				_strlineW += _this.PriceTxt.length*10
			}
			if (_this.PriceTxt != '' && _this.OriginalTxt != '') {
				//判断是否有销售价格且原价
				_this.ctx.setFillStyle(_this.OriginalColor);
				_this.ctx.setFontSize(uni.upx2px(24));
				_this.ctx.fillText(_this.OriginalTxt, _strlineW + 25, _strHeight); //商品原价
			}
			_this.ctx.strokeStyle = _this.OriginalColor;
			_this.ctx.moveTo(_strlineW + 25, _strHeight - uni.upx2px(10)); //起点
			_this.ctx.lineTo(_strlineW + _this.ctx.measureText(_this.OriginalTxt).width + 25, _strHeight - uni.upx2px(10)); //终点
			_this.ctx.stroke();
			//设置价格 end

			//添加二维码
			_strHeight += uni.upx2px(20);
			// _this.ctx.drawImage(_QrCode.path, r[0] - q[0] + C_P, _strHeight, q[0], q[1]);
			_this.ctx.drawImage(_QrCode.path, q[0] + 30, _strHeight, q[0], q[1]);
			//添加二维码 end

			//添加推荐人与描述
			// #ifdef MP
			// _this.ctx.setFillStyle(_this.TitleColor);
			// _this.ctx.setFontSize(uni.upx2px(30));
			// _this.ctx.fillText(_this.Referrer, C_P, _strHeight + q[1] / 2);
			//  #endif
			_this.ctx.setFillStyle(_this.OriginalColor);
			_this.ctx.setFontSize(uni.upx2px(24));
			_this.ctx.fillText(_this.ViewDetails, q[0] + 10, _strHeight + q[1] + 20);
			//添加推荐人与描述 end

			//延迟后渲染至canvas上
			setTimeout(function() {
				_this.ctx.draw(true, ret => {
					_this.getNewImage();
				});
			}, 600);
		},
		async OnCanvasTwo() {
			let imgSrc = this.imgSrc;
			if (this.imgSrc.slice(0, this.imgSrc.indexOf('://')) === 'http') {
				imgSrc = 'https' + this.imgSrc.slice(this.imgSrc.indexOf('://'));
			}
			let QrSrc = this.QrSrc;
			if (this.QrSrc.slice(0, this.QrSrc.indexOf('://')) === 'http') {
				QrSrc = 'https' + this.QrSrc.slice(this.QrSrc.indexOf('://'));
			}
			_this.ctx = uni.createCanvasContext(_this.CanvasID, this);
			const C_W = uni.upx2px(_this.WidthT), //canvas宽度
				C_P = uni.upx2px(30), //canvas Paddng 间距
				C_Q = uni.upx2px(150); //二维码或太阳码宽高
			let _strlineW = 0; //文本宽度
			let _imgInfo = await _this.getImageInfo({ imgSrc: imgSrc }); //广告图
			let _QrCode = await _this.getImageInfo({ imgSrc: QrSrc }); //二维码或太阳码
			let r = [_imgInfo.width, _imgInfo.height];
			let q = [_QrCode.width, _QrCode.height];
			let imgW = C_W - C_P * 2;
			if (r[0] != imgW) {
				r[1] = Math.floor((imgW / r[0]) * r[1]);
				r[0] = imgW;
			}
			if (q[0] != C_Q) {
				q[1] = Math.floor((C_Q / q[0]) * q[1]);
				q[0] = C_Q;
			}
			_this.canvasW = C_W;
			_this.canvasH = r[1] + q[1] + 128;
			_this.ctx.setFillStyle(_this.CanvasBg); //canvas背景颜色
			_this.ctx.fillRect(0, 0, C_W, _this.canvasH); //canvas画布大小

			//添加图片展示
			_this.ctx.drawImage(_imgInfo.path, C_P, C_P, r[0], r[1]);
			//添加图片展示 end

			//设置文本
			_this.ctx.setFontSize(uni.upx2px(28)); //设置标题字体大小
			_this.ctx.setFillStyle(_this.TitleColor); //设置标题文本颜色
			let _strLastIndex = 0; //每次开始截取的字符串的索引
			let _strHeight = r[1] + C_P * 2 + 10; //绘制字体距离canvas顶部的初始高度
			let _num = 1;
			for (let i = 0; i < _this.Title.length; i++) {
				_strlineW += _this.ctx.measureText(_this.Title[i]).width;
				if (_strlineW > r[0]) {
					if (_num == 2 && _this.LineType) {
						//文字换行数量大于二进行省略号处理
						_this.ctx.fillText(_this.Title.substring(_strLastIndex, i - 8) + '...', C_P, _strHeight);
						_strlineW = 0;
						_strLastIndex = i;
						_num++;
						break;
					} else {
						_this.ctx.fillText(_this.Title.substring(_strLastIndex, i), C_P, _strHeight);
						_strlineW = 0;
						_strHeight += 20;
						_strLastIndex = i;
						_num++;
					}
				} else if (i == _this.Title.length - 1) {
					_this.ctx.fillText(_this.Title.substring(_strLastIndex, i + 1), C_P, _strHeight);
					_strlineW = 0;
				}
			}
			//设置文本 end

			//设置价格
			_strlineW = C_P;
			_strHeight += uni.upx2px(60);
			if (_num == 1) {
				_strHeight += 20; //单行标题时占位符
			}

			if (_this.PriceTxt != '') {
				//判断是否有销售价格
				_this.ctx.setFillStyle(_this.PriceColor);
				_this.ctx.setFontSize(uni.upx2px(38));
				_this.ctx.fillText(_this.PriceTxt, _strlineW, _strHeight); //商品价格
				_strlineW += _this.ctx.measureText(_this.PriceTxt).width + uni.upx2px(10);
			}
			if (_this.PriceTxt != '' && _this.OriginalTxt != '') {
				//判断是否有销售价格且原价
				_this.ctx.setFillStyle(_this.OriginalColor);
				_this.ctx.setFontSize(uni.upx2px(24));
				_this.ctx.fillText(_this.OriginalTxt, _strlineW, _strHeight); //商品原价
			}
			_this.ctx.strokeStyle = _this.OriginalColor;
			_this.ctx.moveTo(_strlineW, _strHeight - uni.upx2px(10)); //起点
			_this.ctx.lineTo(_strlineW + _this.ctx.measureText(_this.OriginalTxt).width, _strHeight - uni.upx2px(10)); //终点
			_this.ctx.stroke();
			//设置价格 end

			//添加二维码
			_strHeight += uni.upx2px(20);
			_this.ctx.drawImage(_QrCode.path, r[0] - q[0] + C_P, _strHeight, q[0], q[1]);
			//添加二维码 end

			//添加推荐人与描述
			_this.ctx.setFillStyle(_this.TitleColor);
			_this.ctx.setFontSize(uni.upx2px(30));
			// _this.ctx.fillText(_this.Referrer, C_P, _strHeight + q[1] / 2);
			_this.ctx.setFillStyle(_this.OriginalColor);
			_this.ctx.setFontSize(uni.upx2px(24));
			_this.ctx.fillText(_this.ViewDetails, C_P, _strHeight + q[1] / 2 + 20);
			//添加推荐人与描述 end

			//延迟后渲染至canvas上
			setTimeout(function() {
				_this.ctx.draw(true, ret => {
					_this.getNewImage();
				});
			}, 600);
		},

		async getImageInfo({ imgSrc }) {
			return new Promise((resolve, errs) => {
				uni.getImageInfo({
					src: imgSrc,
					success: function(image) {
						resolve(image);
					},
					fail(err) {
						errs(err);
					}
				});
			});
		},
		getNewImage() {
			uni.canvasToTempFilePath(
				{
					fileType: 'jpg',
					canvasId: _this.CanvasID,
					quality: 1,
					complete: res => {
						console.log(res.tempFilePath);
						_this.$emit('success', res);
					}
				},
				this
			);
			uni.hideLoading();
		},
		cancelImg() {
			this.$emit('cancelImg');
		},
		saveImg() {
			// destWidth: _this.canvasW * 2,
			// destHeight: _this.canvasH * 2,
			uni.canvasToTempFilePath(
				{
					fileType: 'jpg',
					canvasId: _this.CanvasID,
					quality: 1,
					destWidth: _this.canvasW * 2,
					destHeight: _this.canvasH * 2,
					complete: res => {
						console.log(res.tempFilePath);
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: function() {
								_this.$emit('saveImage');
							}
						});
					}
				},
				this
			);
		}
	},
	mounted() {
		_this = this;
		_this.OnCanvas();
		// _this.OnCanvasTwo();
	}
};
</script>

<style lang="scss">
.Canvas-view {
	.btn-view-close {
		text-align: center;
		line-height: 78upx;
		font-size: 28upx;
		color: #fff;
		border-radius: 12upx;
		width: 400upx;
		margin: 0 auto;
	}
	.btn-view {
		background: $base-btn-bg;
		text-align: center;
		line-height: 78upx;
		font-size: 28upx;
		color: #fff;
		border-radius: 12upx;
		width: 400upx;
		margin: 0 auto;
		margin-top: 30upx;
	}
	.Canvas-two {
		display: none;
		transform: translate(-1600upx, -1600upx);
	}
}
</style>