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

JS获取图片原始

最近在给博客的相册模块做优化,需要知道图片的原始大小,我以前的做法是把图片的真实高分别放在data-width和data-height中,效果是达到了,但是总觉得扩展性很低,当不知道图片的大小时,还要一张一张图片的去查看图片信息手动输入图片大小...也就是说如果图片原始大小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 img...= document.createElement("img") img.onload = function () { var width = img.width } img.src = "1.

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

    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: 获取对象的滚动高度。...height是指可见内容的 clientWidth = width + padding clientHeight = height + padding offsetWidth = width + padding

    6.8K20

    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.6K100

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

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

    4K20
    领券