当前位置： 首页 > news >正文

JS阅读笔记

news 2026/3/27 18:49:34

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

创建隐藏元素

  • 作用：实现中间数据在不同函数间的共享、导出
const downloadPhoto = () => {const link = document.createElement('a');link.download = '你的帅照.png';link.href = canvas.toDataURL();link.click();
}

相关文章：

JS阅读笔记

myweb3.html <video id"video" width"400" height"300" autoplay></video> <button id"capture-btn">拍摄图片</button> <canvas id"canvas" width"400" height"300">&…...

编程日记 2024/4/14 9:25:26

基于spring boot的留守儿童爱心管理系统

基于spring boot的留守儿童爱心管理系统设计与实现 开发语言&#xff1a;Java 框架&#xff1a;springboot JDK版本&#xff1a;JDK1.8 服务器&#xff1a;tomcat7 数据库&#xff1a;mysql 5.7&#xff08;一定要5.7版本&#xff09; 数据库工具&#xff1a;Navicat11 开…...

编程日记 2024/4/14 9:22:23

python输入某年某月某日判断这一天是这一年的第几天

如何使用python实现输入某年某月某日判断这一天是这一年的第几天 from datetime import datetime #引入日期类 def is_leap_year(year):"""判断是否为闰年"""return (year % 4 0 and year % 100 ! 0) or (year % 400 0)# 根据年份和月份返回当…...

编程日记 2024/4/14 9:19:20

docker 上达梦导入dump文件报错：本地编码:PG GBK,导入女件编码:PGGB18030

解决方案&#xff1a; 第一步进入达梦数据容器内部 docker exec -it fc316f88caff /bin/bash 第二步&#xff1a;在容器中 /opt/dmdbms/bin目录下 执行命令 cd /opt/dmdbms/bin./dimp USERIDSYSDBA/SYSDBA001 FILE/opt/dmdbms/ZFJG_LJ20240407.dmp SCHEMASZFJG_LJUSERIDSYSD…...

编程日记 2024/4/14 9:17:18

一起学习python——基础篇（19）

今天来说一下python的如何修改文件名称、获取文件大小、读取文中指定的某一行内容。 1、修改文件名称&#xff1a; import os testPath"D:/pythonFile/test.txt" testPath2"D:/pythonFile/test2.txt" #修改文件名称使用rename方法&#xff0c; #第一个参…...

编程日记 2024/4/14 9:16:17

数模 初见数建

文章目录 初见数学建模1.1 数学建模是什么1.2 数学建模的概述1.3 如何学习数学建模---分模块化1.4 数学建模前提了解1.5 数学建模的六个步骤1.6 如何备战建模比赛1.7 数学建模赛题类型1.8 数学建模算法体系概述 初见数学建模 1.1 数学建模是什么 1.原型与模型 原型&#xff…...

编程日记 2024/4/14 9:14:15

windows系统搭建OCR半自动标注工具PaddleOCR

深度学习 文章目录 深度学习前言一、环境搭建准备方式1&#xff1a;安装Anaconda搭建1. Anaconda下载地址: [点击](https://mirrors.tuna.tsinghua.edu.cn/anaconda/archive/?CM&OD)2. 创建新的conda环境 方式2. 直接安装python 二、安装CPU版本1. 安装PaddlePaddle2、安装…...

编程日记 2024/4/14 9:13:14

01、ArcGIS For JavaScript 4.29对3DTiles数据的支持

综述 Cesium从1.99版本开始支持I3S服务的加载&#xff0c;到目前位置&#xff0c;已经支持I3S的倾斜模型、3D Object模型以及属性查询的支持。Cesium1.115又对I3S标准的Building数据实现了加载支持。而ArcGIS之前一直没有跨越对3DTiles数据的支持&#xff0c;所以在一些开发过…...

编程日记 2024/4/14 9:12:13

Spark_SparkSql写入Oracle_Undefined function.....将长字符串写入Oracle中方法..

在使用Spark编写代码将读库处理然后写入Oracle中遇到了诸多小bug,很磨人&#xff0c;好在解决了。shit!! 实测1&#xff1a;TO_CLOB(a3) 代码样例 --这是一个sparksql写入hive的一个小逻辑&#xff0c;我脱敏了噻 SELECT a1, a2, TO_CLOB(a3) AS clob_data, TO_DATE(a4) AS …...

编程日记 2024/4/14 9:11:12

2023数据要素白皮书（免费下载）

【1】关注本公众号&#xff0c;转发当前文章到微信朋友圈 【2】私信发送 【2023年数据资源入表白皮书】 【3】获取本方案PDF下载链接&#xff0c;直接下载即可。 如需下载本方案PPT原格式&#xff0c;请加入微信扫描以下方案驿站知识星球&#xff0c;获取上万份PPT解决方案&a…...

编程日记 2024/4/14 9:10:10

kafka学习记录

文章目录 windows单机版kafka搭建步骤主题的增删改查操作消息的生产与消费 Windows集群版kafka搭建步骤 prettyZoo 尚硅谷Kafka教程&#xff0c;2024新版kafka视频&#xff0c;零基础入门到实战 【尚硅谷】Kafka3.x教程&#xff08;从入门到调优&#xff0c;深入全面&#xff0…...

编程日记 2024/4/14 9:08:09

无线网络2.4和5G的区别

无线网络2.4和5的区别 无线网络2.4GHz和5GHz的主要区别在于频率、覆盖范围、传输速度、干扰能力和穿透性。以下是详细介绍&#xff1a;12 频率不同。2.4GHz的频率较低&#xff0c;而5GHz的频率较高。频率越低&#xff0c;信号在传播过程中的损失越小&#xff0c;因此覆盖范围…...

编程日记 2024/4/14 9:07:07

大模型笔记：Prompt tuning

1 NLP模型的几个阶段 1.1 第一阶段&#xff08;在深度学习出现之前&#xff09; 通常聚焦于特征工程&#xff08;feature engineering&#xff09;利用领域知识从数据中提取好的特征 1.2 第二阶段&#xff08;在深度学习出现之后&#xff09; 特征可以从数据中习得——>…...

编程日记 2024/4/14 9:00:01

【Ambari】Ansible自动化部署大数据集群

目录 一&#xff0e;版本说明和介绍信息 1.1 大数据组件版本 1.2 Apache Components 1.3 Databases支持版本 二&#xff0e;安装包上传和说明 三&#xff0e;服务器基础环境配置 3.1global配置修改 3.2主机名映射配置 3.3免密用户名密码配置 3.4 ansible安装 四. 安…...

编程日记 2024/4/14 8:58:59

RTSP/Onvif视频安防监控平台EasyNVR调用接口返回匿名用户名和密码的原因排查

视频安防监控平台EasyNVR可支持设备通过RTSP/Onvif协议接入&#xff0c;并能对接入的视频流进行处理与多端分发&#xff0c;包括RTSP、RTMP、HTTP-FLV、WS-FLV、HLS、WebRTC等多种格式。平台拓展性强、支持二次开发与集成&#xff0c;可应用在景区、校园、水利、社区、工地等场…...

编程日记 2024/4/14 8:57:57

opencv基础图行展示

"""试用opencv创建画布并显示矩形框&#xff08;适用于目标检测图像可视化&#xff09; """ # 创建一个黑色的画布&#xff0c;图像格式(BGR) img np.zeros((512, 512, 3), np.uint8)# 画一个矩形&#xff1a;给定左上角和右下角坐标&#xff0…...

编程日记 2024/4/14 8:54:55

GIF在线生成器

上传图片就能生成GIF的前端WEB工具 源码也非常简单 <!DOCTYPE html> <html lang"zh" class"dark"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1, m…...

编程日记 2024/4/14 8:50:51

使用JavaScript制作一个简单的天气应用

随着Web开发技术的不断发展&#xff0c;JavaScript已经成为前端开发中不可或缺的一部分。它不仅可以用于创建动态和交互式的用户界面&#xff0c;还可以用于处理各种复杂的任务&#xff0c;如数据验证、动态内容更新、实时通信等。以下是一个使用JavaScript来创建一个简单天气应…...

编程日记 2024/4/14 8:49:49

说说对WebSocket的理解？应用场景？

文章目录 一、是什么二、特点全双工二进制帧协议名握手优点 三、应用场景参考文献 一、是什么 WebSocket&#xff0c;是一种网络传输协议&#xff0c;位于OSI模型的应用层。可在单个TCP连接上进行全双工通信&#xff0c;能更好的节省服务器资源和带宽并达到实时通迅 客户端和…...

编程日记 2024/4/14 8:45:45

网路维护基础知识

1、路由器 路由器&#xff1a;路由器就是将一个可以接入互联网的网路地址分成若干个网路地址可供终端设备连接的网路设备&#xff0c;设备既可以通过有线连接也可以通过无线连接进入互联网 2、交换机 交换机&#xff1a;个人感觉交换机只是为那些有线网路设计的&#xff0c;…...

编程日记 2024/4/14 8:44:44

Homebrew卸载与重装指南：彻底清理残留文件的正确姿势

Homebrew深度清理与重装实战&#xff1a;从残留文件追踪到ARM架构优化 每次系统升级或开发环境切换时&#xff0c;那些隐藏在系统深处的Homebrew残留文件就像房间里扫不尽的灰尘——明明已经卸载了所有公式&#xff0c;却在重新安装时遇到各种诡异的权限错误或版本冲突。作为m…...

编程新知 2026/3/27 17:58:05

求一个V站邀请码

有没有大佬可以给个邀请码~~~~~~~~~~~~~~~~~~...

编程新知 2026/3/27 17:25:57

CodeSys WebVisu避坑指南：用three.js给机械臂做3D可视化，我踩过的8个坑

CodeSys WebVisu与three.js深度整合实战&#xff1a;机械臂3D可视化开发避坑手册 在工业自动化领域&#xff0c;机械臂的实时状态可视化一直是HMI开发中的难点与痛点。传统解决方案往往受限于渲染效果和交互灵活性&#xff0c;而基于WebGL的three.js技术栈恰好能弥补这些不足。…...

编程新知 2026/3/27 17:11:52

Deepin Boot Maker：智能解析引擎驱动的跨平台启动盘制作方案

Deepin Boot Maker&#xff1a;智能解析引擎驱动的跨平台启动盘制作方案 【免费下载链接】deepin-boot-maker 项目地址: https://gitcode.com/gh_mirrors/de/deepin-boot-maker Deepin Boot Maker是一款采用智能解析引擎的跨平台开源工具&#xff0c;通过自动化流程与硬…...

编程新知 2026/3/27 17:09:49

Python多线程真能并行了吗？（GIL绕过技术全图谱：subprocess/numba/multiprocessing/cython/rustpy）

第一章&#xff1a;Python无锁GIL环境下的并发模型面试题汇总Python 的全局解释器锁&#xff08;GIL&#xff09;长期被视为多线程并发的瓶颈&#xff0c;但近年来随着 CPython 3.13 引入实验性无锁 GIL&#xff08;--without-pymalloc 配合 --with-per-object-gil 原型&#x…...

编程新知 2026/3/27 16:47:32

VSCode配置STM32标准库开发环境：手把手解决core_cm3.c编译报错与头文件路径问题

VSCode搭建STM32开发环境&#xff1a;解决标准库兼容性与智能感知难题 当开发者从Keil或IAR转向VSCode时&#xff0c;往往会遇到两个棘手的拦路虎&#xff1a;标准库与GCC的兼容性问题&#xff0c;以及代码智能感知的缺失。本文将深入解决这两个核心痛点&#xff0c;带你构建一…...

编程新知 2026/3/27 16:07:19

1Panel新手必看：5分钟搞定RustDesk远程桌面搭建（含端口配置避坑指南）

1Panel极速部署RustDesk&#xff1a;零基础构建安全远程桌面的完整指南 当我们需要远程管理Linux服务器时&#xff0c;一个轻量级、开源的远程桌面解决方案往往比商业软件更灵活可控。RustDesk作为新兴的远程工具&#xff0c;凭借其跨平台特性和自建服务器的能力&#xff0c;正…...

编程新知 2026/3/27 15:57:16

Wan2.2-I2V-A14B开源可部署：符合等保2.0要求，支持审计日志+访问控制

Wan2.2-I2V-A14B开源可部署&#xff1a;符合等保2.0要求&#xff0c;支持审计日志访问控制 1. 镜像概述与核心特性 Wan2.2-I2V-A14B是一款专为文生视频任务优化的私有部署镜像&#xff0c;基于RTX 4090D 24GB显存显卡和CUDA 12.4环境深度定制。本镜像不仅提供高性能的视频生成…...

编程新知 2026/3/27 14:28:28

避免Java Stream重复消费：高效过滤Map的策略

本文旨在解决Java Stream在多过滤场景中常见的IllegalStatexception&#xff0c;即流被重复消耗的问题。我们将深入讨论Java Stream的单次使用特性&#xff0c;通过将外部过滤条件转换为集合&#xff0c;优化Map的过滤操作&#xff0c;提供高效、符合最佳实践的解决方案&#x…...

编程新知 2026/3/27 14:09:36

Pixel Fashion Atelier实战教程：从零构建像素时装生成API服务

Pixel Fashion Atelier实战教程&#xff1a;从零构建像素时装生成API服务 1. 项目介绍与核心价值 Pixel Fashion Atelier&#xff08;像素时装锻造坊&#xff09;是一款专为时尚设计师和像素艺术爱好者打造的AI图像生成工具。它基于Stable Diffusion和Anything-v5模型&#x…...

编程新知 2026/3/27 13:19:05