首页
学习
活动
专区
工具
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

如何批处理图片大小?怎样压缩图片大小

图片设计和修图是非常专业的一件事情,在普通的制图软件当中,有许许多多的快捷键以及图片处理技巧,可以用最快的方式将图片处理成想要的效果。现在来了解如何批处理图片大小。 如何批处理图片大小?...如何批处理图片大小是许多专业的制图人员都有的一项技能。。批处理图片就是同时批量处理一大批图片,将所有的图片进行统一参数的设置和处理,从而减少时间,节省时间。...批处理图片大小的时候首先要给制图软件设置一个动作,也就是裁剪或者设置尺寸的参数,设置完动作之后,就可以导入想要批量处理的图片,然后选择动作,就可以将所有导入的图片进行批量处理,图片大小了。...怎样压缩图片大小?...如何批处理图片大小以及怎样压缩图片大小都是一些常用的图片处理技巧,有些图片体积特别大,在网站上传的过程当中通常无法使用,因此就需要将图片进行压缩,变成体积特别小的,符合上传规定的图片,压缩图片大小的时候

1.9K30

使用Windows照片库修改图片后记得清理原始图片副本

Windows中自带的图片查看软件提供了对图片的修改功能,如图所示: 这个功能很好用,对于我们这种不怎么会用PS的人来说已经很不错了。...无论是使用调整了什么地方,或者直接让系统“自动调整”然后切换到其他图片时,系统将自动将原始图片保留一个副本到C盘用户的一个文件夹下。...原因很简单,就是为了提供一个撤销的功能,方便以后用户觉得这张图片修改的不好的时候可以撤销修改,恢复成最原始图片。...有一天我对我电脑中的照片进行了一次集中的处理,每张照片都是3~4M大小,当时不知道系统会有这个伎俩,所以过几天才发现我的C盘空间告急了。...我的照片当时修改的时候是修改的效果我觉得可以我才保存的,所以我以后也不会再想恢复原始照片。那么系统自动保存的这个副本对我来说根本没有用了,直接删除!OK,为我可怜的C盘节约下来1G的空间。

38820

iOS压缩图片大小

最近碰到一个比较愚蠢的问题,项目中做的拍照或者从相册选择图片上传时,没有经过处理,直接把原图上传了,导致在列表中看的时候,明明是小图片流量却要爆炸了,想想iphone拍出照片大小可都是以M为单位的。...调用的方法如下: //图片伸缩到指定大小 - (UIImage*)imageByScalingAndCroppingForSize:(CGSize)targetSize forImage:(UIImage...调用的过程也很简单,比如: // 伸缩图片 if ([self imageByScalingAndCroppingForSize:CGSizeMake(100, 100) forImage:theImage...100*100的尺寸,经过测试,原来1M的图片处理后就只有20多k了,这样流量的压力就大大减少啦。...这个方法也可以用来伸缩图片的尺寸,不过我还是用来压缩的,在不追求高清晰度的情况下,使用还是很方便灵活的,希望能帮到大家~

1.3K20

ps如何批量处理图片大小和尺寸_ps怎样批量处理图片大小

喜爱摄影的朋友可能都有这样的体会,相机里面存了大量的图片,一般都是2048×1536或者更大像素的照片,每张都有1M以上,如果设置的清晰度高,则照片就更大,这样的图片是无法上传到博客中的(博客要求每张图片大小不能超过...这就需要对每张图片进行处理,可是一次拍摄了几十张上百张照片,一张一张处理岂不是太浪费时间。下面就教大家一招,让你轻轻松松批量处理图片,嘻嘻!...现在开始调整图像的大小:选图像-图像大小。如下图:将图片设置成需要的大小。在新浪博客中横幅图片一般设置成550像素以内为好,太宽则显示不全。设置好后点击对话框中的“好”按钮。...这一步开始批量调整你的图片了。点文件-自动-批处理。如下图: 第九步:最后一步啦!要把你要批量处理的图片放在一个专门的文件夹里即第一步所说的文件夹“边城满洲里”。...马上就会自动处理你的图片了。软件会打开所有你要处理的图片,并显示在软件里。然后一张一张处理好你需要处理的图片并保存在处理好的文件夹里。

3.1K20

Android | 计算图片占用内存大小

图片宽 112 像素,高 131 像素,大小 20 kb 左右。...图片内存体积优化 根文件存储格式无关 通过上面的分析我们可以知道图片占用内存的大小是和图片本身的大小没有关系的。...不使用图片 优先使用 VectorDrawable 时间和技术允许的前提下使用代码编写动画 总结 图片本身的大小和它占用内存的大小没有什么关系。...图片占用内存的计算公式 分辨率 * 像素点大小,也就是 长 * 宽 * 像素点大小,像素点大小是根据加载方式来定的,例如 ARGB_8888 占 4 个字节,RGB_565 占 2 个字节。...,我们可以知道 在不同的 dpi 设备中,同个界面的相同图片所占用的内存大小可能不一样,同个图片在不同的资源文件中加载到内存后所占用的大小也可能不一样。

3K40

更改文字、图片和视频大小(缩放)

在计算机上,您可以更改一个网页或所有网页的文字、图片和视频大小。 要在移动设备上更改字体大小,请在设备的“设置”应用中更新显示选项。 在当前网页上进行缩放 使用缩放选项可放大或缩小网页上的所有内容。...为所有网页设置页面或字体大小 您可以更改所访问网页中所有内容(包括文字、图片和视频)的大小,也可以仅更改字体大小。 注意:某些网站不允许浏览器仅更改文字大小。...对于这些网站,Chrome 不能调整字体大小。 在计算机上打开 Chrome。 依次点击右上角的“更多”图标 设置。...更改字体大小:点击“字号”旁边的向下箭头 ,然后选择所需的字体大小。您还可以通过点击自定义字体更改更多字体选项。

2.1K30

原始图片数据开始构建卷积神经网络(Pytorch)

说在前面 入门机器学习的时候,我们往往使用的是框架自带的数据集来进行学习的,这样其实跳过了机器学习最重要的步骤,数据预处理,本文通过从原始数据(图片格式)到卷积神经网络的设计,逐步实现 MNIST 的分类...10 个文件夹下面各有 10000 张图片,我们对原始数据集进行分配 原始数据集 将其分成训练集、测试集、验证集,各自按照类别文件夹放置。...# 得到当前类别的所有图片的路径,指定后缀 imgs_list = [class_li + '/' +...img.endswith("png")] print(len(imgs_list)) img_num = len(imgs_list) # 当前类别的图片数量.../data/model.pkl') predict(model_load, data, label) # 预测结果 # 0.994140625 总结 本文实现从原始数据(图片)到卷积神经网络的设计,一步一步的实现

71300
领券