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

JS获取图片原始

最近在给博客的相册模块做优化,需要知道图片的原始大小,我以前的做法是把图片的真实高分别放在data-width和data-height中,效果是达到了,但是总觉得扩展性很低,当不知道图片的大小时,还要一张一张图片的去查看图片信息手动输入图片大小...,很繁琐 获取图片大小: 1.使用innerWidth,innerHeight 使用HTMLImageElement.innerWidth 是可以拿到图片的宽度 但是需要注意的是这里拿到的宽度是图像在CSS...像素中渲染的宽度 也就是说如果图片原始大小1200,使用css或者width属性设置为600,那么这里拿到的宽度为600,显然用innerWidth获取图片原始尺寸是不靠谱的 2.使用document.createElement...(“img”) var img = document.createElement("img") img.src = "1.jpg" var width = img.width 动态创建一个imgElement...,通过给src赋值,最终来获取img的宽和 需要注意的是在给img的src赋值时,这是一个异步过程,会存在获取img的宽度时值为0(图片还未加载完成),可以在给img赋值之前加上onload事件 var

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

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

js图片监听onload事件,依然有获取不到的场景

背景 在实际开发中,移动端页面遇到的,采用正常写法,图片 src赋值写在 onload 事件监听 后面,依然会有拿不到 图片真实的场景,获得的图片都为0,真的是好坑啊。...(img.width,img.height) } // 改变图片的src img.src = img_url 解决 参考了该文章 关键时刻,还是得靠定时器轮询啊!!!...// 记录当前时间戳 var start_time = new Date().getTime() // 图片地址 后面加时间戳是为了避免缓存 var img_url = "xxx.jpg" // 创建对象...var img = new Image() // 改变图片的src img.src = img_url // 定时执行获取 var check = function(){ // 只要任何一方大于...0 // 表示已经服务器已经返回 if (img.width>0 || img.height>0) { clearInterval(set); } } var

3.9K20

img标签随机获取高质量图片

博主打算为自己在vps上挂载的服务, 建立一个导航页, 于是写一个静态页面, 贴了几个超链接 后来, 感觉不美观, 就放了几张图片 服务器存储的图片看了几遍就看腻了, 于是找了一个高质量图片的api,...每次打开导航页都能看到随机的封面 开源图片api的使用 我想获得300*300, 关于book和library的图片" https://source.unsplash.com/300x300/?...book,library 将随机图片嵌入到html中 <img src="https://source.unsplash.com/300x300/?...对于刚刚接触前端的小伙伴, 使用开源的图片库, 能让你的页面更加丰富多彩, 提升学习的兴趣. 对于前端老司机,可以获取定制化的开源图片, 提升页面展示效果....如果你对图片的质量有极致的追求,https://source.unsplash.com 提供了丰富的接口参数设置,可以定制化随机图片的范围, 当然也可以在unsplash.com 注册一个账号, 订阅特别主题的图片

2.1K10

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

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
领券