input上传图片，获取图片上传尺寸

2020-01-04 08:14:56

并没有直接的办法获取图片上传尺寸，需要对图片进行加载等处理

我觉得还可以改变一下逻辑，可以都预览，等提交等时候检测一下大小，不让提交通过不就完了。

我的原理就是和上传预览差不多，简单说下:

  1. onchange触发，获取当前file对象(这里可以获取图片的大小、类型、修改时间等)

  2. reader去读取文件

  3. 塞到页面，获取图片的宽高

  4. 移出图片节点

代码，见以下：

<input type="file" onchange="getImgInfo(this,getImgInfoCb)"/>
function getImgInfo(ev,fnCallBack){        var oFile=ev.files[0];        var reader=new FileReader();

        reader.onload=function(){            // 也可以用 window.URL.createObjectURL(this.result)
            var oImg=new Image();
            oImg.src=this.result;            document.body.appendChild(oImg);
            
            oImg.onload=function(){                var imgWidth=oImg.offsetWidth;                var imgHeight=oImg.offsetWidth;
                fnCallBack && fnCallBack({                    width:imgWidth,                    height:imgHeight
                })                document.body.removeChild(oImg);
            };
        };
        reader.readAsDataURL(oFile);
    }    function getImgInfoCb(json){        console.log(`width:${json.width} , height:${json.height}`);
    }
 赞
 已采纳


  • 精彩推荐

  • 2019-02-12 16:36:23

    图片工具GraphicsMagick的安装配置与基本使用

    GraphicsMagick是一个短小精悍的的图片处理工具和库集合。对于Java开发者来说，常用的图片处理工具有3个，JDK自带的图片处理库，ImageMagick，GraphicsMagick。JDK自带的图片处理库，虽稳定简单，性能却比较差；ImageMagick是目前最流行的图片处理工具，它的功能非常丰富；GraphicsMagick的功能略逊于ImageMagick，但是它的效率更强悍，但大多数情况下，GM的功能已经足够使用了。

  • 2019-02-15 10:35:31

    使用ffmpeg转码m3u8并播放

    m3u8是苹果公司开发的一项新型播放格式，这种播放格式支持目前市面的windows、androis、ios设备主流的浏览器，同样的视频文件既可以在flash环境播放，又能在无flash的html5环境播放，它的优势还不止于此，它可以实现多种码率在不同网速下的自动切换，网速好自动切换高清晰度视频，网速慢自动播放低清晰度文件，还可以实现流加密（视频文件本身加密）、分段下载播放、任意时间点拖拽播放、随机视频文件广告插入等等优势，所以公司打算是用m3u8格式作为视频格式。 --------------------- 作者：悠闲咖啡007 来源：CSDN 原文：https://blog.csdn.net/psh18513234633/article/details/79312607 版权声明：本文为博主原创文章，转载请附上博文链接！

  • 2019-02-15 10:36:45

    将MP4转成m3u8

    网上很多垃圾文章推荐segmenter工具，但用的时候，3.5G的ts文件丢了一半的数据，于是想到了ffmpeg转。

  • 2019-02-19 10:01:55

    node下使用open模块在指定浏览器下打开url

    最近在做一个项目的过程中，得到一个远程二维码图片的url，需要扫码登录，每次都是在控制台发url打印出来，再复制粘贴到浏览器的地址栏中打开扫码，整个过程过于繁琐，于是想找一个模块，直接在node下，指定浏览器打开该图片。这样可以省不少事。