From ec0c10352a30a4d16d5e863780f342352dd35c91 Mon Sep 17 00:00:00 2001
From: 董国庆 <364620639@qq.com>
Date: 星期三, 05 三月 2025 15:16:18 +0800
Subject: [PATCH] 首页
---
src/view/home/index.vue | 92 ++++++++++++++++++++++++++++++++++++++-------
1 files changed, 77 insertions(+), 15 deletions(-)
diff --git a/src/view/home/index.vue b/src/view/home/index.vue
index 501e9d7..c654b81 100644
--- a/src/view/home/index.vue
+++ b/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");
--
Gitblit v1.7.1