首页
学习
活动
专区
工具
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的宽和高 需要注意的是在给img的src赋值时,这是一个异步过程,会存在获取img的宽度时值为0(图片还未加载完成),可以在给img赋值之前加上onload事件 var img = document.createElement

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

javascript 快速获取图片实际大小的

javascript 快速获取图片实际大小的高 简陋的获取图片实际高的方式 // 图片地址 var img_url = '13643608813441.jpg' // 创建对象 var img =...高都是0的这个结果很正常,因为图片的相关数据都没有被加载前它的高默认就是0,我们需要它加载完所有的相关数据再获取宽和高。...通过onload就能获取图片高了。但onload大一点的图通常都比较慢,不实用,但只要图片被浏览器缓存,那么图片加载几乎就不用等待即可触发onload,我们要的是占位符。...从缓存里读取图片高不用说,非常方便快捷,今天我们要解决的是没有缓存而又快速的相比onload更快的方式去获取图片高。...这是一张2560 * 1600大小的图片,各浏览器执行结果都能看到通过快速获取图片大小的方法几乎都在200毫秒以内,而onload至少五秒以上,这差别之大说明快速获取图片高非常实用。

4.9K10

python获取图片并储存图片_python用户输入矩形的长和

/images/000011.jpg”# 使用pillow读取图片获取图片的宽和高img_pillow = Image.open(image_path)img_width = img_pillow.width...# 图片宽度img_height = img_pillow.height # 图片高度print(“width -> {}, height -> {}”.format(img_width, img_height...1333, 2000, 3)(1333, 2000, 3) 注意事项:读取出的图像矩阵的shape是按 高度、宽度、通道数 这个顺序,图像宽度是第一个维度 总结 以上所述是小编给大家介绍的python读取图片的几种方式及图像宽和高的存储顺序...以上就上有关python读取图片的几种方式及图像宽和高的存储顺序的全部内容,学步园全面介绍编程技术、操作系统、数据库、web前端技术等内容。

80720

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

3.9K20

.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...现在,使用不同的图片运行多次。 分别运行以上四个方法各 10 张图片: ? 分别运行以上四个方法各 100 张图片(可以发现大量的 GC): ?...可以发现,对于 .NET 框架中原生自带的获取图片尺寸的方法来说: System.Windows.Media.Imaging.BitmapDecoder 的整体性能是最好的 对于同一张图,System.Windows.Media.Imaging.BitmapImage

2.2K20

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

之前也研究过,这里把我的方法记录下来,本文介绍三个常用的设备信息获取方式: 获取屏幕的高。用于在设置控件位置的时候计算相对屏幕的距离 获取设备的型号。...获取系统版本。...1、获取屏幕的高 屏幕的高是一个常常需要用到的信息,尤其是当你用代码写UI时。比如当你写一个UILabel,设置其frame时,你想要它居中,而你想为其设置的宽度为200,那怎么设置它的x值呢?...获取屏幕、高的方法如下: // 设备宽度 [UIScreen mainScreen].bounds.size.width // 设备高度 [UIScreen mainScreen]...2、获取设备的型号 获取设备型号有几种方法,这里我使用的是比较笨的方法,获取设备的分辨率来判断设备的型号。

2.2K40

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

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

6.7K20
领券