From fa380f081c6bacbc6287c02d46ba2b1561ee72bc Mon Sep 17 00:00:00 2001
From: 董国庆 <364620639@qq.com>
Date: 星期三, 05 三月 2025 16:37:16 +0800
Subject: [PATCH] 视频截屏
---
src/view/home/index.vue | 82 +++++++++++++++-------------------------
1 files changed, 31 insertions(+), 51 deletions(-)
diff --git a/src/view/home/index.vue b/src/view/home/index.vue
index b17d298..f525401 100644
--- a/src/view/home/index.vue
+++ b/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);
--
Gitblit v1.7.1