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

    JS获取图片中随机一点颜色

    实现效果 昨天泽泽分享了一篇有意思的文章:纯CSS根据图片取色设置背景色,主要分享了一个就是div嵌套img的时候,如何实现div的颜色为img中一点的颜色。...如下图所示,在PS中打开一张图片,如果将这张图片一直放大,具体到每个像素点,会发现图片单个像素点内的颜色值都是唯一的。...实现效果 有了具体的思路了就是如何实现了,因为我这个页面是前后端渲染的动态页面,改PHP代码的话有点麻烦,所以我就考虑从前端入手,使用JQuery来实现: 获取每一个友链链接.board-item; 然后通过显示迭代获取每一个友链中的背景图...; 然后将下方文字的背景图设置为获取的背景图地址,同时,使用Math.random()产生一个随机数,这样的话就可以实现对图片中随机一点进行取色,且每次刷新都会产生不一样的效果。...text-align:center; } span { color:red; } <script src="https://code.jquery.com/jquery-latest.<em>js</em>

    3.8K30

    JS实现动态获取当前点击事件的id属性值

    整个页面是通过ajax请求最新的4部视频进行填充完成,视频列表又是通过template-web.js插件补上去的,所以导致所有ID值都是一样的,一开始给按钮添加一个事件,结果是所有播放按钮都是播放第一个视频...于是,想了好多办法,又把ID属性给弄成动态的ajax请求的属性值,实现了每个id不一样,接下来,因为点击播放要调用一个方法,进行解析视频播放,拼接成API+视频链接的格式在新打开的弹窗进行展示。...具体可以看下图: 要实现点击不同按钮,并且按钮ID是动态从ajax请求获取的,还要添加点击视频拼接视频链接,参考了文章,可以获取点击按钮的id值,然后使用button,将链接放在value中 Dom...对象的id属性可以获取元素的id值。...-- HTML结构 --> 播放 // javascript

    25.9K20

    【OkHttp】OkHttp 上传图片 ( 获取 SD 卡动态权限 | 跳转到相册界面选择图片 | 使用 OkHttp 上传图片文件 )

    ( 获取 SD 卡动态权限 | 跳转到相册界面选择图片 | 使用 OkHttp 上传图片文件 ) ---- 文章目录 OkHttp 系列文章目录 前言 一、获取 SD 卡动态权限 二、跳转到相册界面..., 这里使用到了一个动态权限库 ; 此处也可以使用原生代码自己开发动态权限申请 【Android 应用开发】动态权限管理示例 ( 使用原生代码实现 | 申请权限 | 判定权限申请结果 | 判定 “ 不再询问...---- ① 首先 , 判定是否获取成功 , 如果图片获取成功 , 再向下继续执行 ; //获取图片路径 if (requestCode == REQUEST_CODE...= null) { ② 其次 , 获取图像的 Uri , 这是查找图片的唯一依据 ; // 获取图像 Uri Uri imageUri = data.getData(); ③ 再次 , 查询数据库中 ,...= cursor.getString(columnIndex); // 获取数据完毕后, 关闭游标 cursor.close(); ④ 最后 , 使用 OkHttp 上传获取图片对应的文件路径

    2.3K30
    领券