uniapp截图功能的实现，需要用到HTML2canvas库

首先需要使用命令行导航到项目根目录当中去，然后使用npm或者yarn按照HTML2canvas库，安装好了导入库，之后就可以用了

<template>
  <view>
    <!-- 截图的内容 -->
    <view id="captureContent">
      <text>Hello, World!</text>
      <image src="https://example.com/image.jpg"></image>
    </view>
    <!-- 触发截图的按钮 -->
    <button @click="captureScreenshot">截图</button>
    <!-- 显示截图的图片 -->
    <image v-if="screenshot" :src="screenshot" mode="aspectFit" style="width: 100%;"></image>
  </view>
</template>

<script>
import html2canvas from 'html2canvas';

export default {
  data() {
    return {
      screenshot: '' // 存储截图的图片数据
    };
  },
  methods: {
    captureScreenshot() {
      // 使用HTML2Canvas将DOM节点转换为Canvas
      html2canvas(document.querySelector("#captureContent")).then(canvas => {
        // 将Canvas转换为图片并保存到data中
        this.screenshot = canvas.toDataURL('image/png');
      });
    }
  }
};
</script>

<style>
/* 样式可根据实际需要进行调整 */
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39