使用canvas截取web camera指定区域,并生成图片

news2024/11/16 22:01:55

目标,截取红色色块背后的视频区域。
在这里插入图片描述
代码结构如下:

<div id="p1">
  <video id="v1" autoplay playsinline></video>
  <div id="mrz"></div>
  <canvas id="captureCanvas"></canvas>
</div>
<button id="screenshot-btn">截图</button>
<img id="screenshot" src="" alt="screenshot">

核心代码是确定截取坐标及大小。

// 定义截图函数
async function takeScreenshot() {
  // 获取视频元素
  const video = document.getElementById('v1');

  // 获取 mrz 区域的位置和尺寸
  const mrzRect = document.getElementById('mrz').getBoundingClientRect();
  const mrzWidth = mrzRect.width;
  const mrzHeight = mrzRect.height;

  // 设置 canvas 大小为 mrz 区域的大小
  const canvas = document.getElementById('captureCanvas');
  canvas.width = mrzWidth;
  canvas.height = mrzHeight;

  // 获取 canvas 的 2D 上下文
  const ctx = canvas.getContext('2d');

  // 清除 canvas
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 获取视频元素的位置
  const videoRect = video.getBoundingClientRect();

  // 获取 mrz 区域相对于视频的位置
  const mrzX = mrzRect.left - videoRect.left;
  const mrzY = mrzRect.top - videoRect.top;

  // 计算视频流的像素比例
  const videoScaleX = videoRect.width / video.videoWidth;
  const videoScaleY = videoRect.height / video.videoHeight;

  // 计算原始视频坐标
  const originalMrzX = Math.round(mrzX / videoScaleX);
  const originalMrzY = Math.round(mrzY / videoScaleY);

  // 确保原始坐标正确
  const finalMrzX = Math.max(0, originalMrzX);
  const finalMrzY = Math.max(0, originalMrzY);

  // 使用 drawImage 方法绘制指定区域到 canvas 上
  ctx.drawImage(
    video,
    finalMrzX, finalMrzY, // 源图像的起始坐标
    mrzWidth / videoScaleX, mrzHeight / videoScaleY, // 源图像的宽度和高度
    0, 0, // 目标图像的起始坐标
    mrzWidth, mrzHeight // 目标图像的宽度和高度
  );

  // 生成图片
  const dataUrl = canvas.toDataURL();
  document.getElementById('screenshot').src = dataUrl;
}

最关键的就是这段代码:

// 使用 drawImage 方法绘制指定区域到 canvas 上
  ctx.drawImage(
    video,
    finalMrzX, finalMrzY, // 源图像的起始坐标
    mrzWidth / videoScaleX, mrzHeight / videoScaleY, // 源图像的宽度和高度
    0, 0, // 目标图像的起始坐标
    mrzWidth, mrzHeight // 目标图像的宽度和高度
  );

实际应用的时候可能截取的区域不是很准确,有偏差,这时候可以通过调整起始坐标位置和源图像的宽高,来调整截图区域,使截出来的图片更准确。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2172612.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

在 CentOS 安装 Python3.7 (没有弯路)

下载Python源码包 wget https://www.python.org/ftp/python/3.7.12/Python-3.7.12.tgz安装前准备 安装依赖组件 yum -y install wget zlib-devel bzip2-devel openssl-devel ncurses-devel sqlite-devel readline-devel tk-devel gcc make libffi-devel xz-devel解压安装 解…

前海石公园的停车点探寻

前海石公园是真的很美&#xff0c;很多看海人&#xff0c;很多钓鱼佬&#xff0c;很多抓螃蟹的人&#xff0c;很多挖沙子的人&#xff0c;很多拍照的人&#xff0c;尤其是没有大太阳的时间段或每天傍晚或每个放假的时候人气超高&#xff0c;故前海石公园停车真的很紧张。由于前…

INTO:Web3世界的“价值引力场”

在Web3的宇宙中&#xff0c;一股强大的引力正在重塑整个数字世界的格局。这股引力&#xff0c;来自一个名为INTO的“超级连接器”。作为Web3社交领域的先锋&#xff0c;INTO正在用一种前所未有的方式重构整个产业链的价值体系。它不再满足于单一领域的创新&#xff0c;而是大胆…

MySQL之基础篇

数据库操作 1.查看当前的数据库版本 select version(); 2.显示所有数据库 show databases; 3.创建数据库 create [if not exists] database 数据库名 character set 字符编码集 collate 排序规则&#xff1b; 我们这里提前说一下 被方括号括起来的代码 表示可写可不写 示例…

1panel申请https/ssl证书自动续期

参考教程 https://hin.cool/posts/sslfor1panel.html #Acme 账户 #1panel.腾讯云dns账号 这里有一步不需要参考,腾讯云dns账号,就是子帐号授权 直接控制台搜索 访问管理 创建用户 授权搜索dns,选择第一个 点击用户名,去掉AdministratorAccess权限 5.点击api密钥生成即可…

python绘制多个wav文件的基频曲线图

任务描述 需要在一个图中绘制多个wav文件的基频图&#xff0c;具体一点&#xff0c;绘制三种不正常的基频曲线&#xff0c;和一种正常的基频曲线进行对比&#xff0c;并且将正常的基频曲线的范围画出。 代码 import pyworld as pw import librosa import numpy as npdef extr…

微调大模型(Finetuning Large Language Models)—Data_preparation(四)

1. 数据的质量 数据准备的步骤&#xff1a; 什么是tokenizing&#xff1f; 其实就是将文本数据转换为代表文本的数字&#xff0c;一般是基于字符出现的频率。需要注意的&#xff0c;编码和解码的tokenizer需保持一致&#xff0c;一般训练的模型有自己专属匹配的tokenizer。 …

实习结帖(flask加上AIGC实现设计符合OpenAPI要求的OpenAPI Schema,让AIGC运行时可以调用api,协助公司门后迁移新后端等)

终于&#xff0c;笔者的实习生活也要告一段落了&#xff0c;最后的几天都在忙着和公司做AIGC的项目&#xff0c;在搞api的设计以及公司门户网站的迁移。 牛马搬运工&#xff08;牛马了3天&#xff09; 先说这个门户网站的迁移&#xff0c;我原本以为只是换个后端&#xff08;若…

新版本Android Studio如何新建Java code工程

新版本Android Studio主推Kotlin&#xff0c;很多同学以为无法新建Java工程了&#xff0c;其实是可以的&#xff0c;如果要新建Java代码的Android工程&#xff0c;在New Project的时候需要选择Empty Views Activity&#xff0c;如图所示&#xff0c;gradle也建议选为build.grad…

RP2040 C SDK GPIO和IRQ 唤醒功能使用

RP2040 C SDK GPIO和中断功能使用 SIO介绍 手册27页&#xff1a; The Single-cycle IO block (SIO) contains several peripherals that require low-latency, deterministic access from the processors. It is accessed via each processor’s IOPORT: this is an auxiliary…

MyBatis——Plus

MyBatis——Plus怎么知道他是访问哪张表

48 旋转图像

解题思路&#xff1a; \qquad 这道题同样需要用模拟解决&#xff0c;原地算法要求空间复杂度尽量小&#xff0c;最好为 O ( 1 ) O(1) O(1)。模拟的关键是找到旋转的内在规律&#xff0c;即旋转前后的位置坐标的变化规律。 \qquad 正方形矩阵类似洋葱&#xff0c;可以由不同大小…

计算机毕业设计 在线问诊系统的设计与实现 Java实战项目 附源码+文档+视频讲解

博主介绍&#xff1a;✌从事软件开发10年之余&#xff0c;专注于Java技术领域、Python人工智能及数据挖掘、小程序项目开发和Android项目开发等。CSDN、掘金、华为云、InfoQ、阿里云等平台优质作者✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精…

又一条地铁无人线开通!霞智科技智能清洁机器人正式“上岗”

2024年9月26日12时&#xff0c;又一条无人线开通运营&#xff0c;这是陕西省首条全自动无人驾驶地铁线路。该线路作为北跨战略的先行工程&#xff0c;是连接主城区与渭北地区的轨道交通快线&#xff0c;对优化城市总体空间布局、推动区域融合发展、促进沿线产业升级具有十分重要…

电脑上数据丢了怎么找回来 Win系统误删文件如何恢复

无论是在工作中&#xff0c;还是生活中&#xff0c;电脑都是不可缺少的重要工具&#xff0c;尤其是在工作中&#xff0c;电脑不仅可以高效的完成工作&#xff0c;还可以存储工作中的重要资料。不过在使用电脑的时候&#xff0c;也会遇到数据丢失的情况。针对这一问题&#xff0…

渗透测试--文件上传常用绕过方式

文件上传常用绕过方式 1.前端代码&#xff0c;限制只允许上传图片。修改png为php即可绕过前端校验。 2.后端校验Content-Type 校验文件格式 前端修改&#xff0c;抓取上传数据包&#xff0c;并且修改 Content-Type 3.服务端检测&#xff08;目录路径检测&#xff09; 对目…

在Java中使用GeoTools解析POI数据并存储到PostGIS实战

目录 前言 一、POI数据相关介绍 1、原始数据说明 2、空间数据库表设计 二、POI数据存储的设计与实现 1、对应的数据模型对象的设计 2、属性表数据和空间信息的读取 3、实际运行结果 三、总结 前言 POI点&#xff0c;全称为Point of Interest&#xff08;兴趣点&#xf…

大数据技术:Hadoop、Spark与Flink的框架演进

大数据技术&#xff0c;特别是Hadoop、Spark与Flink的框架演进&#xff0c;是过去二十年中信息技术领域最引人注目的发展之一。这些技术不仅改变了数据处理的方式&#xff0c;而且还推动了对数据驱动决策和智能化的需求。在大数据处理领域&#xff0c;选择合适的大数据平台是确…

git 清除二进制文件的 changes 状态

问题&#xff1a;某个分支上修改了二进制文件&#xff0c;导致 changes 一直存在&#xff0c;切换到主分支也仍然存在&#xff0c;点击 Discard 也没用 使用 git reset --hard 还原到初始状态&#xff0c;也不行&#xff0c;不过输出结果会给出错误信息 Encountered 7 file(s) …

raise Exception(“IPAdapter model not found.“)

IPAdapter模型文件太多了&#xff0c;而节点IPAdapter Unified Loader是通过函数&#xff08;get_ipadapter_file与get_clipvision_file&#xff09;预设来加载模型文件&#xff0c;当发生错误“IPAdapter model not found.“时并不指明模型文件名&#xff0c;导致想要有针对性…