JS阅读笔记

myweb3.html

<video id="video" width="400" height="300" autoplay></video>
<button id="capture-btn">拍摄图片</button>
<canvas id="canvas" width="400" height="300"></canvas>
<img id="photo" src="" alt="拍摄的图片">
<script>  const video = document.getElementById('video');const captureBtn = document.getElementById('capture-btn');const canvas = document.getElementById('canvas');const photo = document.getElementById('photo');// 获取用户媒体设备权限navigator.mediaDevices.getUserMedia({ video: true }).then(stream => {video.srcObject = stream;}).catch(error => {console.error('Error accessing media devices:', error);});// 拍摄图片captureBtn.addEventListener('click', () => {canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);const imgDataUrl = canvas.toDataURL();photo.src = imgDataUrl;});
</script>
  • canvas.getContext(‘2d’):获取二维图像
  • canvas.toDataURL:save canvas image to url
  • drawImage(video,x,y,width,height):
  • video的属性:video/mp4/ogg/webm,simple implement:见菜鸟教程link
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body> <div style="text-align:center"> <button onclick="playPause()">播放/暂停</button> <button onclick="makeBig()">放大</button><button onclick="makeSmall()">缩小</button><button onclick="makeNormal()">普通</button><br> <video id="video1" width="420"><source src="mov_bbb.mp4" type="video/mp4"><source src="mov_bbb.ogg" type="video/ogg">您的浏览器不支持 HTML5 video 标签。</video>
</div> <script> 
var myVideo=document.getElementById("video1"); function playPause()
{ if (myVideo.paused) myVideo.play(); else myVideo.pause(); 
} function makeBig()
{ myVideo.width=560; 
} function makeSmall()
{ myVideo.width=320; 
} function makeNormal()
{ myVideo.width=420; 
} 
</script> 
</body> 
</html>

修改tomcat 默认打开页面

在web.xml中

<welcome-file-list>
<welcome-file>index.html</welcome-file>
<welcome-file>index.htm</welcome-file>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>

try it,it’s found the former,

convey xml protocal in http connection

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function loadXMLDoc()
{var xmlhttp=new XMLHttpRequest();xmlhttp.onreadystatechange=function(){if (xmlhttp.readyState==4 && xmlhttp.status==200){document.getElementById("myDiv").innerHTML=xmlhttp.responseText;}}xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);xmlhttp.send();
}
</script>
</head>
<body><div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div>
<button type="button" onclick="loadXMLDoc()">修改内容</button></body>
</html>

HTML 如何显示 图片

  • key words:base64 code
  • 为了统一为file格式,传到后端
  • link maybe helpful
    https://blog.csdn.net/qq_43886365/article/details/126729188

js FileReader

https://juejin.cn/post/7028590772333051918

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

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

相关文章

win11-CapsWriter-Offline

https://github.com/Garonix/CapsWriter-Offline. 下载exe. git clone https://github.com/Garonix/CapsWriter-Offline/tree/docker-support 权重扔进models docker-compose up -d 打开exe

网站SEO关键词规划时如何筛选出合适的关键词?

在网站SEO优化过程中&#xff0c;关键词布局是一个至关重要的环节。首先&#xff0c;我们需要确定核心关键词&#xff0c;然后通过各种策略和方法对关键词进行扩展。完成关键词扩展后&#xff0c;接下来的任务就是对这些扩展后的关键词进行筛选。那么&#xff0c;如何进行有效的…

学习java第三十九天

一般使用 Autowired 注解让 Spring 容器帮我们自动装配 bean。要想把类标识成可用于 Autowired 注解自动装配的 bean 的类,可以采用以下注解实现&#xff1a; Component&#xff1a;通用的注解&#xff0c;可标注任意类为 Spring 组件。如果一个 Bean 不知道属于哪个层&#x…

模型训练基本概念-赛博炼丹

文章目录 拓展知识基础名词解释&#xff08;语义库更新&#xff09;机器学习任务流程模型训练基本流程模型训练详细流程正向传播与反向传播正向传播-求误差值反向传播-求参数值 学习率激活函数激活函数-为什么希望激活函数输出均值为0&#xff1f;激活函数 — softmax & ta…

机器学习和深度学习-- 李宏毅(笔记与个人理解)Day10

Day 10 Genaral GUidance training Loss 不够的case Loss on Testing data over fitting 为什么over fitting 留到下下周哦~~ 期待 solve CNN卷积神经网络 Bias-Conplexiy Trade off cross Validation how to split? N-fold Cross Validation mismatch 这节课总体听下来比较…

使用Docker部署开源项目FreeGPT35来免费调用ChatGPT3.5 API

Vercel部署FreeGPT35有严重限制&#xff0c;玩玩就好&#xff0c;真用还是得docker。 限制原因: Vercel的流式响应并不是一开始写流&#xff0c;客户端就能立刻收到响应流&#xff0c;而是先写到一个缓冲区&#xff0c;当流关闭才一股脑的流式响应回来(不是实时流) 因此导致: …

VideoGPT:Video Generation using VQ-VAE and Transformers

1.introduction 对于视频展示&#xff0c;选择哪种模型比较好&#xff1f;基于似然->transformers自回归。在没有空间和时间溶于的降维潜在空间中进行自回归建模是否优于在所有空间和时间像素级别上的建模&#xff1f;选择前者&#xff1a;自然图像和视频包括了大量的空间和…

Spring 统一功能处理

前言:为什么要有统一功能处理? 我们在进行数据的返回的时候,不同的方法返回的数据类型也不一样,但是我们前端有时候期望拿到是一样的数据类型。就好比买菜的时候期望最后是用一个大的塑料袋进行包装的。 那么我们可以在HTTP进行响应的之前,做一些事情,让我们返回的数据统…

【八股】AOP

AOP(Aspect Oriented Programming)&#xff0c;面向切面编程&#xff0c;他是一种编程范式。 作用&#xff1a; 在不改变原始设计的的基础上对其进行功能增强。 几个基本概念&#xff1a; 连接点&#xff1a;所有的方法 切入点&#xff1a;追加功能的方法 通知&#xff1a;追加…

组合逻辑电路( Combinational Logic Circuit)知识点总结

目录 一、组合逻辑电路的基本设计方法 1.特点 2.逻辑功能的描述 3.组合逻辑电路的分析步骤 4.组合逻辑电路的设计方法 二、编码器的逻辑电路 1.普通编码器 2.优先编码器 三、二进制和二-十进制译码器 1.3-8译码器 2.二-十进制译码器 3.应用&#xff1a;逻辑函数发生…

基于GRU实现评论文本情感分析

一、问题建模 在线评论的细粒度情感分析对于深刻理解商家和用户、挖掘用户情感等方面有至关重要的价值&#xff0c;并且在互联网行业有极其广泛的应用&#xff0c;主要用于个性化推荐、智能搜索、产品反馈、业务安全等。此博文&#xff0c;共包含6大类20个细粒度要素的情感倾…

11. 【Codeforces Round 938 (Div. 3)】D.不准确的后续搜索

D . 不准确的后续搜索 D.不准确的后续搜索 D.不准确的后续搜索 每次测试的时间限制&#xff1a; 2 秒 每次测试的时间限制&#xff1a;2 秒 每次测试的时间限制&#xff1a;2秒 每次测试的内存限制&#xff1a; 256 兆字节 每次测试的内存限制&#xff1a;256 兆字节 每次测试…

设计模式: 结构型之享元模式(7)

享元模式概述 享元模式&#xff08;Flyweight Pattern&#xff09;是一种用于优化性能的结构型设计模式&#xff0c;它通过共享对象来减少内存中对象的数量享元模式通常用于当系统中存在大量相同或相似对象时&#xff0c;通过共享这些对象的状态来减少内存消耗我们会充分利用类…

Armv7-M Interworking机制

1 前言 由于历史原因(从ARM7TDMI开始)&#xff0c; ARM处理器一直支持两种形式上相对独立的指令集&#xff0c; 它们分别是&#xff1a;  32位的ARM指令集&#xff0c;对应处理器状态&#xff1a; ARM状态&#xff0c;在32位存储器上效率较高&#xff0c;能够同时访问32位的数…

【PDF.js】PDF文件预览

【PDF.js】PDF文件预览 一、PDF.js二、PDF.js 下载1、下载PDF.js2、在项目中引入3、屏蔽跨域错误 三、项目中使用四、说明五、实现效果 使用PDFJS实现pdf文件的预览&#xff0c;支持预览指定页、关键词搜索、缩略图、页面尺寸调整等等。 一、PDF.js 官方地址 文档地址 二、PD…

FPGA开源项目分享——基于 DE1-SOC 的 String Art 实现

导语 今天继续康奈尔大学FPGA课程ECE 5760的典型案例分享——基于DE1-SOC的String Art实现。 &#xff08;更多其他案例请参考网站&#xff1a; Final Projects ECE 5760&#xff09; 1. 项目概述 项目网址 ECE 5760 Final Project 项目说明 String Art起源于19世纪的数学…

高精度地图导航论文汇总

文章目录 2022基于高精度地图的智能车辆路径规划与跟踪控制研究[M] 2023一种无人驾驶融合决策方案的设计与实现[M] 2022 基于高精度地图的智能车辆路径规划与跟踪控制研究[M] 摘要&#xff1a; 随着计算机及通信技术的不断进步&#xff0c;汽车行业也得到了飞速的发展。汽车在…

InternVideo2重塑视频理解新标杆,多模态学习引领行业风向

引言&#xff1a;视频理解的新篇章——InternVideo2的介绍 随着视频内容在日常生活中的普及&#xff0c;视频理解技术的重要性日益凸显。视频不仅包含丰富的视觉信息&#xff0c;还蕴含着动态变化和多模态元素&#xff0c;如音频和文本。这些特性使得视频成为一个复杂的数据类型…

LeetCode Meditations:合并 K 排序列表

描述 合并K分类列表 状态&#xff1a; 您有一系列 k 链接-列表 lists &#xff0c;每个链接-列表按升序排序。 合并所有链接-列表为一个排序的链接-列出并返回。 例如&#xff1a; Input: lists [[1, 4, 5], [1, 3, 4], [2, 6]] Output: [1, 1, 2, 3, 4, 4, 5, 6] Explanatio…

4.5 文字绘制

PutText 函数在图像中呈现指定的文本字符串。不能使用指定字体呈现的符号将由问号替换。 void cv::putText ( cv::Mat & img,//待绘制的图像 const String & text,//待绘制的文字 Point org,//文本框的左下角 int fontFace,//字体类型 double fontScale,//尺寸因…