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

javascript：检测图片的宽高

news 2026/4/11 0:18:24

1 方案描述

JavaScript提供了非常方便的FileReader和Image对象，可以帮助我们轻松实现这个功能。具体步骤如下：

  • 获取文件输入框：首先，我们需要获取到用户选择的文件。
  • 读取文件内容：然后，通过FileReader对象读取文件内容。
  • 创建图片对象：接下来，用Image对象加载读取到的文件。
  • 检测图片尺寸：最后，通过Image对象获取图片的宽度和高度，并进行判断。

2 代码示例

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script>window.onload = function() {const fileUpload = document.querySelector('input[type="file"]');const reader = new FileReader();fileUpload.addEventListener('change', () => {reader.readAsDataURL(fileUpload.files[0]);reader.onload = (e) => {const image = new Image();image.src = e.target.result;image.onload = () => {const { height, width } = image;if (height > 100 || width > 100) {alert("上传的图片尺寸为宽："+width+"，高："+height+"，过大，请选择100x100像素以内的图片。");} else {alert("图片上传成功！");}};};});}</script></head><body><input type="file" id="fileInput" name="file" multiple="multiple" accept="image/*"></body>
</html>

（1）首先获取文件输入框：

document.querySelector('input[type="file"]')

选择了页面上的文件输入框。

（2）创建FileReader实例：

const reader = new FileReader();

通过new FileReader()创建了一个FileReader对象。

（3）添加事件监听器：

fileUpload.addEventListener('change', () => { ... })

监听文件输入框的变化事件，当用户选择文件时触发。

（4）读取文件内容：

reader.readAsDataURL(fileUpload.files[0])

读取用户选择的文件，并转换为Data URL格式。

（5）创建Image对象：

						const image = new Image();image.src = e.target.result;

在FileReader读取完成后，通过new Image()创建一个图片对象，并将其src属性设置为读取到的文件内容。

（6）检测图片尺寸：

						image.onload = () => {const { height, width } = image;if (height > 100 || width > 100) {alert("上传的图片尺寸为宽："+width+"，高："+height+"，过大，请选择100x100像素以内的图片。");} else {alert("图片上传成功！");}};

当图片加载完成后，通过image.onload事件获取图片的宽度和高度，并进行尺寸判断。

结果如下：

相关文章：

javascript：检测图片的宽高

1 方案描述 JavaScript提供了非常方便的FileReader和Image对象&#xff0c;可以帮助我们轻松实现这个功能。具体步骤如下&#xff1a; 获取文件输入框&#xff1a;首先&#xff0c;我们需要获取到用户选择的文件。读取文件内容&#xff1a;然后&#xff0c;通过FileReader对象…...

编程日记 2024/8/7 0:34:17

机械学习—零基础学习日志（高数23——无穷小运算）

零基础为了学人工智能&#xff0c;真的开始复习高数 这段时间&#xff0c;把张宇老师讲解考研的第一部分基本全部学习完毕了。 这里把第一部分的内容最后汇总一下。 无穷小运算——吸收律 这里展示一些无穷小的具体计算思路 无穷小运算——计算方法 泰勒展开的原则 夹逼准则…...

编程日记 2024/8/7 0:33:14

一个网络上计算机的通信

一台计算机上多个进程间的通信方式有&#xff1a;管道、共享内存、信号量、消息队列。如果不同的计算机上多个进程间通信&#xff0c;即通信的进程在不同的计算机上&#xff0c;需要用到网络相关的知识。 那么两台计算机通信需要解决哪些问题&#xff1f; 我们来回顾一下计算机…...

编程日记 2024/8/7 0:32:13

C语言基础题：吃冰棍（C语言版）

1.题目描述 机器猫喜欢吃冰棍。 买一根冰棍&#xff0c;吃完了会剩一个木棒;每三个木棒可以兑换一个冰棍。兑换出来的冰棍&#xff0c;吃完之后也能剩下一个木棒。 所以&#xff0c;如果机器猫买了5根冰棍&#xff0c;他可以吃完之后得到5个木棒;拿3个木棒兑换1根冰棍&#xff…...

编程日记 2024/8/7 0:31:12

C++中，vector、deque、list、set、multiset、unordered_set和unordered_multiset容器类的总结

最近用set比较多&#xff0c;复习一下基础。 在C中&#xff0c;vector、deque、list、set、multiset、unordered_set和unordered_multiset都是容器类&#xff0c;但它们有不同的特点和用途。下面是对它们的区别和示例说明&#xff1a; 1. vector 特点: 动态数组&#xff0c;…...

编程日记 2024/8/7 0:30:11

Python处理Redis

操作Redis redis也是基于tcp通信的&#xff0c;所以我们可以直接通过socket来做 Redis通信过程 简单使用 redis-cli.exe -h192.168.56.188 auth 123456 set name myredis get name lindex students 0 # 查看students列的第一条数据核心协议体 *2 # 表示下述的指令由2个字符…...

编程日记 2024/8/7 0:28:09

nodejs多版本随心切换-windows

nodejs多版本控制 1. 安装 nvm github下载地址 不需要卸载已安装的nodejs&#xff0c;安装时会让你选择nodejs的位置&#xff0c;可修改为你已经安装的路径&#xff0c;会自动搜索已安装版本&#xff0c;并进行弹窗询问&#xff0c;选择托管即可 2. 修改配置文件 在 nvm 安装…...

编程日记 2024/8/7 0:24:05

json文件格式

json文件格式 格式介绍1格式介绍2格式3 格式介绍1 格式介绍2 格式3 参考地址...

编程日记 2024/8/7 0:22:03

日撸Java三百行（day15：栈的应用之括号匹配）

目录 一、栈的括号匹配 二、代码实现 1.方法创建 2.数据测试 3.完整的程序代码 总结 一、栈的括号匹配 要完成今天的任务&#xff0c;需要先来了解一下什么是栈的括号匹配。首先&#xff0c;顾名思义&#xff0c;括号匹配就是指将一对括号匹配起来&#xff0c;我们给定一…...

编程日记 2024/8/7 0:21:02

Oracle-OracleConnector

提示&#xff1a;OracleConnector 类是 Debezium 中用于与 Oracle 数据库交互的一个连接器组件 文章目录 前言一、核心功能二、代码分析总结 前言 提示&#xff1a;OracleConnector 类负责配置、启动、管理和验证与 Oracle 数据库的连接&#xff0c;并为后续的数据捕获任务准备…...

编程日记 2024/8/7 0:20:01

『 Linux 』线程池与 POSIX 线程的封装编码实现

文章目录 线程池概念线程池的编码实现线程池的测试参考代码 线程的封装使用测试封装后的线程参考代码 线程池概念 池化技术是一种资源管理方法,通过预先创建和管理一组资源以便在需要使用时快速分配这些资源; 线程池是池化技术的一种典型应用; 资源分配 在线程池中预先创建一定…...

编程日记 2024/8/7 0:19:00

【C++】————哈希表

作者主页&#xff1a; 作者主页 本篇博客专栏&#xff1a;C 创作时间 &#xff1a;2024年8月6日 前言&#xff1a; 在计算机科学的广袤世界中&#xff0c;数据结构犹如基石&#xff0c;支撑着各种高效算法的构建与运行。而哈希表&#xff08;Hash Table&#xff09;&#…...

编程日记 2024/8/7 0:17:59

前端学习AI历程

AI基本概念tensorflow入门conda搭建环境&#xff0c;pycham使用训练自己的第一个模型AI目前前端方便入手的几个方向 素材图片库图像识别&#xff0c;在线学习低代码应用智能客服 获取数据集 roboflowkagglecocomakesense&#xff08;用于打标&#xff09; 认识yolo两个简单小应…...

编程日记 2024/8/7 0:16:58

常见中间件漏洞复现之【Tomcat】！

Tomcat介绍 tomcat是⼀个开源⽽且免费的jsp服务器&#xff0c;默认端⼝ : 8080&#xff0c;属于轻量级应⽤服务器。它可以实现 JavaWeb程序的装载&#xff0c;是配置JSP&#xff08;Java Server Page&#xff09;和JAVA系统必备的⼀款环境。 在历史上也披露出来了很多的漏洞 …...

编程日记 2024/8/7 0:15:57

C++并发编程(一)：线程基础

简介 本文学习的是 b 站 up 恋恋风辰的并发编程教学视频做的一些笔记补充。 教程视频链接如下&#xff1a;线程基础&#xff1a;视频教程 文档链接如下&#xff1a;线程基础&#xff1a;笔记文档 理论上直接看 up 提供的笔记文档即可&#xff0c;我这里主要是记录一些我自己…...

编程日记 2024/8/7 0:14:56

enq: HW - contention事件来啦

业务系统反应数据库慢&#xff0c;根据时间查看awr报告。 先看一眼事件名称 HW enqueue 用于序列化超出段高水位线的空间分配。如果同时向对象添加大量数据&#xff0c;则多个进程可能同时尝试在高水位线上方分配空间&#xff0c;从而导致争用。 既然是控制资源并发的enq&…...

编程日记 2024/8/7 0:11:52

MyBatis补充

控制类和dao层接口以及mapper中的xml是怎样的关联的&#xff1f; 在Mybatis中&#xff0c;控制类和dao层接口是通过mapper的xml文件进行连接的。 控制类调用dao层接口中的方法&#xff0c;通过接口实现进行访问数据库操作。dao层接口定义数据库操作的方法&#xff0c;提供给控制…...

编程日记 2024/8/7 0:10:51

系统架构师(每日一练16)

每日一练 答案与解析 1.软件测试一般分为两个大类:动态测试和静态测试。前者通过运行程序发现错误&#xff0c;包括()等方法;后者采用人工和计算机辅助静态分析的手段对程序进行检测&#xff0c;包括()等方法。答案与解析 问题1 A.边界值分析、逻辑覆盖、基本路径 B.桌面检查、…...

编程日记 2024/8/7 0:08:49

实践致知第17享：电脑忽然黑屏的常见原因及处理方法

一、背景需求 小姑电话说&#xff1a;最近&#xff0c;电脑忽然就黑屏了&#xff08;如下图所示&#xff09;&#xff0c;但是等待几十秒甚至一分钟&#xff0c;电脑就能自然恢复了&#xff0c;这种状况一天能出现三四次&#xff0c;怎么办&#xff1f; 二、分析诊断 电脑黑屏…...

编程日记 2024/8/7 0:07:48

微信小程序--实现地图定位---获取经纬度

(1) (2) (3) html: <view class"titleTwo" style"border: none;"><view class"fontSize30 invoiceTile">企业地址</view><view class"invoiceRight" bind:tap"tapChooseAddress" data-maptype"…...

编程日记 2024/8/7 0:05:46

挂起、阻塞、锁和cpu占用

Thread.sleep() 和 Object.wait() 在 Java 多线程编程中&#xff0c;Thread.sleep() 和 Object.wait() 都能让线程暂停执行&#xff0c;但它们的目的机制和使用场景有本质区别。‌核心区别总结‌‌所属类不同‌sleep() 是 ‌Thread 类的静态方法‌&#xff0c;作用于当前线程。…...

编程新知 2026/4/10 23:34:15

网盘直链下载助手：八大平台一键获取真实下载地址的终极解决方案

网盘直链下载助手&#xff1a;八大平台一键获取真实下载地址的终极解决方案 【免费下载链接】Online-disk-direct-link-download-assistant 一个基于 JavaScript 的网盘文件下载地址获取工具。基于【网盘直链下载助手】修改 &#xff0c;支持 百度网盘 / 阿里云盘 / 中国移动云…...

编程新知 2026/4/10 21:01:43

从视频孪生到空间计算：镜像视界以AI重构三维感知新范式

一、时代拐点&#xff1a;视频孪生的结构性瓶颈与升级刚需1.1 行业拐点已至Gartner最新报告显示&#xff0c;数字孪生技术已全面进入生产力成熟期&#xff0c;但公安、港口、低空经济等核心场景的规模化落地&#xff0c;正遭遇结构性天花板——传统视频孪生本质上是“二维像素的…...

编程新知 2026/4/10 20:23:06

告别内存访问瓶颈：深入STM32H7的AXI总线矩阵，优化DMA与多核数据流

突破STM32H7性能极限&#xff1a;AXI总线矩阵与DMA调优实战指南 当你在开发基于STM32H7的高性能应用时&#xff0c;是否遇到过这样的困境&#xff1a;理论上400MHz的主频和双精度浮点单元应该轻松应对4K图像处理&#xff0c;但实际运行时却频频遭遇卡顿&#xff1f;摄像头采集的…...

编程新知 2026/4/10 17:48:25

从电影《黑客帝国》到社交网络：用Neo4j Browser亲手构建你的第一个‘人物关系图谱’

从《黑客帝国》到社交网络&#xff1a;用Neo4j构建你的第一个关系图谱 想象一下&#xff0c;如果《黑客帝国》中的尼奥能够用一张图看清所有角色之间的复杂关系&#xff0c;或者你的微信好友网络能以可视化的方式展现谁是你朋友圈的核心节点——这就是图数据库的魅力所在。Neo4…...

编程新知 2026/4/10 15:14:51

Ubuntu网络流量监控：nethogs与vnstat实战指南

1. 为什么需要监控Ubuntu网络流量&#xff1f; 作为一个长期使用Ubuntu的开发者&#xff0c;我经常遇到这样的困惑&#xff1a;明明没有下载大文件&#xff0c;为什么网速突然变慢了&#xff1f;服务器流量莫名其妙就超标了&#xff1f;这时候就需要专业的网络监控工具来帮忙了…...

编程新知 2026/4/10 15:14:51

从仿真到算法调参：深度优化你的Prescan红绿灯识别与刹车控制模型

深度优化Prescan红绿灯识别与刹车控制模型的五大进阶策略 在自动驾驶仿真领域&#xff0c;Prescan与Matlab/Simulink的组合已成为验证感知决策算法的黄金标准。但许多开发者在完成基础功能实现后&#xff0c;往往陷入模型性能瓶颈——光照变化导致误识别、刹车距离计算不精准、…...

编程新知 2026/4/10 14:52:06

Tensorflow离线安装全攻略：从whl下载到ARM架构适配（附资源链接）

TensorFlow离线安装全攻略&#xff1a;从whl下载到ARM架构适配 在边缘计算和嵌入式开发领域&#xff0c;离线环境下的TensorFlow部署一直是工程师们的痛点。想象一下&#xff0c;当你带着开发板深入工厂现场调试&#xff0c;或是需要在保密网络中进行AI模型部署时&#xff0c;…...

编程新知 2026/4/10 13:28:18

cve_2018_16509（ghostscript）漏洞复现报告

名称: vulfocus/ghostscript-cve_2018_16509:latest​描述: ​GhostScript 被许多图片处理库所使用&#xff0c;如 ImageMagick、Python PIL 等&#xff0c;默认情况下这些库会根据图片的内容将其分发给不同的处理方法&#xff0c;其中就包括 GhostScript。​在 9.24 之前的 Ar…...

编程新知 2026/4/10 13:20:06

Minecraft世界修复终极指南：使用Region Fixer拯救你的游戏存档

Minecraft世界修复终极指南&#xff1a;使用Region Fixer拯救你的游戏存档 【免费下载链接】Minecraft-Region-Fixer Python script to fix some of the problems of the Minecraft save files (region files, *.mca). 项目地址: https://gitcode.com/gh_mirrors/mi/Minecraf…...

编程新知 2026/4/10 12:41:47