vue2中怎么实现屏幕截图 自己裁剪大小完整代码

在Vue2中实现屏幕截图并裁剪大小的完整代码如下：

首先，安装 html2canvas 和 cropperjs 这两个依赖库：

npm install html2canvas cropperjs

然后，在需要进行截图的组件中，引入并使用 html2canvas 和 cropperjs：

<template>
  <div>
    <div ref="screenshotArea"> <!-- 用于截图的区域 -->
      <!-- 组件内容 -->
    </div>

    <button @click="captureScreenshot">截图</button> <!-- 触发截图的按钮 -->

    <!-- 截图预览模态框 -->
    <div class="modal" v-if="previewImage">
      <img :src="previewImage" alt="截图预览">
      <button @click="saveScreenshot">保存截图</button>
    </div>
  </div>
</template>

<script>
import html2canvas from 'html2canvas'
import Cropper from 'cropperjs'

export default {
  data() {
    return {
      previewImage: null, // 截图预览的图片
      cropper: null // cropperjs 实例
    }
  },
  methods: {
    captureScreenshot() {
      html2canvas(this.$refs.screenshotArea).then(canvas => {
        const screenshotDataUrl = canvas.toDataURL() // 将 canvas 转为图片的 base64 数据URL

        this.previewImage = screenshotDataUrl // 显示截图预览

        // 创建 cropperjs 实例，用于裁剪大小
        this.cropper = new Cropper(this.$refs.previewImage, {
          aspectRatio: 1, // 裁剪框的宽高比例
          crop(event) {
            // 裁剪框发生变化时，更新预览图片的位置和大小
            this.previewImage.style.width = event.detail.width + 'px'
            this.previewImage.style.height = event.detail.height + 'px'
            this.previewImage.style.left = event.detail.x + 'px'
            this.previewImage.style.top = event.detail.y + 'px'
          }
        })
      })
    },
    saveScreenshot() {
      const croppedCanvas = this.cropper.getCroppedCanvas() // 获取裁剪后的 canvas

      // 将裁剪后的 canvas 转为图片的 base64 数据URL
      const croppedDataUrl = croppedCanvas.toDataURL()

      // 在这里可以将 croppedDataUrl 发送到服务器保存，或者进行其他操作

      // 清除截图预览和 cropperjs 实例
      this.previewImage = null
      this.cropper.destroy()
    }
  }
}
</script>

这段代码中，使用了 html2canvas 库将指定的区域（`<div ref="screenshotArea">`）转为 canvas，然后使用 cropperjs 库对截图进行裁剪。点击截图按钮后，会显示截图预览模态框，可以通过拖动裁剪框来调整截图的大小和位置。点击保存截图按钮后，会获取裁剪后的 canvas，并将其转为图片的 base64 数据URL，你可以根据需要将这个数据发送到服务器保存或进行其他操作。

请注意，在使用这段代码之前，确保已经正确安装了所需的依赖库，并且在组件中正确引入了这两个库。