vue 实现网页截图功能详解

下面是对“vue 实现网页截图功能详解”的完整攻略。

一、需求及思路

1. 需求

实现在页面中对一个区域的截图功能。

2. 思路

在页面中实现选区功能，即用户在页面中拖拽鼠标来选取截图区域。
实现截图功能，即将选取的区域转化为图片并进行保存。

二、实现选区功能

1. 选区的实现

选区的实现可以使用 vue-cropperjs 插件来进行。

安装依赖：

npm install --save cropperjs vue-cropperjs

在组件中引用插件：

<template>
  <div>
    <vue-cropper
      ref="cropper"
      :src="imgUrl"
      :aspectRatio="1"
      :zoomOnWheel="false"
      :zoomOnTouch="true"
      :dragMode="'crop'"
      :guides="false"
      :background="false"
      :autoCropArea="0.65"
    ></vue-cropper>
    <button @click="crop">截图</button>
  </div>
</template>

<script>
import VueCropper from 'vue-cropperjs';
import 'cropperjs/dist/cropper.css';

export default {
  components: { VueCropper },
  data() {
    return { imgUrl: '' };
  },
  methods: {
    // 选区后截图
    crop() {
      this.$refs.cropper.getCroppedCanvas().toBlob(function(blob) {
        const url = URL.createObjectURL(blob);
        console.log(url);
        // 将截图后的图片上传到后台等后续操作
      });
    }
  }
};
</script>

上面的代码中，ref为 cropper，即插件中的对象。下面每次都通过调用 $refs.cropper 去操作选区的相关内容。

2. 工具栏的实现

这里我们采用 element-ui 中的 el-button 来实现。具体请参考 element-ui 官网。

三、实现截图功能

选区截图后，可以将图片直接上传到后台进行处理。这里我们选择用 axios 实现上传：

import axios from 'axios';

export default {
  methods: {
    // 选区后截图
    crop() {
      this.$refs.cropper.getCroppedCanvas().toBlob(blob => {
        const formData = new FormData();
        formData.append('file', blob, 'test.jpg');
        axios.post('/upload', formData).then(response => {
          console.log(response.data);
          // 处理上传后的结果
        });
      });
    }
  }
};

四、示例说明

1. 利用 vue-cropperjs 插件把图片裁剪成指定比例

将图片裁剪成指定比例，在 vue.js 中可以利用 vue-cropperjs 插件来进行。

<template>
  <div>
    <vue-cropper
      ref="cropper"
      :src="imgUrl"
      :aspectRatio="1 / 1"
      :aspectRatioPreservedOnResize="false"
      :viewMode="1"
    ></vue-cropper>
    <button @click="crop">截图</button>
  </div>
</template>

<script>
import VueCropper from 'vue-cropperjs';
import 'cropperjs/dist/cropper.css';

export default {
  components: { VueCropper },
  data() {
    return { imgUrl: '' };
  },
  methods: {
    // 选区后截图
    crop() {
      this.$refs.cropper.getCroppedCanvas().toBlob(function(blob) {
        const url = URL.createObjectURL(blob);
        console.log(url);
        // 将截图后的图片上传到后台等后续操作
      });
    }
  }
};
</script>

上述代码中，我们设置了图片的比例为 1 / 1，即正方形。如果当前选中的区域不是正方形，则会按比例扩展或缩小选取区域。

2. 截取图片并调整大小的完整示例

<template>
  <div>
    <vue-cropper
      ref="cropper"
      :src="imgUrl"
      :dragMode="'move'"
      alt="Picture"
      :autoCrop="true"
      :autoCropWidth="500"
      :autoCropHeight="350"
      :autoCropArea="0.75"
      :viewMode="1"
      :guides="true"
      :initialAspectRatio="16 / 9"
      :background="true"
      :rotatable="false"
      :scalable="true"
      :zoomable="true"
      :zoomOnTouch="false"
      :zoomOnWheel="true"
      :cropBoxMovable="true"
      :cropBoxResizable="true"
      @ready="onCropReady"
    ></vue-cropper>
    <button @click="crop">截图</button>
  </div>
</template>

<script>
import VueCropper from 'vue-cropperjs';
import 'cropperjs/dist/cropper.css';

export default {
  components: { VueCropper },
  data() {
    return { imgUrl: '' };
  },
  methods: {
    // 选区后截图
    crop() {
      this.$refs.cropper.getCroppedCanvas().toBlob(function(blob) {
        const url = URL.createObjectURL(blob);
        console.log(url);
        // 将截图后的图片上传到后台等后续操作
      });
    },
    // 图片裁剪调整大小完成时
    onCropReady() {
      this.$refs.cropper.setCropBoxData({
        left: 0,
        top: 0,
        width: 500,
        height: 350
      });
    }
  }
};
</script>

上述代码中，我们完成了以下内容：