xunfeiAI/components/qiqb-share/qiqb-share.vue

<template>
	<view class="qiqb-ctx" v-bind:class="{'on':show}">

		<view class="qiqb-ctx-box">
			<!-- <text @click="show=false"></text> -->
			<canvas canvas-id="ctx"
				:style="{'width':'340px','height':cliceHeight+'px','opacity':img_show?1:0}"></canvas>
		</view>

		<view class="qiqb-ctx-img">
			<!-- <image :src="tempImage" mode="aspectFit" ></image> -->
			<img :src="tempImage">
		</view>
		<view class="qiqb-ctx-btns u-border-bottom">
			<view>分享至</view>
			<view>长按海报可转发分享</view>
			<view>
				<!-- <text>微信好友</text><text>分享朋友圈</text> -->
				<text @click="down">保存图片</text>
			</view>
		</view>
		<view class="qiqb-ctx-close" @click="close()">取消</view>
	</view>
</template>

<script>
	import {
		HTTP_REQUEST_URL

	} from '@/config/app';

	export default {
		name: "share",


		data() {
			return {
				show: false,
				tempImage: '',
				img_show: true,
				mode: 'img',
				list: [],
				len1: 0,
				len2: 0,
				cliceHeight: 0,
				pext1: '',
				pext2: '',
				theight: 0
			}
		},


		onLoad() {

		},


		mounted() {},


		methods: {

			//关闭
			close() {
				this.show = false
				this.img_show = true
			},
			//子组件接受参数
			refresh(index, item, height) {
				this.list = index;
				this.pext1 = index[index.length - 2].content
				this.pext2 = index[index.length - 1].content
				this.cliceHeight = item
				this.theight = height
				// console.log(index, item, height)
			},
			init() { // 通过opt传参数

				uni.showLoading({
					title: '生成中'
				})
				let self = this
				let ctx = uni.createCanvasContext('ctx')
				// 绘制背景 宽度 高度 圆角 颜色
				self.drawBg(ctx, 340, this.cliceHeight, 8, '#fff')

				// console.log(self.pext1, self.pext2)
				self.drawTxtOne(ctx, '农业咨询小程序', 220, 35, 100,
					'#222', 12, false)
				// 绘制圆角头像 图片地址 距离左边 距离上边 宽度 高度 圆角
				self.drawImg(ctx,
					'https://lihai001.oss-cn-chengdu.aliyuncs.com/storage/202310/20231013091310.png',
					170, 10, 40, 40, 20)
				self.drawImg(ctx,
					'https://lihai001.oss-cn-chengdu.aliyuncs.com/storage/202310/20231013091059.png',
					10, 50, 40, 40, 20)

				self.drawImg(ctx,
					'https://lihai001.oss-cn-chengdu.aliyuncs.com/storage/202310/20231013091310.png',
					10, self.theight - 15, 40, 40, 20)

				// 绘制封面图 图片地址 距离左边 距离上边 宽度 高度 圆角
				// self.drawImg(ctx, img, 10, 120, 210, 260, 8)

				// 绘制二维码 图片地址 距离左边 距离上边 宽度 高度 圆角
				self.drawImg(ctx,
					'https://lihai001.oss-cn-chengdu.aliyuncs.com/storage/202310/ai_qr_20231013091327.jpg',
					174, self.cliceHeight - 125, 100, 100,
					0)

				// 绘制单行文字 图片地址 距离左边 距离上边 宽度 颜色 字号 加粗
				// self.drawTxtOne(ctx, self.pext1, 60, 70, 100,
				// 	'#222', 12, false)
				self.drawTxtFour(ctx,
					self.pext1,
					60, 70,
					250, 20, '#222', 12)
				// self.drawTxtTwo(ctx, self.pext1, 60, 64, 80,
				// 	'#222', 13)
				// self.drawTxtTwo(ctx, self.pext1, 60,64,
				// 	190, 20, '#222', 12)
				// 绘制单行文字 图片地址 距离左边 距离上边 宽度 颜色 字号 加粗
				// self.drawTxtOne(ctx, '邀请您一起购好物', 60, 80, 100,
				// 	'#666', 9, false)

				// 绘制两行文字 图片地址 距离左边 距离上边 宽度 行高 颜色 字号
				self.drawTxtFour(ctx,
					self.pext2,
					60, self.theight,
					250, 20, '#222', 12)
				// 绘制单行文字 图片地址 距离左边 距离上边 宽度 颜色 字号 加粗
				self.drawTxtOne(ctx, '下载二维码', 15, self
					.cliceHeight - 85, 100,
					'#666', 11, false)

				// 绘制单行文字 图片地址 距离左边 距离上边 宽度 颜色 字号 加粗
				// self.drawTxtOne(ctx, '今日特价：￥', 15, 350, 100,
				// 	'#ED3327', 11, false)

				// 绘制单行文字 图片地址 距离左边 距离上边 宽度 颜色 字号 加粗
				// self.drawTxtOne(ctx, '86.00', 82, 350, 100,
				// 	'#ED3327', 11, true)

				// 绘制删除文字 图片地址 距离左边 距离上边 行高 颜色 字号 加粗
				// self.drawTxtDel(ctx, '原价:20', 15, 370, 4,
				// 	'#818181', 10, false)

				// 结束绘制
				ctx.draw()

				// 绘制图片 

				self.img_show = false
				setTimeout(() => {
					uni.canvasToTempFilePath({
						canvasId: 'ctx',
						x: 0,
						y: 0,
						width: 340,
						height: this.cliceHeight,
						destWidth: 340,
						destHeight: this.cliceHeight,
						success: res => {

							// #ifdef  H5
							uni.hideLoading()
							self.tempImage = res.tempFilePath
							self.show = true
							//#endif
							// #ifdef  APP-PLUS||MP
							self.imgfile(res.tempFilePath)
							//#endif


						},
					}, this);
				}, 3000)






			},
			//文件上传
			imgfile(tempFilePath) {
				let that = this

				uni.uploadFile({
					url: HTTP_REQUEST_URL + '/api/upload/image', // 上传地址
					filePath: tempFilePath, // 要上传的文件路径
					name: 'file', // 上传文件对应的 key 值
					header: {
						'content-type': 'multipart/form-data'
					},
					success: function(res) {

						let data = JSON.parse(res.data)
						// console.log( data.data.uri)
						if (data.code == 1) {
							uni.hideLoading()
							that.tempImage = data.data.uri
							that.show = true
							console.log('上传成功', that.tempImage)

						}
					},

					fail: function(error) {
						// 上传失败处理逻辑
						uni.hideLoading()
						console.log(error, 11);


					}
				})
			},



			down() {
				uni.showLoading({
					title: '保存中'
				})
				uni.saveImageToPhotosAlbum({
					filePath: this.tempImage,
					success: (res) => {
						console.log('保存')
						uni.hideLoading()
						this.close()
						uni.showModal({
							title: '保存成功'
						})
					}
				})
			},
			// 绘制背景 宽度 高度 圆角 颜色
			drawBg(ctx, w, h, r, color) {
				let x = 0
				let y = 0
				ctx.setFillStyle(color)
				ctx.save()
				ctx.beginPath()
				ctx.moveTo(x + r, y)
				ctx.arcTo(x + w, y, x + w, y + h, r)
				ctx.arcTo(x + w, y + h, x, y + h, r)
				ctx.arcTo(x, y + h, x, y, r)
				ctx.arcTo(x, y, x + w, y, r)
				ctx.closePath()
				ctx.fill()
			},
			// 绘制图片 图片地址 距离左边 距离上边 宽度 高度 圆角
			drawImg(ctx, img, x, y, w, h, r) {
				let self = this
				ctx.save()
				ctx.beginPath()
				ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5)
				ctx.arc(x + w - r, y + r, r, Math.PI * 1.5, Math.PI * 2)
				ctx.arc(x + w - r, y + h - r, r, 0, Math.PI * 0.5)
				ctx.arc(x + r, y + h - r, r, Math.PI * 0.5, Math.PI)
				ctx.clip()
				ctx.drawImage(img, x, y, w, h)
				ctx.restore()
			},
			// 绘制单行文字 图片地址 距离左边 距离上边 宽度 颜色 字号 加粗
			drawTxtOne(ctx, text, x, y, maxWidth, color, size, bold) {
				ctx.save()
				ctx.beginPath()
				let chr = text.split("")
				let temp = ""
				let row = []
				ctx.setFontSize(size)
				ctx.setFillStyle(color)
				for (let a = 0; a < chr.length; a++) {
					if (ctx.measureText(temp).width < maxWidth) {
						temp += chr[a]
					}
				}
				row.push(temp)
				if (ctx.measureText(temp).width > maxWidth) row[0] = row[0] + '...'

				for (var b = 0; b < row.length; b++) {
					ctx.fillStyle = color
					if (bold) {
						ctx.font = 'normal bold ' + size + 'px sans-serif'
					} else {
						ctx.font = 'normal ' + size + 'px sans-serif'
					}
					ctx.fillText(row[b], x, y)
				}
			},
			// 绘制两行文字 图片地址 距离左边 距离上边 宽度 行高 颜色 字号
			drawTxtTwo(ctx, text, x, y, maxWidth, lineHeight, color, size) {
				ctx.save()
				ctx.beginPath()
				let chr = text.split("")
				let temp = ""
				let row = []
				ctx.setFontSize(size)
				ctx.setFillStyle(color)
				for (let a = 0; a < chr.length; a++) {
					if (ctx.measureText(temp).width < maxWidth) {
						temp += chr[a];
					} else {
						a--
						row.push(temp)
						temp = ""
					}
				}
				row.push(temp)
				if (row.length > 2) {
					let rowCut = row.slice(0, 2)
					let rowPart = rowCut[1]
					let test = ""
					let empty = []
					for (var a = 0; a < rowPart.length; a++) {
						if (ctx.measureText(test).width < maxWidth) {
							test += rowPart[a]
						} else {
							break
						}
					}
					empty.push(test)
					var group = empty[0] + "..."
					rowCut.splice(1, 1, group)
					row = rowCut
				}
				for (var b = 0; b < row.length; b++) {
					ctx.fillStyle = color
					ctx.font = 'normal ' + size + 'px sans-serif'
					ctx.fillText(row[b], x, y + b * lineHeight, 300)
				}
			},
			drawTxtFour(ctx, text, x, y, maxWidth, lineHeight, color, size) {
				ctx.save()
				ctx.beginPath()
				let chr = text.split("")
				let temp = ""
				let row = []
				ctx.setFontSize(size)
				ctx.setFillStyle(color)
				for (let a = 0; a < chr.length; a++) {
					if (ctx.measureText(temp).width < maxWidth) {
						temp += chr[a];
					} else {
						a--
						row.push(temp)
						temp = ""
					}
				}
				row.push(temp)
				console.log(row[0].length)
				if (row.length > row.length) {
					let rowCut = row.slice(0, row.length)
					let rowPart = rowCut[1]
					let test = ""
					let empty = []
					for (var a = 0; a < rowPart.length; a++) {
						if (ctx.measureText(test).width < maxWidth) {
							test += rowPart[a]
						} else {
							break
						}
					}
					empty.push(test)
					var group = empty[0] + "..."
					rowCut.splice(1, 1, group)
					row = rowCut
				}
				for (var b = 0; b < row.length; b++) {
					ctx.fillStyle = color
					ctx.font = 'normal ' + size + 'px sans-serif'
					ctx.fillText(row[b], x, y + b * lineHeight, 300)
				}
			},
			drawTxtFour1(ctx, text, x, y, maxWidth, lineHeight, color, size, type) {
				ctx.save()
				ctx.beginPath()
				let chr = text.split("")
				let temp = ""
				let row = []
				ctx.setFontSize(size)
				ctx.setFillStyle(color)
				for (let a = 0; a < chr.length; a++) {
					if (ctx.measureText(temp).width < maxWidth) {
						temp += chr[a];
					} else {
						a--
						row.push(temp)
						temp = ""
					}
				}
				row.push(temp)


				if (row.length > row.length) {
					let rowCut = row.slice(0, row.length)
					let rowPart = rowCut[1]
					let test = ""
					let empty = []
					for (var a = 0; a < rowPart.length; a++) {
						if (ctx.measureText(test).width < maxWidth) {
							test += rowPart[a]
						} else {
							break
						}
					}
					empty.push(test)
					var group = empty[0] + "..."
					rowCut.splice(1, 1, group)
					row = rowCut
				}
				for (var b = 0; b < row.length; b++) {
					ctx.fillStyle = color
					ctx.font = 'normal ' + size + 'px sans-serif'
					ctx.fillText(row[b], x, y + b * lineHeight, 300)
					// console.log(row[b], x, y + b * lineHeight)
					if (type == 1) {
						this.len1 = y + b * lineHeight
					} else {
						this.len2 = y + b * lineHeight
					}

				}


				// console.log(this.len1,this.len2,type)


			},

			// 绘制删除线文字 图片地址 距离左边 距离上边 行高 颜色 字号 加粗
			drawTxtDel(ctx, txt, x, y, h, color, size) {
				ctx.fillStyle = color
				ctx.font = 'normal ' + size + 'px sans-serif'
				ctx.fillText(txt, x, y)

				ctx.beginPath()
				let width = ctx.measureText(txt).width;
				ctx.rect(x, y - h, width, 1)
				ctx.fillStyle = color
				ctx.fill()
			}
		}
	}
</script>

<style lang="scss">
	.qiqb-ctx-img {
		position: fixed;
		top: 30rpx;
		right: 0;
		bottom: 0;
		bottom: 0;
		left: 0;
		transition: all .3s;
	
		z-index: 9999;
		width: 600rpx;
		height: 750rpx;
		left: 50%;
		margin-left: -300rpx;


		img {
			width: 600rpx;
			height: 750rpx;
			object-fit: contain;
		}
	}

	.qiqb-ctx {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		bottom: 0;
		left: 0;
		z-index: -1;
		display: flex;
		background: rgba(0, 0, 0, .6);
		opacity: 0;
		transition: all .3s;
		flex-direction: column;
		align-items: flex-end;
		justify-content: flex-end
	}

	.qiqb-ctx.on {
		z-index: 2000;
		opacity: 1
	}

	.qiqb-ctx-box {
		position: relative;
		display: flex;
		padding: 30upx 0 40upx;
		width: 750upx;
		justify-content: center
	}

	.qiqb-ctx-box text {
		position: absolute;
		top: -40upx;
		right: 145upx;
		display: inline-flex;
		width: 47upx;
		height: 47upx;
		background: url('img/close.png');
		background-size: 100% 100%
	}

	.qiqb-ctx-btns {
		display: flex;
		width: 750upx;
		height: 330upx;
		border-radius: 20upx 20upx 0 0;
		background: #fff;
		flex-direction: row;
		flex-direction: column;
		align-items: center
	}

	.qiqb-ctx-btns view:nth-child(1) {
		display: flex;
		padding-top: 10upx;
		height: 80upx;
		font-weight: 700;
		font-size: 30upx;
		align-items: center
	}

	.qiqb-ctx-btns view:nth-child(2) {
		height: 80upx;
		color: #666;
		font-size: 24upx
	}

	.qiqb-ctx-btns view:nth-child(3) {
		display: flex;
		padding-bottom: 30upx;
		font-size: 26upx;
		flex-direction: row;
		align-items: center
	}

	.qiqb-ctx-btns view:nth-child(3) text {
		display: flex;
		width: 250upx;
		flex-direction: column;
		align-items: center;
		justify-content: center
	}

	.qiqb-ctx-btns view:nth-child(3) text:nth-child(1)::before {
		display: inline-flex;
		margin-bottom: 20upx;
		width: 86upx;
		height: 86upx;
		background: url('img/3.png');
		background-size: 100% 100%;
		content: ''
	}

	.qiqb-ctx-btns view:nth-child(3) text:nth-child(2)::before {
		display: inline-flex;
		margin-bottom: 20upx;
		width: 86upx;
		height: 86upx;
		background: url('img/1.png');
		background-size: 100% 100%;
		content: ''
	}

	.qiqb-ctx-btns view:nth-child(3) text:nth-child(3)::before {
		display: inline-flex;
		margin-bottom: 20upx;
		width: 86upx;
		height: 86upx;
		background: url('img/2.png');
		background-size: 100% 100%;
		content: ''
	}

	.qiqb-ctx-close {
		display: flex;
		padding-bottom: 50upx;
		width: 100%;
		height: 150upx;
		background: #fff;
		font-size: 32upx;
		align-items: center;
		justify-content: center
	}
</style>