首页
学习
活动
专区
工具
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.3K20
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

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

    背景 在实际开发中,移动端页面遇到,采用正常写法,图片 src赋值写在 onload 事件监听 后面,依然会有拿不到 图片真实场景,获得图片都为0,真的是好坑啊。...img = new Image() // 加载完成执行 img.onload = function(){ console.log(img.width,img.height) } // 改变图片...为了避免图片加载失败或不存在等长场景导致定时器一直执行,可以加一个兜底,比如10秒钟之后自动清除定时器。...var img = new Image() // 改变图片src img.src = img_url // 定时执行获取 var check = function(){ // 只要任何一方大于...0 // 表示已经服务器已经返回 if (img.width>0 || img.height>0) { clearInterval(set); } } var

    4K20

    js获取各种距离和

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

    23110

    javascript 快速获取图片实际大小

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

    5.5K10

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

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

    iOS获取屏幕、设备型号、系统版本信息介绍1、获取屏幕2、获取设备型号3、获取系统版本

    之前也研究过,这里把我方法记录下来,本文介绍三个常用设备信息获取方式: 获取屏幕。用于在设置控件位置时候计算相对屏幕距离 获取设备型号。...1、获取屏幕 屏幕是一个常常需要用到信息,尤其是当你用代码写UI时。比如当你写一个UILabel,设置其frame时,你想要它居中,而你想为其设置宽度为200,那怎么设置它x值呢?...获取屏幕方法如下: // 设备宽度 [UIScreen mainScreen].bounds.size.width // 设备高度 [UIScreen mainScreen]....bounds.size.height 一般来说我们在pch文件里将其设置为宏,这样在每个地方就都可以调用了,就不用每次都用这么长一串代码: //设备 #define SCREENWIDTH...[SystemVersion floatValue] >= 7.0) { …… } 常用获取设备信息方法就在这里啦,希望能帮到大家~ 这里是我在github示例工程地址:https

    2.5K40

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

    cc++使用ffmepg库获取视频信息(时长等)

    备忘一个使用ffmepg获取视频时长等信息代码,是使用ffmepgapi不是通过exe命令行方式。至于用ffmepg库和头文件等,我传github和CSDN各一份。地址在最后。...下面是代码,首先: //引入ffmpeg头文件和lib,自己处理好库路径 extern "C" { #include "libavcodec/avcodec.h" #include "libavformat...= 0) { printf("无法打开视频文件\n"); return -1; } // 查找视频文件中信息 if (avformat_find_stream_info(formatContext..., NULL) < 0) { printf("无法查找视频流信息\n"); return -1; } int videoStreamIndex = -1; AVCodecParameters...codecpar; break; } } if (videoStreamIndex == -1) { printf("无法查找视频流\n"); return -1; } // 获取视频时长

    61520

    .NET 程序如何获取图片(框架自带多种方法不同性能)

    .NET 程序如何获取图片(框架自带多种方法不同性能) 发布于 2020-02-17 08:32...更新于 2020-02-17 00:47 获取图片方法有很多种,本文介绍 .NET 中获取图片几种方法并评估其性能。...---- 本文即将评估方法 本文即将采用以下四种方法获取图片: System.Drawing.Imaging.Metafile System.Drawing.Bitmap System.Windows.Media.Imaging.BitmapImage...所以指望直接读取图片元数据头来提升性能小伙伴们注意啦,这不是你们要找方法。 不过为什么这个也能拿出来说,是因为此类也可以读取其他格式图片。...可以发现,对于 .NET 框架中原生自带获取图片尺寸方法来说: System.Windows.Media.Imaging.BitmapDecoder 整体性能是最好 对于同一张图,System.Windows.Media.Imaging.BitmapImage

    2.5K20

    cocos2d-js 粒子系统使用自定义图片,还原原来图片

    粒子系统使用自定义图片很简单只需要在plist最后一行设置png名称即可。但是,在实际使用中,发现自定义图片无法使用原来形状,例如设置了一长条图片,结果出来确实一个个圆球。...翻了plist和cc.ParticleSystem定义,没有找到自定义形状属性,暂且认为cocos2d无法使用自定义图片原来形状,默认展示都会被压缩为正方形图,本来一张长条图被压缩了。...(如果哪位高人有准确说法,请不吝留言告诉我) 但我们可以通过简单小把戏,绕过这个问题。 为了还原原来效果,可以初始化之后,使用setScaleX/setScaleY来控制图大小。...实际上是把整个粒子系统拉伸了,但正好这就是我们需要效果。 如下方风效果。如果不设置scaleX,出来效果是一块一块白色圆球。 ? ?

    1.2K10
    领券