renshouH5/library/posterService/posterService.vue

<template>
	<view>
		<view class="poster" id="poster">
			<image class="poster-pic" :src="posterBg" mode="widthFix"></image>
			<view class="ddflex" style="padding: 22rpx 35rpx;position: relative;">
				<view class="flex">
					<view class="poster-title">杜平 | 中国人寿股份湖南分公司</view>
					<view class="poster-note">长按小程序码了解更多</view>
				</view>
				<image class="poster-code" src="/static/images/lj_img.png"></image>
				<view class="change-product ddflex" @click="jumpUrl('/library/productLink/productLink')" data-html2canvas-ignore="true">
					<image src="/static/images/edit1.png"></image>
					产品链接</view>
			</view>
		</view>
		
		<view style="height: 150rpx;"></view>
		<view class="share-btn">
			<view class="btn" @click="toImg">立即分享</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	const req = require("../../utils/request.js");
	import html2canvas from '../static/html2canvas.min.js';

	export default {
		components: {},
		props: {},
		data() {
			return {
				systems: {},
				isTop:0,
				productLink:'',
				posterBg:'',
				base64:''
			}
		},
		onLoad(options) {
			this.posterBg = 'http://img.zhiqiyun.com/test/2023/07/31/8b7ed072b68fe70f0d6f409a71a8b17b.png'
			// this.posterBg = 'https://hxdms.oss-cn-hangzhou.aliyuncs.com/hxdms/2986a2805d414b75952d609381f2d280.png'
			this.imageChange(this.posterBg)
		},
		onShow() {
			
		},
		methods: {
			jumpUrl(url){
				uni.navigateTo({
					url:url
				})
			},
			creatCode(){
				
			},
			toImg() {
				// 使页面滑到顶部，避免顶部出现白边
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 0
				})
				var dom = document.querySelector('#poster'); // 获取dom元素
				html2canvas(dom, {
					width: dom.clientWidth, //dom 原始宽度
					height: dom.clientHeight,
					scrollY: 0, // html2canvas默认绘制视图内的页面，需要把scrollY，scrollX设置为0
					scrollX: 0,
					useCORS: true, //支持跨域，但好像没什么用
				}).then((canvas) => {
					// 将生产的canvas转为base64图片
					this.base64 = canvas.toDataURL('image/png')
					console.log(this.base64)
				});
			},
			imageChange(img){
				// let imagePromise = this.getCoverSrc(img);
				// Promise.all([imagePromise]).then(([image]) => {
				// 	console.log(image)
				// 	this.posterBg = image
				// })
				// this.posterBg = image
				//创建xhr对象
			}
		},
		mounted() {
			const systemInfo = uni.getSystemInfoSync();
			// px转换到rpx的比例
			let pxToRpxScale = 750 / systemInfo.windowWidth;
			let systems = {
				ktxStatusHeight: systemInfo.statusBarHeight * pxToRpxScale, // 状态栏的高度
				navigationHeight: 44 * pxToRpxScale // 导航栏的高度
			};
			systems.barHeight = systems.ktxStatusHeight + systems.navigationHeight;
			this.systems = systems;
		},
		onPageScroll: function(e) {
			if (e.scrollTop > this.systems.barHeight) {
				this.isTop = 1;
			} else {
				this.isTop = 0;
			}
		}
	}
</script>
<style>
	@import "./posterService.css";
</style>