视频截屏

董国庆

2025-03-05 fa380f081c6bacbc6287c02d46ba2b1561ee72bc

视频截屏

 src/assets/homeImg/QQ20241223-103023.mp4

Binary files differ

 src/view/home/index.vue

@@ -260,7 +260,6 @@
    window.shotScreen = () => {

      this.shotScreen();

    };



  },

  mounted() {

    let arr = [

@@ -347,8 +346,7 @@
    this.initMap();

    setTimeout(() => {

      this.addMarker(this.carList, [105.444444, 31.523333]);

    this.getCountList();



      this.getCountList();

    }, 1000);

  },

  methods: {

@@ -456,7 +454,7 @@
          let marker = new AMap.Marker({

            position: [Number(item.longitude), Number(item.latitude)], //经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]

            map: this.map,

            zooms: [5, 20],

            zooms: [13, 20],

            icon: new AMap.Icon({

              size: iconConfig.size,

              image: iconConfig.icon,

@@ -481,7 +479,7 @@
      return `<div style="background: #ffffff; padding: 24px 20px;z-index: 999">

          <div style="position: relative; width: 460px; height: 330px">

           

              <canvas ref="canvas" id="myCanvas" style="width: 460px; height: 330px" crossOrigin="anonymous"></canvas>

              <canvas ref="canvas" id="myCanvas" style="width: 460px; height: 330px;display:none" crossOrigin="anonymous"></canvas>

              <video

              ref="video"

               style="width: 460px; height: 330px; border-radius: 9px" 

@@ -489,7 +487,7 @@
               ref="monitoringCard"

                :controls="false"

                autoPlay

                src="https://www.w3schools.com/tags/movie.mp4"

                src="${require("../../assets/homeImg/QQ20241223-103023.mp4")}"

                width="620">

              </video>

            <div style="position: absolute; right: 11px; top: 10px">

@@ -546,7 +544,7 @@
      //   containLabel: true,

      // },

      const myChart = echarts.init(document.getElementById("countChart"));

      console.log('22222222222222222',myChart)

      console.log("22222222222222222", myChart);



      // 绘制数量图表

      myChart.setOption({

@@ -598,7 +596,7 @@
                ];

              },

            },

            data: [10, 52, 20, 33, 39, 30, 20],

            data: [10, 52, 200, 33, 39, 30, 20],

          },

        ],

      });

@@ -729,6 +727,19 @@
    },

    fullScreen() {

      console.log("全屏");

      const video = document.getElementById("monitoringCard");

      if (video.requestFullscreen) {

        video.requestFullscreen();

      } else if (video.mozRequestFullScreen) {

        // Firefox

        video.mozRequestFullScreen();

      } else if (video.webkitRequestFullscreen) {

        // Chrome, Safari and Opera

        video.webkitRequestFullscreen();

      } else if (video.msRequestFullscreen) {

        // IE/Edge

        video.msRequestFullscreen();

      }

    },

    shotScreen() {

      console.log("截图");

@@ -736,55 +747,24 @@
      // 获取video和canvas元素

      const video = document.getElementById("monitoringCard");

      const canvas = document.getElementById("myCanvas");

      // canvas.width = video.videoWidth;

      // canvas.height = video.videoHeight;

      // // 获取canvas的2d绘图上下文

      // const context = canvas.getContext("2d");

      // // 将当前video帧绘制到canvas上

      // context.drawImage(video, 0, 0, canvas.width, canvas.height);

      // console.log("222222222222222222222", canvas);

      // const video = this.$refs.video;

      // const canvas = this.$refs.canvas;

      // video.setAttribute("crossOrigin", "anonymous"); //  支持跨域

      const ctx = canvas.getContext("2d");

      ctx.drawImage(video, 0, 0, canvas.width, canvas.height);

      // 设置canvas的宽度和高度与video相同

      canvas.width = video.videoWidth;

      canvas.height = video.videoHeight;

      // 获取canvas的2d绘图上下文

      const context = canvas.getContext("2d");

      // 将当前video帧绘制到canvas上

      context.drawImage(video, 0, 0, canvas.width, canvas.height);



      setTimeout(() => {

        let myCanvas = document.getElementById("myCanvas");

        html2canvas(myCanvas, {

          height: myCanvas.scrollHeight,

          windowHeight: myCanvas.scrollHeight,

          backgroundColor: "#FFFFFF", //画出来的图片有白色的边框,不要可设置背景为透明色（null）

          useCORS: true, //支持图片跨域

          scale: 2, //设置放大的倍数

        }).then((canvasp) => {

          let dataURL = canvasp.toDataURL("image/png");

          this.downloadImage(dataURL);

        });

      }, 1000);



      // var img = new Image();

      // img.crossOrigin = "Anonymous";

      // img.src = canvas.src;

      // ctx.drawImage({

      //   source: img,

      //   x: 0,

      //   y: 0,

      //   width: canvas.canvasW,

      //   height: canvas.canvasH,

      //   fromCenter: false,

      // });



      // const dataURL = canvas.toDataURL();

      // const a = document.createElement("a");

      // a.href = dataURL;

      // a.download = "screenshot.png";

      // a.click();

        // 将canvas内容转换为图片

        let dataURL = canvas.toDataURL("image/png");

        this.downloadImage(dataURL);

      }, 100);

    },

    downloadImage(base64) {

      const link = document.createElement("a");

      link.href = base64;

      link.download = "image.png"; // 你希望下载的文件名

      link.download = "screenshot.png"; // 你希望下载的文件名

      document.body.appendChild(link);

      link.click();

      document.body.removeChild(link);