uni-app 使用html2canvas生成海报，一步到位

ps: 如果图片存在跨域问题，请现在后台配置解决图片跨域问题;
app不能操作dom，所以app使用renderJS处理 示例在最后

步骤分为三步
1、安装html2canvas

npm i html2canvas

2、引入html2canvas

import html2canvas from 'html2canvas'

3、上代码

<view id="poster" >
<!-- 这里边是你需要保存的页面样式，需要什么样式就写什么样的就行，都放在这里边 -->
			<image src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607954723508&di=bd82faed41462479550f7b15e3ac91ba&imgtype=0&src=http%3A%2F%2Fa0.att.hudong.com%2F52%2F62%2F31300542679117141195629117826.jpg" mode=""></image>
</view>


// js
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')
				});

完整代码

<template>
	<view>
		<view class="pick poster" id="poster" style="background: #007AFF;">
			<!-- 这里边是你需要保存的页面样式，需要什么样式就写什么样的就行，都放在这里边 -->
			<view class="">
				文字
			</view>
			<image src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607954723508&di=bd82faed41462479550f7b15e3ac91ba&imgtype=0&src=http%3A%2F%2Fa0.att.hudong.com%2F52%2F62%2F31300542679117141195629117826.jpg" mode=""></image>
		</view>
		<image :src="base64" mode=""></image>
		<button type="default" @click="toImg">生成海报</button>
	</view>
</template>

<script>
	import html2canvas from 'html2canvas';
	export default {
		data() {
			return {
				base64: ''
			}
		},
		onLoad() {},
		methods: {
			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')
				});
			},
		}
	}
</script>

<style>

</style>

效果图

app示例

<template>
	<view>
		<view :change:msg="renderScript.receiveMsg" class="renderjs" id="poster">
			<view class="">
				文字
			</view>
			<image src="https://yanxincloudplatform.oss-cn-beijing.aliyuncs.com/static/client/thumbs-up/active-top.jpg" mode=""></image>
		</view>
		<button @click="renderScript.emitData">生成海报</button>
		
		<view class="poster-view">
			<image :src="base64" mode=""></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				base64: ''
			};
		},
		methods: {
			// 接收renderjs发回的数据
			receiveRenderData(val) {
				this.base64 = val
			}
		}
	};
</script>

<script module="renderScript" lang="renderjs">
	import html2canvas from 'html2canvas';
	export default {
		data() {
			return {

			}
		},
		mounted() {},
		methods: {
			// 发送数据到逻辑层
			emitData(e, ownerVm) {
				const dom = document.getElementById('poster')
				html2canvas(dom, {
					width: dom.clientWidth, //dom 原始宽度
					height: dom.clientHeight,
					scrollY: 0, // html2canvas默认绘制视图内的页面，需要把scrollY，scrollX设置为0
					scrollX: 0,
					useCORS: true, //支持跨域，但好像没什么用
				}).then((canvas) => {
					// 将生产的canvas转为base64图片3
					ownerVm.callMethod('receiveRenderData', canvas.toDataURL('image/png'))
				});

			}
		}
	};
</script>
<style>
	.poster-view{
		background: #007AFF;
		margin-top: 100rpx;
	}
</style>