安装 html2canvas

<!-- 把需要生成截图的元素放在一个元素容器里,设置一个ref -->
<div class="image_tofile" ref="imageTofile">
　　<!-- 这里放需要截图的元素,自定义组件元素也可以 -->
</div>
<!-- 如果需要展示截取的图片,给一个img标签 -->
<img :src="htmlUrl">

VUE代码

// 引入html2canvas

import html2canvas from 'html2canvas'

// 注册组件

data() {
　　return {
　　　　htmlUrl: ''
　　}
},
components: {
　　html2canvas
},
methods: {
　　// 页面元素转图片
　　toImage() {
　　　　// 第一个参数是需要生成截图的元素,第二个是自己需要配置的参数,宽高等
　　　　html2canvas(this.$refs.imageTofile, {
　　　　　　backgroundColor: null
　　　　}).then((canvas) => {
　　　　　　let url = canvas.toDataURL('image/png');
　　　　　　this.htmlUrl = url;
　　　　　　// 把生成的base64位图片上传到服务器,生成在线图片地址
　　　　　　this.sendUrl();
　　　　})
　　},
　　// 图片上传服务器
　　sendUrl () {
　　　　// 如果图片需要formData格式,就自己组装一下,主要看后台需要什么参数
　　　   // const formData = new FormData()
　　　　// formData.append('base64', this.company.fileUrl)
　　　　// formData.append('userId', 123)
　　　　// formData.append('pathName', 'pdf')
　　　　this.$ajax({
　　　　　　url: apiPath.common.uploadBase,
　　　　　　method: 'post',
　　　　　　data: this.htmlUrl
　　　　}).then(res => {
　　　　　　if (res.code && res.data) {
 
　　　　　　}
　　　　})
　　}
}

但是上面的写法只能截取Html画面的一般控件，假如我们需要截取video标签画面的话，这个写法就不行了。video截图的话，可以用下面的写法。注意video标签中要加上 crossorigin=”Anonymous”， 否则会出错。

<template>
  <div class="hello">
   <button @click="toImage">截图</button>
   <div >
    <video id="video1"  width="550" controls=true src='http://xxx:8888/xxx.mp4' preload="metadata" crossorigin="Anonymous"></video> 
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      htmlUrl: ''
    };
  },

  methods: {

    　　// 页面元素转图片
　　    toImage() {
            var video = document.getElementById("video1");
            var canvas = document.createElement("canvas");
            canvas.width = video.videoWidth * 1;
            canvas.height = video.videoHeight * 1;
            canvas.getContext('2d')
                .drawImage(video, 0, 0, canvas.width, canvas.height);
            this.htmlUrl = canvas.toDataURL('image/png');
　　},
  },
};
</script>