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

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宽和 需要注意是在给imgsrc赋值时,这是一个异步过程,会存在获取img宽度时值为0(图片还未加载完成),可以在给img赋值之前加上onload事件 var img = document.createElement

6.1K20

js获取各种距离和

window window.screen.height 返回屏幕高度 window.screen.width 返回屏幕宽度 window.innerHeight/window.innerwidth...返回窗口内部高度/宽度(不包含工具栏和滚动条) window.pageXOffset/window.pageYOffset 文档在窗口左上角水平和垂直方向滚动像素 window.pageYOffset...window.scrollY 浏览器滚动掉Y距离 document 可视区域 document.documentElement.offsetHeight(不包括外边距) document.documentElement.clientHeight...以计算机显示屏屏幕左上角为原点, 距离屏幕左侧距离 元素及各种距离 属性 说明 clientHeight/clientWidth 包括元素可视部分高度/宽度包括width/height...此属性可以获取或者设置对象最顶部到对象在当前窗口显示范围内顶边/左侧距离,也就是元素滚动条被向下/向右拉动距离。

8010
您找到你想要的搜索结果了吗?
是的
没有找到

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.7K20

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...  网页被卷去左:document.body.scrollLeft  网页正文部分上:window.screenTop  网页正文部分左:window.screenLeft  屏幕分辨率window.screen.height...  屏幕分辨率window.screen.width  屏幕可用工作区高度:window.screen.availHeight  屏幕可用工作区宽度:window.screen.availWidth

3.5K100

javascript 快速获取图片实际大小

javascript 快速获取图片实际大小 简陋获取图片实际方式 // 图片地址 var img_url = '13643608813441.jpg' // 创建对象 var img =...都是0这个结果很正常,因为图片相关数据都没有被加载前它默认就是0,我们需要它加载完所有的相关数据再获取宽和。...从缓存里读取图片不用说,非常方便快捷,今天我们要解决是没有缓存而又快速相比onload更快方式去获取图片。...+start_time // 创建对象 var img = new Image() // 改变图片src img.src = img_url // 定时执行获取 var check = function...这是一张2560 * 1600大小图片,各浏览器执行结果都能看到通过快速获取图片大小方法几乎都在200毫秒以内,而onload至少五秒以上,这差别之大说明快速获取图片非常实用。

5K10

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.3K40

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.8K20

Android获取设备屏幕pix值方法

本篇文章主要介绍了Android获取设备屏幕pix值方法,小编觉得挺不错,现在分享给大家,也给大家做个参考。...一起跟随小编过来看看吧 方法一: WindowManager wm = (WindowManager) this .getSystemService(Context.WINDOW_SERVICE);...width1 = wm1.getDefaultDisplay().getWidth(); int height1 = wm1.getDefaultDisplay().getHeight(); 方法一与方法二获取屏幕宽度方法类似...,只是获取WindowManager 对象时途径不同。...以上所述是小编给大家介绍Android获取设备屏幕pix值实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家。在此也非常感谢大家对ZaLou.Cn网站支持!

1.3K30

详解各种获取元素及位置属性

对于文档body对象,它包括代替元素CSS高度线性总含量。浮动元素向下延伸内容高度是被忽略。 var offsetHeight = element.offsetHeight; ?...var outerWidth = window.outerWidth; outerHeight Window.outerHeight 是一个只读属性,表示获取整个浏览器窗口高度(单位:像素),包括侧边栏...scrollTop Element.scrollTop 属性可以获取或设置一个元素内容垂直滚动像素数。...; 完整获取文档/页面在水平方向已滚动像素值兼容性代码: var x = (window.pageXOffset !...; scrollY 返回文档/页面在垂直方向已滚动像素值,其中 pageYOffset 属性是 scrollY 属性别名 var scrollX = window.scrollY; 完整获取文档/

3.7K80

JavaScript与jQuery获取元素和位置

今天汇总整理了 JavaScript 和 jQuery 获取元素和位置方法,比较全面,方便自己和需要并搜到此文章朋友们查看。...可视 clientHeight :元素可视高度(包括内边距,不包括边框、外边距或滚动条) clientWidth :元素可视宽度(包括内边距,不包括边框、外边距或滚动条) 自身 offsetHeight...) offsetParent :元素偏移容器(父元素) offsetTop :元素相对垂直偏移位置(上边界距离可视区域最上边距离) 事迹 scrollHeight :整个元素高度(包括带滚动条隐蔽地方...元素 width() :获得或设置元素【内容】;若元素display:none,其值为0 height() :获得或设置元素【内容】;若元素display:none,其值为0 innerWidth...浏览器相关 $(window).height() :获取浏览器可视窗口高度; $(document).height() :获取整个网页文档高度;当网页高度不足浏览器窗口时,返回是 $(window

2.9K00

Android 获取屏幕多种信息示例代码

本文主要介绍了Android 获取屏幕多种信息示例代码,分享给大家,具体如下: 包含信息如下图所示: ?...在模拟器上获取数据: 08-26 07:19:32.712 7834-7834/com.czy.screeninfo E/MainActivity: getTotalScreenHeight 1920...status_bar_height", "dimen", "android"); return activity.getResources().getDimensionPixelSize(resourceId); } /** * 获取虚拟按键高度...displayMetrics); int realHeight = displayMetrics.heightPixels; return realHeight - usableHeight; } /** * 获取虚拟按键高度...context.getResources().getDisplayMetrics().density; return (int) (pxValue / scale + 0.5f); } } 或者也可以从这里下载代码:Android 获取屏幕多种信息

88241
领券