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

javascript：检测图片的宽高

news 2025/7/3 4:04:37

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

渗透实战PortSwigger靶场-XSS Lab 14：大多数标签和属性被阻止

<script>标签被拦截 我们需要把全部可用的 tag 和 event 进行暴力破解 XSS cheat sheet&#xff1a; https://portswigger.net/web-security/cross-site-scripting/cheat-sheet 通过爆破发现body可以用 再把全部 events 放进去爆破 这些 event 全部可用 <body onres…...

编程新知 2025/7/2 15:14:42

Mac软件卸载指南，简单易懂！

刚和Adobe分手&#xff0c;它却总在Library里给你写"回忆录"&#xff1f;卸载的Final Cut Pro像电子幽灵般阴魂不散&#xff1f;总是会有残留文件&#xff0c;别慌&#xff01;这份Mac软件卸载指南&#xff0c;将用最硬核的方式教你"数字分手术"&#xff0…...

编程新知 2025/6/25 3:46:51

涂鸦T5AI手搓语音、emoji、otto机器人从入门到实战

“&#x1f916;手搓TuyaAI语音指令 &#x1f60d;秒变表情包大师&#xff0c;让萌系Otto机器人&#x1f525;玩出智能新花样&#xff01;开整&#xff01;” &#x1f916; Otto机器人 → 直接点明主体 手搓TuyaAI语音 → 强调 自主编程/自定义 语音控制&#xff08;TuyaAI…...

编程新知 2025/6/17 15:40:54

鸿蒙DevEco Studio HarmonyOS 5跑酷小游戏实现指南

1. 项目概述 本跑酷小游戏基于鸿蒙HarmonyOS 5开发&#xff0c;使用DevEco Studio作为开发工具&#xff0c;采用Java语言实现&#xff0c;包含角色控制、障碍物生成和分数计算系统。 2. 项目结构 /src/main/java/com/example/runner/├── MainAbilitySlice.java // 主界…...

编程新知 2025/6/21 22:57:04

A2A JS SDK 完整教程：快速入门指南

目录 什么是 A2A JS SDK?A2A JS 安装与设置A2A JS 核心概念创建你的第一个 A2A JS 代理A2A JS 服务端开发A2A JS 客户端使用A2A JS 高级特性A2A JS 最佳实践A2A JS 故障排除 什么是 A2A JS SDK? A2A JS SDK 是一个专为 JavaScript/TypeScript 开发者设计的强大库&#xff…...

编程新知 2025/6/18 3:11:41

【SSH疑难排查】轻松解决新版OpenSSH连接旧服务器的“no matching...“系列算法协商失败问题

【SSH疑难排查】轻松解决新版OpenSSH连接旧服务器的"no matching..."系列算法协商失败问题 摘要&#xff1a; 近期&#xff0c;在使用较新版本的OpenSSH客户端连接老旧SSH服务器时&#xff0c;会遇到 "no matching key exchange method found"​, "n…...

编程新知 2025/6/15 18:10:15

Git常用命令完全指南：从入门到精通

Git常用命令完全指南&#xff1a;从入门到精通 一、基础配置命令 1. 用户信息配置 # 设置全局用户名 git config --global user.name "你的名字"# 设置全局邮箱 git config --global user.email "你的邮箱example.com"# 查看所有配置 git config --list…...

编程新知 2025/6/21 11:16:32

【学习笔记】erase 删除顺序迭代器后迭代器失效的解决方案

目录 使用 erase 返回值继续迭代使用索引进行遍历 我们知道类似 vector 的顺序迭代器被删除后&#xff0c;迭代器会失效&#xff0c;因为顺序迭代器在内存中是连续存储的&#xff0c;元素删除后&#xff0c;后续元素会前移。 但一些场景中&#xff0c;我们又需要在执行删除操作…...

编程新知 2025/6/16 16:11:49

libfmt: 现代C++的格式化工具库介绍与酷炫功能

libfmt: 现代C的格式化工具库介绍与酷炫功能 libfmt 是一个开源的C格式化库&#xff0c;提供了高效、安全的文本格式化功能&#xff0c;是C20中引入的std::format的基础实现。它比传统的printf和iostream更安全、更灵活、性能更好。 基本介绍 主要特点 类型安全&#xff1a…...

编程新知 2025/6/13 5:38:47

Java求职者面试指南：Spring、Spring Boot、Spring MVC与MyBatis技术解析

Java求职者面试指南&#xff1a;Spring、Spring Boot、Spring MVC与MyBatis技术解析 一、第一轮基础概念问题 1. Spring框架的核心容器是什么&#xff1f;它的作用是什么&#xff1f; Spring框架的核心容器是IoC&#xff08;控制反转&#xff09;容器。它的主要作用是管理对…...

编程新知 2025/6/16 13:12:58