js上传图片获取图片尺寸

下面这段代码，可以实现本地上传图片，并获取图片的尺寸

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><input type="file" id="file" /><img src="" alt="" id="image-preview" /><script>let fileInput = document.getElementById("file");let preview = document.getElementById("image-preview");fileInput.addEventListener("change", () => {let file = fileInput.files[0];let reader = new FileReader();reader.readAsDataURL(file);reader.onload = (e) => {let data = e.target.result;preview.src = data;let image = new Image();image.src = data;image.onload = function () {console.log(image.width, image.height);};};});</script></body>
</html>

js上传图片获取图片尺寸相关推荐

5分钟学会js上传图片校验图片格式、大小、尺寸宽高
js上传图片校验图片格式.大小.尺寸宽高一.前言 js上传图片校验图片格式.大小.尺寸宽高. 在此记录下,分享给大家. 二.代码 <input type=" ...
php 验证网络图片尺寸,通过url获取图片尺寸的几种方法：JS和php
首先是js的方法,通过new一个Image对象,设置src属性,并监听complete和onload事件,图片加载完成后输出图片的宽度和高度 function checkPicurl(url){ va ...
图片加尺寸php代码,php获取图片尺寸(宽度,高度)_php
本篇文章主要说明php获取图片尺寸(宽度,高度)的函数,即getimagesize()函数. 语法:array getimagesize( string filename [, array & ...
JS快速获取图片宽高的方法
JS快速获取图片宽高的方法快速获取图片的宽高其实是为了预先做好排版样式布局做准备,通过快速获取图片宽高的方法比onload方法要节省很多时间,甚至一分钟以上都有可能,并且这种方法适用主流浏览器包括I ...
imagereader java_java中ImageReader和BufferedImage获取图片尺寸实例
ImageReader 对象通常由特定格式的服务提供者接口 (SPI) 类实例化.服务提供者类(例如 ImageReaderSpi 的实例)向 IIORegistry 注册,后者使用前者进行格式识别和 ...
php 获得图片大小,php获取图片尺寸(宽度,高度)
本篇文章主要说明PHP获取图片尺寸(宽度,高度)的函数,即getimagesize()函数. 语法:array getimagesize( string filename [, array & ...
饿了么el-upload上传图片限制图片尺寸、大小、格式
饿了么中的Upload组件已经提供了限制用户上传的图片格式和大小的例子(https://element.eleme.io/#/zh-CN/component/upload),在此又新加图片的尺寸 &l ...
php 获取图片的宽高,JS怎么获取图片当前宽高
JS获取图片当前的宽高,我们可以使用JavaScript clientWidth和clientHeight属性来实现获取.clientWidth.clientHeight属性表示获取图像的当前宽度和高 ...
Android 获取图片尺寸大小的方法
一.获取图片大小有两张情况代码如下: package com.jhq.picdemo;import android.Manifest; import android.content.pm.Packag ...

js上传图片获取图片尺寸

js上传图片获取图片尺寸相关推荐

最新文章

热门文章