webview-screenshot.uvue

<template>
	<view class="top-placehoder"></view>
  <web-view id="webview-screenshot" class="webview-screenshot" :webview-styles='webviewStyles' :src="src"
    @loaded="loaded" @error="error">
  </web-view>
</template>

<script>
  export default {
    data() {
      return {
        baseSrc: '',
        src: '',
        webviewContext: null as WebviewContext | null,
        isLoaded: false,
        webviewStyles: {
          progress: false
        },
				headerHeight: 0,
				devicePixelRatio: 1
      }
    },
    onReady() {
			this.getWindowInfo();
			this.getDeviceInfo();
      this.webviewContext = uni.createWebviewContext('webview-screenshot', this)
    },
    methods: {
      loaded() {
        this.isLoaded = true
      },
      error(event : WebViewErrorEvent) {
        console.log('webview load error', JSON.stringify(event.detail));
      },
			getWindowInfo() {
				const res = uni.getWindowInfo();
				// 获取状态栏+导航栏高度, 供截图对比使用
				this.headerHeight = res.statusBarHeight;
			},
			getDeviceInfo: function () {
				const res = uni.getDeviceInfo();
				// 获取像素比, 供截图对比使用
				this.devicePixelRatio = res.devicePixelRatio !== null ? parseFloat(res.devicePixelRatio!) : 1
			}
    }
  }
</script>
<style>
  .webview-screenshot {
    flex: 1;
  }
	
	.top-placehoder {
		height: var(--status-bar-height);
		background-color: #007aff;
	}
</style>