javascript：检测图片的宽高

不死鸟.亚历山大.狼崽子

于 2024-08-05 18:37:33 发布

阅读量182

点赞数 10

分类专栏： javascript 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/u013938578/article/details/140921103

版权

javascript 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

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事件获取图片的宽度和高度，并进行尺寸判断。

结果如下：

不死鸟.亚历山大.狼崽子

关注

10
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
javascript：检测图片的宽高

JavaScript提供了非常方便的FileReader和Image对象，可以帮助我们轻松实现这个功能。在FileReader读取完成后，通过new Image()创建一个图片对象，并将其src属性设置为读取到的文件内容。当图片加载完成后，通过image.onload事件获取图片的宽度和高度，并进行尺寸判断。通过new FileReader()创建了一个FileReader对象。读取用户选择的文件，并转换为Data URL格式。监听文件输入框的变化事件，当用户选择文件时触发。选择了页面上的文件输入框。
复制链接

扫一扫