首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

js 获取上传图片的宽高

在JavaScript中获取上传图片的宽度和高度,可以通过多种方式实现。以下是一些常见的方法:

方法一:使用FileReader读取图片文件

代码语言:txt
复制
document.getElementById('fileInput').addEventListener('change', function(event) {
    var file = event.target.files[0];
    if (file) {
        var reader = new FileReader();
        reader.onload = function(e) {
            var img = new Image();
            img.onload = function() {
                console.log('宽度: ' + this.width);
                console.log('高度: ' + this.height);
            };
            img.src = e.target.result;
        };
        reader.readAsDataURL(file);
    }
});

在这个例子中,我们监听文件输入框的change事件,当用户选择图片后,使用FileReader读取图片文件,然后创建一个新的Image对象,并设置其src属性为读取到的图片数据URL。当图片加载完成后,可以通过img.widthimg.height属性获取图片的宽度和高度。

方法二:使用URL.createObjectURL

代码语言:txt
复制
document.getElementById('fileInput').addEventListener('change', function(event) {
    var file = event.target.files[0];
    if (file) {
        var imgURL = URL.createObjectURL(file);
        var img = new Image();
        img.onload = function() {
            console.log('宽度: ' + this.width);
            console.log('高度: ' + this.height);
            URL.revokeObjectURL(imgURL); // 释放内存
        };
        img.src = imgURL;
    }
});

这种方法与方法一类似,但使用了URL.createObjectURL来创建一个指向文件的临时URL,这样可以避免将整个文件读取到内存中。

方法三:使用Canvas

代码语言:txt
复制
document.getElementById('fileInput').addEventListener('change', function(event) {
    var file = event.target.files[0];
    if (file) {
        var reader = new FileReader();
        reader.onload = function(e) {
            var img = new Image();
            img.onload = function() {
                var canvas = document.createElement('canvas');
                canvas.width = this.width;
                canvas.height = this.height;
                var ctx = canvas.getContext('2d');
                ctx.drawImage(this, 0, 0);
                // 如果需要,可以从canvas获取图片数据
                URL.revokeObjectURL(img.src); // 释放内存
            };
            img.src = e.target.result;
        };
        reader.readAsDataURL(file);
    }
});

这种方法通过将图片绘制到canvas元素上,然后可以直接从canvas的宽度和高度属性中获取图片尺寸。

注意事项

  • 在处理大图片时,应该注意内存使用情况,及时释放不再需要的对象URL。
  • 如果图片加载失败(例如文件不是有效的图片格式),应该有错误处理机制。
  • 在实际应用中,可能需要对图片进行压缩或者调整尺寸以适应不同的展示需求。

以上方法适用于现代浏览器,对于旧版浏览器可能需要适当的兼容性处理。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • JS获取图片原始宽高

    最近在给博客的相册模块做优化,需要知道图片的原始大小,我以前的做法是把图片的真实宽高分别放在data-width和data-height中,效果是达到了,但是总觉得扩展性很低,当不知道图片的大小时,还要一张一张图片的去查看图片信息手动输入图片大小...,很繁琐 获取图片大小: 1.使用innerWidth,innerHeight 使用HTMLImageElement.innerWidth 是可以拿到图片的宽度 但是需要注意的是这里拿到的宽度是图像在CSS...像素中渲染的宽度 也就是说如果图片原始大小1200,使用css或者width属性设置为600,那么这里拿到的宽度为600,显然用innerWidth获取图片原始尺寸是不靠谱的 2.使用document.createElement...document.createElement("img") img.src = "1.jpg" var width = img.width 动态创建一个imgElement,通过给src赋值,最终来获取...img的宽和高 需要注意的是在给img的src赋值时,这是一个异步过程,会存在获取img的宽度时值为0(图片还未加载完成),可以在给img赋值之前加上onload事件 var img = document.createElement

    6.4K20

    js图片监听onload事件,依然有获取不到宽高的场景

    背景 在实际开发中,移动端页面遇到的,采用正常写法,图片 src赋值写在 onload 事件监听 后面,依然会有拿不到 图片真实宽高的场景,获得的图片宽高都为0,真的是好坑啊。...img = new Image() // 加载完成执行 img.onload = function(){ console.log(img.width,img.height) } // 改变图片的...为了避免图片加载失败或不存在等长场景导致定时器一直执行,可以加一个兜底,比如10秒钟之后自动清除定时器。...var img = new Image() // 改变图片的src img.src = img_url // 定时执行获取宽高 var check = function(){ // 只要任何一方大于...0 // 表示已经服务器已经返回宽高 if (img.width>0 || img.height>0) { clearInterval(set); } } var

    4K20

    js获取各种距离和宽高

    浏览器滚动掉的Y距离 鼠标event事件 属性 说明 offsetX 以当前的元素的左上角为原点, 距离元素顶部的距离 offsetY 以当前的元素的左上角为原点, 距离元素左侧的距离 clientX..., 距离页面顶部的距离, 随页面滚动而改变 pageY 以整个页面的左上角为原点, 距离页面左侧的距离, 随页面滚动而改变 screenX 以计算机显示屏屏幕左上角为原点, 距离屏幕顶部的距离 screenY...以计算机显示屏屏幕左上角为原点, 距离屏幕左侧的距离 元素的宽高及各种距离 宽高 属性 说明 clientHeight/clientWidth 包括元素的可视部分的高度/宽度包括width/height...'px', 为字符串类型) 距离 属性 说明 offsetTop/Left 元素距离最近的带有定位(fixed/relative/absolute)的父元素的顶部/左侧的距离 scrollTop/Left...此属性可以获取或者设置对象的最顶部到对象在当前窗口显示的范围内的顶边/左侧的距离,也就是元素滚动条被向下/向右拉动的距离。

    23710

    javascript 快速获取图片实际大小的宽高

    javascript 快速获取图片实际大小的宽高 简陋的获取图片实际宽高的方式 // 图片地址 var img_url = '13643608813441.jpg' // 创建对象 var img =...宽高都是0的这个结果很正常,因为图片的相关数据都没有被加载前它的宽高默认就是0,我们需要它加载完所有的相关数据再获取宽和高。...通过onload就能获取到图片的宽高了。但onload大一点的图通常都比较慢,不实用,但只要图片被浏览器缓存,那么图片加载几乎就不用等待即可触发onload,我们要的是占位符。...从缓存里读取图片的宽高不用说,非常方便快捷,今天我们要解决的是没有缓存而又快速的相比onload更快的方式去获取图片的宽高。...这是一张2560 * 1600大小的图片,各浏览器执行结果都能看到通过快速获取图片大小的方法几乎都在200毫秒以内,而onload至少五秒以上,这差别之大说明快速获取图片宽高非常实用。

    5.6K10

    php getimagesize 获取图片宽高以及后缀

    获取文件宽高在 PHP 中有一个简单函数 getimagesize。只需要传递文件名即可。...索引 1 给出的是图像高度的像素值 索引 2 给出的是图像的类型,返回的是数字,其中1 = GIF,2 = JPG,3 = PNG,4 = SWF,5 = PSD,6 = BMP,7 = TIFF(intel...,可以直接用于 HTML 的 标签 索引 bits 给出的是图像的每种颜色的位数,二进制格式 索引 channels 给出的是图像的通道值,RGB 图像默认是 3 索引 mime 给出的是图像的...MIME 信息,此信息可以用来在 HTTP Content-type 头信息中发送正确的信息,如: header("Content-type: image/jpeg"); 可见返回内容为数组,我们获取数组下标即可...php $width = $image_arr[0]; $height = $image_arr[1]; $type = $image_arr[6]; 另外、我们也可以使用 list 来获取数据.

    1.9K20

    js获取屏幕以及元素宽高的方法

    一.window相关 网页正文部分上:window.screenTop 网页正文部分左:window.screenLeft 屏幕分辨率的高:window.screen.height 屏幕分辨率的宽:...document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWidth (包括边线的宽...) 网页可见区域高:document.body.offsetHeight (包括边线的宽) 网页正文全文宽:document.body.scrollWidth 网页正文全文高:document.body.scrollHeight...网页被卷去的高:document.body.scrollTop 网页被卷去的左:document.body.scrollLeft 三.滚动相关 scrollHeight: 获取对象的滚动高度。...相对容器的水平坐标 event.offsetY 相对容器的垂直坐标 六.width/clientWidth/offsetWidth以及height之间区别 width是指可见内容的宽 height是指可见内容的高

    6.9K20

    ElementUI——el-upload上传前校验图片宽高

    前言 总要写点东西吧,最近忙于项目,github上的问题也没处理,博客也没咋写,自媒体上的东西也没咋发,随手记录一下当前项目改造时候遇到的问题吧; upload: https://element.eleme.cn.../#/zh-CN/component/upload 内容 before-upload 借助于:before-upload来进行校验,使用FileReader和Image来获取图片宽高,为了让代码更通用...,我们可以进行以下的封装; getImageSize(file) { return new Promise((resolve, reject) => { const reader...Promise.reject() } }) }, } } Tips 为了回显一般都会增加file-list,不过这个会导致上传时前后部分数据不一致...,触发闪动,所以这里直接把相应的css效果干掉 :deep(.el-upload-list__item.is-ready) { display: none; }

    23510

    js 获取屏幕各种宽高的方法(浏览器兼容)

    屏幕的有效宽高: window.screen.availHeight window.screen.availWidth 网页可见区域宽:document.body.clientWidth  网页可见区域高...:document.body.clientHeight  网页可见区域宽:document.body.offsetWidth (包括边线的宽)  网页可见区域高:document.body.offsetHeight...(包括边线的宽)  网页正文全文宽:document.body.scrollWidth  网页正文全文高:document.body.scrollHeight  网页被卷去的高:document.body.scrollTop...scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离  scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离  scrollWidth:获取对象的滚动宽度...  offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度  offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置

    3.6K100

    iOS获取屏幕宽高、设备型号、系统版本信息介绍1、获取屏幕的宽高2、获取设备的型号3、获取系统版本

    之前也研究过,这里把我的方法记录下来,本文介绍三个常用的设备信息获取方式: 获取屏幕的宽高。用于在设置控件位置的时候计算相对屏幕的距离 获取设备的型号。...1、获取屏幕的宽高 屏幕的宽高是一个常常需要用到的信息,尤其是当你用代码写UI时。比如当你写一个UILabel,设置其frame时,你想要它居中,而你想为其设置的宽度为200,那怎么设置它的x值呢?...获取屏幕宽、高的方法如下: // 设备宽度 [UIScreen mainScreen].bounds.size.width // 设备高度 [UIScreen mainScreen]....bounds.size.height 一般来说我们在pch文件里将其设置为宏,这样在每个地方就都可以调用了,就不用每次都用这么长一串代码: //设备的宽高 #define SCREENWIDTH...2、获取设备的型号 获取设备型号有几种方法,这里我使用的是比较笨的方法,获取设备的分辨率来判断设备的型号。

    2.6K40
    领券