-
2021-12-17 15:35:04
我们现在获取图片的宽高的时候会在图片初始化的时候获取到图片的宽高,图片加载之后图片宽高获取为0,html5有个新属性naturalWidth和naturalHeight可以获取到图片原始的宽度和高度。
var naturalWidth = document.getElementById('Image1').naturalWidth, naturalHeight = document.getElementById('Image1').naturalHeight; console.log(naturalWidth ); console.log(naturalHeight );
更多相关内容 -
获取图片宽度和高度的类,支持JPG,GIF,PNG,BMP
2021-01-20 07:49:06Class ImgWHInfo ”获取图片宽度和高度的类,支持JPG,GIF,PNG,BMP Dim ASO Private Sub Class_Initialize Set ASO=Server.CreateObject(“ADODB.Stream”) ASO.Mode=3 ASO.Type=1 ASO.Open End Sub Private Sub ... -
Javascript获取图片原始宽度和高度的方法详解
2020-10-21 12:12:08用实例代码讲述了JavaScript如何获取页面图片原始尺寸的方法,现在分享给大家供大家参考学习,有需要的可以一起来看看。 -
易语言获取指定图片的高度和宽度的方法
2020-08-26 19:16:16今天小编就为大家分享一篇关于易语言获取指定图片的高度和宽度的方法,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧 -
图片等比例缩放 动态的获取图片的高度和宽度 动态的设置图片的高度和宽度
2021-03-29 21:10:20或者通过image的bindload方法动态的获取图片的高度和宽度,动态的设置图片的高度和宽度,是图片布局的高度和宽度和原始图片的高度和宽度相等。 1.图片等比例缩放工具 //Util.js class Util{ /*** * 按照... -
获取图片宽度和高度的方法
2018-11-06 14:23:58零: //先由http访问,如果可以正常访问图片,再取宽度和高度 public static boolean isAskedByUrl(String urlStr){ try { URL url = null; url = new URL(urlStr); HttpURLConnection con = (HttpURLC....零: //先由http访问,如果可以正常访问图片,再取宽度和高度
public static boolean isAskedByUrl(String urlStr){
try {
URL url = null;
url = new URL(urlStr);
HttpURLConnection con = (HttpURLConnection) url.openConnection();
int state = con.getResponseCode();
// System.out.println(urlStr);
if (state == 200) {
// System.out.println("URL可用!");
return true;
}else{
log.info("HTTP访问图片:"+urlStr+"访问不到");
return false;
}
} catch (Exception e) {
log.error("图片:"+urlStr+"访问不到",e);
return false;
}
}一、 //通过图片的IE网络url取得图片的宽度和高度 public static int[] getIEImageWidthAndHeightArrByUrl(String url) { BufferedImage sourceImg = null; int width=1; int height=0; int[] result=new int[2]; try { InputStream murl = new URL(url).openStream(); sourceImg =ImageIO.read(murl); width = sourceImg.getWidth(); height = sourceImg.getHeight(); result[0]=width; result[1]=height; } catch (Exception e) { e.printStackTrace(); result[0]=1; result[1]=0; log.info("Img Util getImageWidthAndHeightArrByUrl:error", e); } return result; } 二、 //通过文件的字节数组读取 public static int[] getImageWidthAndHeightArr(byte[] imageByte){ InputStream is =new ByteArrayInputStream(imageByte);//通过文件的字节数组读取 BufferedImage buff; int width=0; int height=0; int[] result=new int[2]; try { buff = ImageIO.read(is); width=buff.getWidth();//得到图片的宽度 height=buff.getHeight();//得到图片的高度 result[0]=width; result[1]=height; } catch (Exception e) { e.printStackTrace(); result[0]=1; result[1]=0; log.info("Img Util getImageWidthAndHeightArr:error", e); } return result; }
-
SpringMVC中MultipartFile上传获取图片的宽度和高度详解
2020-08-30 13:38:40本篇文章主要介绍了SpringMVC中MultipartFile上传获取图片的宽度和高度,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 -
如何在vue项目中将获取图片宽度和高度尺寸的异步函数换成同步
2020-12-28 21:01:501.promise化function util() {return new Promise((resolve, reject) => {let reader = new FileReader()reader.onload = function (e) {let data = e.target.resultlet img = new Image()img.src = dataimg....1.promise化
function util() {
return new Promise((resolve, reject) => {
let reader = new FileReader()
reader.onload = function (e) {
let data = e.target.result
let img = new Image()
img.src = data
img.onload = function () {
resovle({
width: img.width,
height: img.height
})
console.log('width', img.width)
console.log('height', img.height)
}
}
reader.readAsDataURL(file)
})
}
2.调用
async function getImg() {
let img = await util()
console.log('width', img.width)
console.log('height', img.height)
}
-
js和jquery如何获取图片真实的宽度和高度
2020-12-03 16:29:051、什么时候需要获取图片真实的宽度和高度 在做pc网页的时候,有时候会考虑按照插入的图片的尺寸来判断图片是横图还是竖图。然后判断过后给予不同的展示方式! 另外一种就是在手机页面上,在新闻页插入的图片往往都... -
asp.net 获取图片高度和宽度实例代码
2020-10-30 00:45:28使用asp.net获取图片的高度跟宽度的实例代码 -
JS获取图片高度宽度的方法分享
2020-10-24 09:01:11主要介绍了JS获取图片高度宽度的方法,开始的时候没能做到兼容chrome,在度娘和众网友的帮助下,最终完成了完美兼容,这里分享给大家,有需要的小伙伴可以参考下。 -
js 获取网络图片的高度和宽度的实现方法(变通了下)
2020-10-29 16:33:13简单地说就是把图片放入一个自动伸缩的DIV中,然后获取DIV的宽和高!这个不错的变通,大家可以参考下。 -
jquery实现在页面加载完毕后获取图片高度或宽度
2020-10-25 19:02:48应项目要求,需要在页面加载完毕之后获取图片的高度,本例使用jquery来完成这个功能,需要的朋友可以参考下 -
JS获取各种宽度、高度的简单介绍
2020-12-10 02:25:07有时候项目中会用到用js获取元素位置来定位元素,首先通过图片说明scrollWidth,clientWidth,offsetWidth的关系。 JS获取各种宽度、高度的简单介绍: scrollHeight: 获取对象的滚动高度。 scrollLeft:设置或获取... -
js获取Html元素的实际宽度高度的方法
2020-10-22 07:45:15下面小编就为大家带来一篇js获取Html元素的实际宽度高度的方法。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 -
js和jquery获取图片真实的宽度和高度,jquery获取图片高宽
2022-03-28 22:36:16截取某个大佬总结过一篇文章,jquery的height()和javascript的height总结,是获得各种高度,主要针对做pc网页或者手机网页,有时候需要用js添加动态高度,而总结的。 今天的这个案例和之前的稍微有点不同,案例背景...案例选取背景
截取某个大佬总结过一篇文章,jquery的height()和javascript的height总结,是获得各种高度,主要针对做pc网页或者手机网页,有时候需要用js添加动态高度,而总结的。
今天的这个案例和之前的稍微有点不同,案例背景是“在做pc网页的时候,有时候会考虑按照插入的图片的尺寸来判断图片是横图还是竖图。然后判断过后给予不同的展示方式!”另外一种就是在手机页面上,在新闻页插入的图片往往都是按照图片的原尺寸来展示,如果手机屏幕太小,太大的图就会超出去!
针对这种情况,一般有两种解决方案:
一种是给所有图片加上如下样式
.haorooms img{margin:5px auto; display:block;width:90%; height:auto;}
但是这种方式有另外一个问题就是,如果插入的图片本身就很小的话,也会被直接拉伸成100%显示,显然这是不合理的!那么这里就介绍另外一种方式就是通过js动态展示图片的尺寸!
jquery方式:
var _winwh = parseInt($(window).width());//获取浏览器的宽度 $(".haorooms img").each(function(i){ var img = $(this); var realWidth;//真实的宽度 var realHeight;//真实的高度 //这里做下说明,$("<img/>")这里是创建一个临时的img标签,类似js创建一个new Image()对象! $("<img/>").attr("src", $(img).attr("src")).load(function() { /* 如果要获取图片的真实的宽度和高度有三点必须注意 1、需要创建一个image对象:如这里的$("<img/>") 2、指定图片的src路径 3、一定要在图片加载完成后执行如.load()函数里执行 */ realWidth = this.width; realHeight = this.height; //如果真实的宽度大于浏览器的宽度就按照100%显示 if(realWidth>=_winwh ){ $(img).css("width","100%").css("height","auto"); } else{//如果小于浏览器的宽度按照原尺寸显示 $(img).css("width",realWidth+'px').css("height",realHeight+'px'); } }); });
纯javascript方式获取图片高度
window.onload = function(){ function getViewSize() {//获取浏览器视口的宽高 return { "w": window['innerWidth'] || document.documentElement.clientWidth, "h": window['innerHeight'] || document.documentElement.clientHeight } } function getFullSize() {//获取浏览器最大的宽度 var w = Math.max(document.documentElement.clientWidth, document.body.clientWidth) + Math.max(document.documentElement.scrollLeft, document.body.scrollLeft); var h = Math.max(document.documentElement.clientHeight, document.body.clientHeight) + Math.max(document.documentElement.scrollTop, document.body.scrollTop); w = Math.max(document.documentElement.scrollWidth, w); h = Math.max(document.documentElement.scrollHeight, h); return { "w": w, "h": h }; } var _sv_w = getViewSize()["w"]; var _sf_w = getFullSize()["w"]; var _w = _sv_w;//这里用视口的宽度,具体视情况 var Imgarray = document.getElementsByTagName("img"); var realWidth;//真实的宽度 var realHeight;//真实的高度 for(var i =0;i<Imgarray.length;i++){ var imgtemp = new Image();//创建一个image对象 imgtemp.src = Imgarray[i].src; imgtemp.index = i;//指定一个检索值,用于确定是哪张图 imgtemp.onload = function(){//图片加载完成后执行 var _stemp = this;//将当前指针复制给新的变量,不然会导致变量共用 realWidth = this.width; realHeight = this.height; if(realWidth >=_w ) { Imgarray[_stemp.index].style.width = _w+'px'; Imgarray[_stemp.index].style.height = 'auto'; } else{ Imgarray[_stemp.index].style.width = realWidth+'px'; Imgarray[_stemp.index].style.height = realHeight+'px'; } } } }
上面两种方法中jquery比较简单,实现起来比较快,第二种比较复杂些,但是执行起来比jquery要快!大家可以根据需要,选择哪种方式。
现在时间已经是凌晨了,哎,刚刚在写昨天的博客,最近项目太多,木时间啊!太忙了~~~
博客的资料库和小工具也好久没有时间弄了,估计新的东西上线还要一定的时间,加油!虽然忙,但是有时间我还是会整理我的博客的,把一些长用的知识分享给大家,共同进步!!!!!
-
getCompoundDrawables()和获取图片宽度和高度
2017-05-30 14:45:28在布局文件中设置四周图片,用getCompoundDrawables方法可以获取这4个位置的图片 该方法返回包含控件左,上,右,下四个位置的Drawable的数组 Drawable[] drawables=getCompoundDrawables(); 在ImageView中的image,... -
通过jq ,获取图片真实的宽度和高度
2020-09-15 09:51:12真实的图片宽高,需要在图片加载后,获取 //通过图片宽高,设置css public setImgW() { var imgSrc = $(".parkImg").attr("src"); this.getImageWidth(imgSrc, function (w, h) { console.log({ width: w, ... -
html 表格单元格的宽度和高度的设置方法
2020-09-22 12:43:31做网页的时候,经常会碰到表格宽度对不齐的问题,遇到这种问题怎么处理呢?下面小编给大家介绍下html 表格单元格的宽度和高度的设置方法,一起看看吧 -
获取图片的原始高度宽度和在页面上实际渲染出来的高度宽度
2020-11-24 11:35:411、获取原始高度和宽度,也就是图片本身的高度和宽度 <img id="id1" src="图片路径" alt=""> //首先获取dom元素 let dom = document.getElementById('id1') //如果图片是动态返回的,那么直接按照下面的方式... -
获取图片真实的宽度和高度
2017-05-02 10:43:02//获取浏览器的宽度$(".new_mess_c img").each(function(i){var img = $(this);var realWidth;//真实的宽度var realHeight;//真实的高度//这里做下说明,$("")这里是创建一个临时的img标签,类似js创建一个new Image... -
ImageView获取宽度和高度
2014-12-09 10:46:02onCreate中获取图片的宽度和高度失败!采用其他方法,比如BitmapFactory。 -
asp获取图片高度和宽度
2012-12-05 09:37:30可处理图片放大,图片列表,防止图片变型拉伸 -
Android中自定义控件-获取图片的宽度和高度
2019-08-05 16:08:59基础操作,记录一下 Bitmap获取对应图片宽高: ...//获取图片的宽 Bitmap.getHeight();//获取图片的高 Drawable类型图片获取宽高方式: Drawable.getIntrinsicWidth(); Drawable.getIntrinsicHeight(); ... -
java获取图片的宽度和高度
2018-01-28 16:26:38package com.suobei.test; import javax.imageio.ImageIO; import javax.swing.*; import java.awt.*; import java.awt.image.BufferedImage; import java.io.File; import java.io.... * 获取图片的宽度和高 -
微信小程序 动态的设置图片的高度和宽度详解及实例代码
2020-08-31 07:38:50主要介绍了微信小程序 动态的设置图片的高度和宽度详解及实例代码的相关资料,需要的朋友可以参考下 -
java File上传图片获取图片宽度高度
2015-11-10 15:03:39package util; import java.awt.image.BufferedImage; import java.io.File; import java.io.FileInputStream; import java.io.... * 通过java获取图片的宽和高 * @author sunlightcs * 2011-6-1 * http: