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

星辰漫步者2024-02-25 15:31

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

c 复制代码

<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>