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

JS获取图片原始宽高

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

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

如何输出图片原始比率

背景 一些网站特别是以内容呈现为主的,经常会有图片的显示。一方面图片要懒加载,另一方面要设置图片占位以避免页面抖动。 懒加载的这篇文章先不说,先说下图片占位中,保持图片原始宽高百分比的问题。...图片原始宽高百分比,在英文里有个专有名词,Intrinsic ratio,在Google搜这个会出来很多文章的。...demo jsbin.com/copogub/edi… HTML 首先设定页面上图片原始高度宽度是已知的,自然百分比也是已知的了 里面的$ratio为服务端渲染的变量,一般的4x3比率:75%,16x9....main { display: inline-block; /* 注意这里设置的是max-width,而不是width,以兼容小图片 */ width: 200px; .intrinsic...*/ background: #f0f0f0; /* 图片上下左右撑开 */ .intrinsic-item { position: absolute;

97820

教你精确调整gif图片尺寸

平时写博客, 为了效果的生动形象, 经常需要嵌入一些gif图片, 但mac的retina显示器分辨率高, 录制出的gif图片往往很大,同时简书限制gif图片不能超过10M, 我在网上查了很多调整gif...尺寸的方法, 大多是一些在线转换的方法, 但而且效果都不理想 使用Photoshop调整, 最后问题完美解决, 这里把解决问题的详细步骤分享出来 调整步骤 1 .使用photoshop打开图片, 文件...按需求调整参数, 导出图片 图中位置4的参数, 可以按需求调整, 实现对图片的精确控制 ? 图片处理前后尺寸对比 ?...---- 图片质量对比 处理前的图片尺寸为1154*798, 大小为7.4M ? 处理后的图片尺寸为500*346, 大小为1.9M ?...---- 按照以上方法, 我们可以对任何gif的尺寸进行精确调整, 对于这类实用小技巧,可以点赞记录一下, 以后或许会用到~

2.2K30

JS对象到原始值的转换

JS对象到原始值转换的复杂性 主要由于某些对象类型存在不止一种原始值的表示 对象到原始值转换的三种基本算法 在解释三种算法前需要了解toString valueOf这两个方法 toString...返回对象的字符串表示 Array类的toString方法会将每个元素转换为字符串,再使用逗号作为分隔符拼接起来 Function类的toString方法将定义的函数转换为JS源代码的字符串 Date类型的...toString方法返回一个人类友好(且JS可解析)的日期和时间字符串 RegExp类定义的toString方法将RegExp对象转换为一个看起来像RegExp字面量的字符串 valueOf 把对象转换为代表对象原始值...toString方法 方法有定义且返回原始值,则使用该原始值(即使这个值不是字符串) 不存在或者存在但返回对象,则尝试使用valueOf方法 方法存在且返回原始值,则使用该值。...) 取决于被转换对象的类 如果是Date对象,则使用偏字符串算法 其他类型使用偏数值算法 JS内置类型除了Date类都实现了偏数值算法;Date类实现了偏字符串算法 对象转换为布尔值 所有对象都转换为

4.3K30

java 不改变尺寸大小对图片压缩

-1),目前压缩成为jpg的比较理想,压缩后为png并不能减少多少,可能是由于png是属于无损压缩 1、截止2022-5-18最新版本为0.4.17 使用方便 size(width,height):图片宽高比...sourceRegion:图片裁剪,参数(裁剪位置, 宽, 高)。 outputFormat:输出的图片格式。 toOutputStream:输出到OutputStream。...forceSize:压缩至指定图片尺寸(例如:横400高300) scale:指定图片的大小,值在0到1之间,1f就是原图大小,0.5就是原图的一半大小,这里的大小是指图片的长宽。...outputQuality:图片的质量,值也是在0到1,越接近于1质量越好,越接近于0质量越差。...baos);     } catch (Exception e) {         e.printStackTrace();     }     return null; } 也可以按照具体的尺寸来进行压缩

2.2K52
领券