视频监控(抓拍)

最新推荐文章于 2024-07-19 12:58:53 发布



最新推荐文章于 2024-07-19 12:58:53 发布

阅读量449

点赞数 8

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/weixin_53954018/article/details/135584070

版权

示例

按钮:

 <div @click="takeClick(index, $event)" >
       <img src="@/assets/images/zhua.png" style="height: 20px;" alt="">
     </div>

// 点击截图按钮
const takeClick = (index) => {
  const urlObj = url.value.find(item => item.index == index)
  let video = videoRef.value[index]; // 获取video节点
  let canvas = document.createElement("canvas"); // 创建canvas节点
  let w = video?.clientWidth;
  let h = video?.clientHeight;
  canvas.width = w;
  canvas.height = h; // 设置宽高
  const ctx = canvas.getContext("2d");
  ctx?.drawImage(video, 0, 0, w, h); // video写入到canvas  clientHeight
  imgUrl.value = canvas.toDataURL("image/png"); // 生成截图地
  console.log(imgUrl.value, 'imgUrl')
  let newTab = window.open();
  newTab.document.open();
  newTab.document.write("<html><head><style>img { width: 100%; height: 100%; }</style></head><body><img src='" + imgUrl.value + "'></body></html>");
  newTab.document.close();
  downloadFileByBase64(imgUrl.value, urlObj.shename);
}

urlObj是当前这一项，然后获取当前这一项的下标以及dom节点

创建canvas节点，设置宽高，调用canvas 的getContext方法，以及drawImage方法，传入

生成本地图片

// 两个参数，第一个是base64地址  第二个是下载后的图片名字
const downloadFileByBase64 = (base64, name) => {
  let myBlob = dataURLtoBlob(base64);
  let myUrl = URL.createObjectURL(myBlob);
  downloadFile(myUrl, name);
}

调用下载方法

const downloadFile = (url, name = "What's the fuvk") => {
  let a = document.createElement("a");
  a.setAttribute("href", url);
  a.setAttribute("download", name);
  a.setAttribute("target", "_blank");
  let clickEvent = document.createEvent("MouseEvents");
  clickEvent.initEvent("click", true, true);
  a.dispatchEvent(clickEvent);
}

新打开链接，展示图片以及下载



关注

8
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
视频监控(抓拍)

创建canvas节点，设置宽高，调用canvas 的getContext方法，以及drawImage方法，传入。urlObj是当前这一项，然后获取当前这一项的下标以及dom节点。新打开链接，展示图片以及下载。
复制链接

扫一扫