zoukankan      html  css  js  c++  java
  • 简单写一下图片上传获取宽高的方法

    最近,我负责的后台系统有一个图片上传校验图片比例的需求,以前没有做过这种需求,便查了一些资料总结了一下图片上传获取宽高的方法。
    想要获取图片的宽高首先要知道图片的url;一般图片上传UI组件或自己封装的组件都会获取到图片的url,知道url就好办了,上代码。

    var img_url = URL;//图片URL地址
    var imgObj = new Image();//创建对象
    imgObj.src = img_url;//改变图片地址
    console.log(imgObj.width + "" + imgObj.height)

    what?为啥输出是00;其实我也遇到过这个问题;原因是在输出之前图片还没有加载完,只要在图片加载完后就可以获取到了;

    var img_url = URL;//图片URL地址
    var imgObj = new Image();//创建对象
    imgObj.src = img_url;//改变图片地址
    imgObj.onload = function(){
        console.log(imgObj.width + "" + imgObj.height)
    }

    好了,这下就可以输出图片的宽高了;用这种方法效率不是很高,也可以用计时器循环检测来实现,只要图片宽和高任意一项大于0,就可获取到图片的宽和高;

    // 记录当前时间戳
    var start_time = new Date().getTime()
    // 图片地址 后面加时间戳是为了避免缓存
    var img_url = 'url'+start_time
    // 创建对象
    var imgObj = new Image()
    // 改变图片的src
    imgObj.src = img_url
    // 定时执行获取宽高
    var check = function(){
     // 只要任何一方大于0
     // 表示已经服务器已经返回宽高
        if (imgObj.width>0 || imgObj.height>0) {
            var diff = new Date().getTime() - start_time;
            console.log(imgObj.width + "" + imgObj.height)
            clearInterval(set);
        }
    }
    var set = setInterval(check,40)

    这种方法比onload方法执行效率会快一些;

  • 相关阅读:
    剑指offer-重建二叉树
    Java集合学习-总体框架
    leetcode-6-ZigZag Conversion
    海拔高度与大气密度的关系函数
    C++ 获取文件夹下的所有文件名
    01-复杂度1. 最大子列和问题
    00-自测5. Shuffling Machine
    00-自测4. Have Fun with Numbers
    00-自测3. 数组元素循环右移问题
    00-自测2. 素数对猜想
  • 原文地址:https://www.cnblogs.com/PrayLs/p/10988232.html
Copyright © 2011-2022 走看看