vue2中屏幕截图 自己裁剪大小 并显示图片完整代码

以下是在Vue2中实现屏幕截图、自定义裁剪大小并显示图片的完整代码：

<template>
  <div>
    <div="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
    }
  },
  methods: {
    captureScreenshot() {
      html2canvas(this.$refs.screenshotArea).then(canvas => {
        const screenshotDataUrl = canvas.toDataURL()
        this.previewImage = screenshotDataUrl

        this.cropper = new Cropper(this.$refs.previewImage, {
          aspectRatio: 16 / 9, // 裁剪框的宽高比例
          viewMode: 1, // 显示裁剪区域，不允许移动裁剪框外
          dragMode: 'move', // 移动裁剪框时，只能移动裁剪区域内的图片
          autoCropArea: 1, // 默认裁剪区域为图片的完整显示
          cropBoxResizable: true, // 允许调整裁剪框的大小
          cropBoxMovable: false, // 不允许移动裁剪框
          minCropBoxWidth: 100, // 最小裁剪框宽度
          minCropBoxHeight: 100, // 最小裁剪框高度
          ready() {
            // 设置初始裁剪框的大小和位置
            this.cropper.setCropBoxData({
              width: 300,
              height: 200,
              left: (this.cropper.containerData.width - 300) / 2,
              top: (this.cropper.containerData.height - 200) / 2
            })
          }
        })
      })
    },
    saveScreenshot() {
      const croppedCanvas = this.cropper.getCroppedCanvas()
      const croppedDataUrl = croppedCanvas.toDataURL()
      
      // 在这里可以将 croppedDataUrl 发送到服务器保存，或者进行其他操作
      
      this.previewImage = null
      this.cropper.destroy()
    }
  }
}
</script>

<style>
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal img {
  max-width: 100%;
  max-height: 100%;
}

button {
  margin-top: 10px;
}
</style>

在这个示例代码中，通过引入 html2canvas 和 cropperjs 库，我们实现了在Vue2中进行屏幕截图并自定义裁剪大小的功能。

在模板中，我们有一个用于截图的区域（`<div ref="screenshotArea">`）和一个触发截图的按钮。当点击按钮时，我们使用 html2canvas 将指定的区域转为 canvas，并将其转换为图片的 base64 数据URL。然后，我们使用 cropperjs 创建一个裁剪框，并在截图预览模态框中显示截图结果。用户可以通过拖动和调整裁剪框的大小来选择需要的裁剪区域。最后，用户可以点击保存截图按钮，获取裁剪后的 canvas，并将其转为图片的 base64 数据URL。

请确保在使用这段代码之前，已经正确安装了 html2canvas 和 cropperjs 库，并在组件中正确引入了这两个库。