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

JS获取图片原始宽

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

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

js获取各种距离和宽

鼠标event事件 属性 说明 offsetX 以当前的元素的左上角为原点, 距离元素顶部的距离 offsetY 以当前的元素的左上角为原点, 距离元素左侧的距离 clientX 以浏览器窗口(口...)的左上角为原点, 距离口顶部距离, 不随页面滚动而改变 clientY 以浏览器窗口(口)的左上角为原点, 距离口左侧距离, 不随页面滚动而改变 pageX 以整个页面的左上角为原点, 距离页面顶部的距离...以整个页面的左上角为原点, 距离页面左侧的距离, 随页面滚动而改变 screenX 以计算机显示屏屏幕左上角为原点, 距离屏幕顶部的距离 screenY 以计算机显示屏屏幕左上角为原点, 距离屏幕左侧的距离 元素的宽及各种距离...宽 属性 说明 clientHeight/clientWidth 包括元素的可视部分的高度/宽度包括width/height和padding不包括border和滚动条如果是content-box,则为...为字符串类型) 距离 属性 说明 offsetTop/Left 元素距离最近的带有定位(fixed/relative/absolute)的父元素的顶部/左侧的距离 scrollTop/Left 此属性可以获取或者设置对象的最顶部到对象在当前窗口显示的范围内的顶边

7310

js获取屏幕以及元素宽的方法

一.window相关 网页正文部分上:window.screenTop 网页正文部分左:window.screenLeft 屏幕分辨率的:window.screen.height 屏幕分辨率的宽:...(包括边线的宽) 网页正文全文宽:document.body.scrollWidth 网页正文全文:document.body.scrollHeight 网页被卷去的:document.body.scrollTop...网页被卷去的左:document.body.scrollLeft 三.滚动相关 scrollHeight: 获取对象的滚动高度。...scrollWidth: 获取对象的滚动宽度 document.documentElement.scrollTop 垂直方向滚动的值 四.位置精确定位 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离...scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置 offsetTop

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...scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离  scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离  scrollWidth:获取对象的滚动宽度...  offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度  offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置

3.5K100

【FFmpeg】ffmpeg 命令行参数 ④ ( ffmpeg 视频参数解析 | 设置视频帧数 | 设置视频码率 | 设置视频帧率 | 设置视频宽 | 设置视频宽高比 | 设置视频滤镜 )

并将结果保存到 output.mp4 文件中 ; 下图中 , 输入文件 input.mp4 的 帧率为 29.608 FPS , 输出文件 output.mp4 的 帧率为 60 FPS ; 四、设置视频画面宽...像素 ; -s 参数的 参数值 是 一个宽度和高度的值 , 中间用 x 分隔 , 如 : 如果输出视频的分辨率为 376x210 , 则可以使用 -s 376x210 参数设置 ; 2、设置视频画面宽示例...使用 -aspect 参数时 , 设置的参数值是 一个宽高比的值 , 这个参数值可以是一个 浮点数 : 表示宽度与高度的比值 , 如 : -aspect 0.5 ; 以冒号分隔的两个整数 : 表示宽和的具体数值...ffmpeg 命令行参数 ② ( Windows 环境中 ffmpeg 命令行输出文本搜索 -findstr 用法 | -findstr 搜索文本字符串用法 | 输出命令行到文件中 ) 博客中介绍了 获取

1.4K10
领券