m-screenshot 截图

简述

页面或节点截图能力封装，用于生成分享图、凭证等。

截图组件，用于截取页面生成图片。

注意

各端截图能力差异较大，失败时请查看运行日志与平台限制。

平台差异说明

App（vue）	App（nvue）	H5	小程序
√	√	√	√

演示地址

与线上 H5 演示基座 分包一致（文档站右下角预览 iframe 亦指向同一路径）。

类型	地址
分包路径	pages_demo/extensions/extensions
线上 H5（hash）	打开演示

基本使用

<template>
	<view>
		<m-screenshot ref="screenshot">
			<view class="content">
				<!-- 需要截图的内容 -->
			</view>
		</m-screenshot>
		<m-button @click="handleScreenshot">点击截图</m-button>
	</view>
</template>

<script setup lang="uts">
	import { ref } from 'vue'
	const screenshot = ref(null)

	const handleScreenshot = () => {
		screenshot.value.capture().then(res => {
			console.log('截图成功', res.tempFilePath)
		}).catch(err => {
			console.error('截图失败', err)
		})
	}
</script>

Props

参数	说明	类型	默认值
quality	图片质量 0-1	number	0.8
delay	延迟截图，单位 ms	number	200

Methods

方法名	说明	返回
capture()	开始截图	Promise<{ tempFilePath: string }>

示例

基础截图

<m-screenshot ref="screenshot">
	<view>
		<text>需要截图的内容</text>
	</view>
</m-screenshot>

<m-button type="primary" @click="capture">截图</m-button>

说明

基于 uni-app uni.canvasToTempFilePath 思路实现，uni-app-x 环境下使用 canvas 截图。