首页

董国庆

2025-03-05 ec0c10352a30a4d16d5e863780f342352dd35c91

首页

 package.json

@@ -17,10 +17,10 @@
    "echarts": "^5.5.0",

    "element-ui": "^2.15.14",

    "ezuikit-js": "^7.7.10",

    "html2canvas": "^1.4.1",

    "moment": "^2.29.4",

    "qs": "^6.11.2",

    "vue": "^2.6.10",

    "html2canvas": "^1.4.1",

    "vue-cookies": "^1.8.3",

    "vue-router": "^3.6.5",

    "vuex-persistedstate": "^4.1.0"


 src/view/home/index.vue

@@ -206,7 +206,7 @@


<script>

import * as echarts from "echarts";

import html2canvas from 'html2canvas';

import html2canvas from "html2canvas";

import AMapLoader from "@amap/amap-jsapi-loader";

export default {

  data() {

@@ -231,6 +231,22 @@


      carList: [], //车辆列表数据

    };

  },

  watch: {

    map(val) {

      if (val) {

        HTMLCanvasElement.prototype.getContext = (function (origFn) {

          return function (type, attributes) {

            if (type.indexOf("webgl") > -1) {

              attributes = Object.assign({}, attributes, {

                preserveDrawingBuffer: true,

              });

            }

            return origFn.call(this, type, attributes);

          };

        })(HTMLCanvasElement.prototype.getContext);

      }

    },

  },

  created() {

    //初始化窗口点击事件

@@ -458,13 +474,25 @@
        });

      }

    },

    // <img

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

    //   src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"

    // />

    listRender(record) {

      return `<div style="background: #ffffff; padding: 24px 20px;z-index: 999">

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

            <img

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

              src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"

            />

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

              <video

              ref="video"

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

               ref="monitoringCard"

                :controls="false"

                autoPlay

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

                width="620">

              </video>

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

              <!-- 全屏 -->

              <div

@@ -649,20 +677,54 @@
    },

    shotScreen() {

      console.log("截图");



      // 获取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);



      setTimeout(() => {

        let targetDom = document.querySelector("#monitoringCard");

        console.log('targetDom',targetDom)

        html2canvas(targetDom, {

          height: document.querySelector("#monitoringCard").scrollHeight,

          windowHeight: document.querySelector("#monitoringCard").scrollHeight,

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

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

        html2canvas(myCanvas, {

          height: myCanvas.scrollHeight,

          windowHeight: myCanvas.scrollHeight,

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

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

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

        }).then((canvas) => {

          let url = canvas.toDataURL("image/png"); // toDataURL: 图片格式转成 base64

          this.downloadImage(url);

        }).then((canvasp) => {

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

          this.downloadImage(dataURL);

        });

      }, 10);

      }, 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();

    },

    downloadImage(base64) {

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