H5指定盒子截图，H5页面生成卡片完整代码附效果图

前端学习交流QQ群：1群：173683895 ，2群: 173683866 

承接项目开发，需求功能开发，博主微信号：Jay_09168

本篇博文是实现一个盒子里面的内容生成一直图片，包含完整代码资源，一看就会。

下面看看效果图：

页面代码：

<template>
	<!-- prop是自定义的数据字段名，要与chang后的保持一致，h2cRender是renderjs的module名称 -->
	<view class="sp-html2canvas-render" :prop="domId" :change:prop="h2cRender.watchDomId">
		<image class="sssimg" v-if="sssimg" :src="sssimg" mode="widthFix"></image>
		<!-- 主渲染内容 -->
		<view class="render-main">
			<view id="render-dom-i" class="render-content">
				内联使用RenderJs 要渲染的dom盒子
				<br />
				<h1>欢迎进群讨论插件问题</h1>
				<br />
				<image class="image-test" src="/static/logo.png" mode="heightFix"></image>
				<view class="mybtn">
					测试
				</view>
			</view>
		</view>
		<button class="exp-btn" size="mini" :prop="expOver" :change:prop="h2cRender.watchExpOver" @click="exportCustom">
			导出
		</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				sssimg:'',
				domId: 'render-dom-i', // 要渲染盒子的id
				expOver: 0,
			}
		},
		created() {},
		methods: {
			renderOver(e) {
				// 监听渲染生成完成
				// console.log('==== renderOver :', e)
				this.sssimg=e
			},
			// 自定义导出事件
			exportCustom() {
				this.expOver++ 
			}
		}
	}
</script>

<!-- renderjs目前仅支持内联使用 -->
<script module="h2cRender" lang="renderjs">
	import html2canvas from 'html2canvas';
	export default {
		data() {
			return {
				domIdValue: ''
			}
		},
		methods: {
			async renderDom() {
				// app无法通过传参获取domId,也无法直接获取到script中data或props数据
				// 必须通过特定的监听方式,与script通信,获取其data
				try {
					const el = document.getElementById(this.domIdValue);
					const canvas = await html2canvas(el, {
						width: el.offsetWidth,
						height: el.offsetHeight,
						x: 0,
						y: 0,
						logging: true,
						useCORS: true,
						allowTaint: true,
						scale: 2, // 2倍，增强清晰度
					});
					const base64 = canvas.toDataURL('image/jpeg', 1);
					this.$ownerInstance.callMethod('renderOver', base64);
				} catch (err) {
					if (this.domIdValue) {
						// 若没有监听到domId则不抛出错误
						console.log('==== err :', err.message);
					}
				}
			},
			// 监听方式,与script通信,获取其data
			watchDomId(newValue, oldValue, ownerInstance, instance) {
				console.log('==== watchDomId :', newValue);
				this.domIdValue = newValue
			},
			watchExpOver(newValue, oldValue, ownerInstance, instance) {
				console.log('==== watchExpOver :', newValue);
				if (newValue !== 0) {
					// 初始不做监听，避免默认第一次就自动渲染
					this.renderDom()
				}
			}
		}
	}
</script>

<style lang="scss">
	.mybtn{
		width: 200rpx;
		color: #fff;
		height: 300rpx;
		background: #822fff;
		text-align: center;
		padding: 10rpx;
	}
	.sssimg{
		width: 80%;
	}
	.sp-html2canvas-render {
		position: relative;
	}

	.render-main {
		/* 若要渲染的盒子超出页面,建议给外层盒子一个overflow:auto */
		overflow: auto;
	}

	.render-content {
		width: 100%;
		height: 80vh;
		background-color: #66ccff;
		padding: 12px;
		box-sizing: border-box;
		color: #ffffff;
		overflow: auto;
	}

	.content {
		width: 100%;
		color: #000000;
		position: relative;

		.image-test {
			height: 60px;
			display: block;
			position: absolute;
			top: 60px;
			right: 60px;
		}
	}

	.exp-btn {
		position: absolute;
		top: 24rpx;
		right: 24rpx;
		line-height: unset;
		padding: 12rpx;
	}
</style>