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

javascript：检测图片的宽高

news 2025/11/22 3:52:32

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

大数据学习栈记——Neo4j的安装与使用

本文介绍图数据库Neofj的安装与使用&#xff0c;操作系统&#xff1a;Ubuntu24.04&#xff0c;Neofj版本&#xff1a;2025.04.0。 Apt安装 Neofj可以进行官网安装&#xff1a;Neo4j Deployment Center - Graph Database & Analytics 我这里安装是添加软件源的方法 最新版…...

编程新知 2025/11/20 1:37:49

ubuntu搭建nfs服务centos挂载访问

在Ubuntu上设置NFS服务器 在Ubuntu上&#xff0c;你可以使用apt包管理器来安装NFS服务器。打开终端并运行&#xff1a; sudo apt update sudo apt install nfs-kernel-server创建共享目录 创建一个目录用于共享&#xff0c;例如/shared&#xff1a; sudo mkdir /shared sud…...

编程新知 2025/8/27 13:05:41

rknn优化教程（二）

文章目录 1. 前述2. 三方库的封装2.1 xrepo中的库2.2 xrepo之外的库2.2.1 opencv2.2.2 rknnrt2.2.3 spdlog 3. rknn_engine库 1. 前述 OK&#xff0c;开始写第二篇的内容了。这篇博客主要能写一下&#xff1a; 如何给一些三方库按照xmake方式进行封装&#xff0c;供调用如何按…...

编程新知 2025/6/11 15:25:30

VB.net复制Ntag213卡写入UID

本示例使用的发卡器&#xff1a;https://item.taobao.com/item.htm?ftt&id615391857885 一、读取旧Ntag卡的UID和数据 Private Sub Button15_Click(sender As Object, e As EventArgs) Handles Button15.Click轻松读卡技术支持:网站:Dim i, j As IntegerDim cardidhex, …...

编程新知 2025/11/21 22:32:42

Qt Widget类解析与代码注释

#include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this); }Widget::~Widget() {delete ui; }//解释这串代码&#xff0c;写上注释 当然可以&#xff01;这段代码是 Qt …...

编程新知 2025/11/1 0:38:44

JDK 17 新特性

#JDK 17 新特性 /**************** 文本块 *****************/ python/scala中早就支持&#xff0c;不稀奇 String json “”" { “name”: “Java”, “version”: 17 } “”"; /**************** Switch 语句 -> 表达式 *****************/ 挺好的&#xff…...

编程新知 2025/10/24 5:00:32

IoT/HCIP实验-3/LiteOS操作系统内核实验(任务、内存、信号量、CMSIS..)

文章目录 概述HelloWorld 工程C/C配置编译器主配置Makefile脚本烧录器主配置运行结果程序调用栈 任务管理实验实验结果osal 系统适配层osal_task_create 其他实验实验源码内存管理实验互斥锁实验信号量实验 CMISIS接口实验还是得JlINKCMSIS 简介LiteOS->CMSIS任务间消息交互…...

编程新知 2025/11/17 5:58:32

代码规范和架构【立芯理论一】（2025.06.08）

1、代码规范的目标 代码简洁精炼、美观&#xff0c;可持续性好高效率高复用&#xff0c;可移植性好高内聚&#xff0c;低耦合没有冗余规范性&#xff0c;代码有规可循&#xff0c;可以看出自己当时的思考过程特殊排版&#xff0c;特殊语法&#xff0c;特殊指令&#xff0c;必须…...

编程新知 2025/11/16 22:42:58

用鸿蒙HarmonyOS5实现中国象棋小游戏的过程

下面是一个基于鸿蒙OS (HarmonyOS) 的中国象棋小游戏的实现代码。这个实现使用Java语言和鸿蒙的Ability框架。 1. 项目结构 /src/main/java/com/example/chinesechess/├── MainAbilitySlice.java // 主界面逻辑├── ChessView.java // 游戏视图和逻辑├──…...

编程新知 2025/8/18 11:32:48

0x-3-Oracle 23 ai-sqlcl 25.1 集成安装-配置和优化

是不是受够了安装了oracle database之后sqlplus的简陋&#xff0c;无法删除无法上下翻页的苦恼。 可以安装readline和rlwrap插件的话&#xff0c;配置.bahs_profile后也能解决上下翻页这些&#xff0c;但是很多生产环境无法安装rpm包。 oracle提供了sqlcl免费许可&#xff0c…...

编程新知 2025/10/29 3:04:19