简单写一下图片上传获取宽高的方法

最近,我负责的后台系统有一个图片上传校验图片比例的需求,以前没有做过这种需求,便查了一些资料总结了一下图片上传获取宽高的方法。
想要获取图片的宽高首先要知道图片的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方法执行效率会快一些;

原文地址:https://www.cnblogs.com/PrayLs/p/10988232.html

时间: 2024-10-04 18:54:33

简单写一下图片上传获取宽高的方法的相关文章

Android Bitmap在不加载图片的前提获取宽高

代码参考: /** * 根据View(主要是ImageView)的宽和高来获取图片的缩略图 * @param path * @param viewWidth * @param viewHeight * @return */ private Bitmap decodeThumbBitmapForFile(String path, int viewWidth, int viewHeight){ BitmapFactory.Options options = new BitmapFactory.Opt

图片上传获取名字

@Override public ResultResponse<String> uploadImg(MultipartFile file) { String imgUrl = null; try { //MultipartFile类中两个方法区别://getName : 获取表单中文件组件的名字//getOriginalFilename : 获取上传文件的原名 String name = file.getOriginalFilename(); String substring = name.s

图片上传存储获得外链方法

我们在用markdown写一些博客或者文章的时候,常常需要引用一些图片,一般都是找一个免费的图床上传,然后复制图片链接在我们的markdown文章中.类似像这样: 存在的隐患 一般的免费图片托管网站有很大的可能在某一天停止运营,或者网站被攻击等等,而且一般会有一个存储时间,超过了时间你上传的图片就会挂掉.类似这样: 其实这也是一些时间比较久的文章图片挂掉原因,这是博主之前用的一个免费图床被攻击后导致链接挂掉. 解决方法 我们可以采用阿里云给我们提供的OSS对象存储来存放我们的图片,这样直到阿里倒

JavaScript常用获取宽高的方法

知识点: document.documentElement.scrollTop(滚动条顶端位置,支持ie.ff) document.body.scrollTop(滚动条顶端位置,支持chrome) document.documentElement.clientWidth(浏览器视口宽度) document.documentElement.clientHeight(浏览器视口高度) document.body.clientWidth(浏览器视口宽度) document.body.clientHei

UEditor之实现配置简单的图片上传示例

开心一笑 下班后,阿华到楼下小超市买毛巾,刚买完出来,就遇到同一办公楼里另一家公司的阿菲,之前与她远远的有过几次眼神交流,但从没说过话,"买毛巾啊",看着阿华手里的毛巾,阿菲先开口了. 阿华回到:"是啊,这里的老板眼神太好了,我不敢偷,就只有买了." 阿菲一下就哈哈笑了,配合到:"哇,原来你是小偷." 阿华:"嘘,小声点,其实主要原因是--"阿华指着自己的脑袋接着说到:"你看,我是个有头有脸的人,所以还是要用用毛巾的

UEditor之实现配置简单的图片上传示例 (转)

http://blog.csdn.net/huangwenyi1010/article/details/51637427#comments 1.首先你可以到官网Ueditor,查看很详细的文档,包括如何安装到Eclipse,相关jar包和如何使用Ueditor,本文主要介绍如何实现单图片上传和利用自己的接口: 运行tomcat上,在google浏览器运行(Test是我的项目名称): http://localhost:8081/Test/jsp/config.json 出现一串长长的json的字符

angularJS+Ionic移动端图片上传的解决办法

前端开发中经常会碰到图片上传的问题,网上的解决办法很多,可是有些图片上传的插件会有一些附属的插件,因此因为一个图片上传的问题可能额需要引入其他插件到项目中,久而久之项目会不伦不类,有时候插件之间也会有一些冲突,所以我们可以自己写一个图片上传的方法. 今天的demo是帮朋友做的一个移动端微信公众号项目,项目架构采用angular+ionic,因为对dom的操作jQuery会方便很多,但是jQuery比较厚重,所以最后选择用轻量级的zepto来对项目dom进行操作. 项目中有一个需求是上传个人作品,

UEditor之图片上传如何和真实项目结合

1.首先,我们定义一个名为GetConfigServlet的Servlet,真实项目应该是一个Controller,一样的,这个类就是加载后端配置文件类 package com.ay.servlet; import java.io.IOException; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet;

Java往事之《百度UEditor插件配置图片上传问题》

百度UEditor插件配置图片上传问题 前言:之前第一次用到UEditor插件的时候,一脸懵逼!没错就是一脸懵逼,去UEditor插件官网下载了一个开发版的.然后对于新鲜技术好奇,本人就迫不及待的把它copy到了我的项目里,运行之后发现鼠标点到输入框里面的时候,什么鬼啊,握了棵草!上传图片的插件置灰了如下图1,一看还有一个多图片上传的插件还在,就赶紧点了一下,点开的那一瞬间我吃了一鲸,如下图2! 图1 图2 很好!下面看一下如何解决这个问题. 1.首先你可以到官网Ueditor,查看很详细的文档