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

    获取jar包内部的资源文件

    通常获取一个资源文件很简单,问题是对于jar包内的资源文件,可能会发生意外。...也就是说,资源文件的使用类无法找到自己,jar包正常的功能将无法提供。这是一个常见的关于jar路径的问题。.../library 显而易见,获取jar包中的文件路径的格式已经变为*.jar!*(除了第一个),这种格式的路径,不能通过new File的方式找到文件。目前本人也没有找到其它处理方式,欢迎评论指点。...在这种情况下,如果想让jar读取到自己的资源文件,可以通过类加载器的getResourceAsStream方法来解决。...也就是说,资源文件一定能够被读取到。 参考文章: https://blog.csdn.net/luo_jia_wen/article/details/50057191

    1.7K20

    【Flutter】Flutter 资源文件使用 ( 导入资源图片 | 使用图片资源 )

    文章目录 一、Flutter 导入资源图片 二、Flutter 使用资源图片 三、完整代码示例 四、相关资源 一、Flutter 导入资源图片 ---- Flutter 资源路径配置 : 资源路径在根目录中的...add an assets section, like this: assets: - images/hunter.png 之后就可以在 flutter 项目中使用该文件了 ; 下图展示了资源文件目录结构以及配置文件中的配置信息...; 导入资源图片样式 : 二、Flutter 使用资源图片 ---- Image 组件中使用资源图片 , 在其 image 字段使用 AssetImage 类型的图片即可 ; 代码示例 : 设置一个...ResourcePage> { @override Widget build(BuildContext context) { return MaterialApp( title: "资源文件使用...(primarySwatch: Colors.blue), home: Scaffold( appBar: AppBar( title: Text("资源文件使用

    1.8K00

    JS 图片压缩

    前言 说起图片压缩,大家想到的或者平时用到的很多工具都可以实现,例如,客户端类的有图片压缩工具 PPDuck3, JS 实现类的有插件 compression.js ,亦或是在线处理类的 OSS 上传,...文件上传后,在访问文件时中也有图片的压缩配置选项,不过,能不能自己撸一套 JS 实现的图片压缩代码呢?...压缩思路 涉及到 JS图片压缩,我的想法是需要用到 Canvas 的绘图能力,通过调整图片的分辨率或者绘图质量来达到图片压缩的效果,实现思路如下: 获取上传 Input 中的图片对象 File 将图片转换成...= `${new Date().getTime()}-${fileObj.name}`; // 获取文件后缀名 const fileNames = fileObj.name.split...,可以是页面上获取的 DOM 对象,也可以是虚拟 DOM 中的图片对象。

    25.8K21

    实现iOS图片等资源文件的热更新化(三):动态的资源文件

    具体到这里,我们为什么需要动态的资源文件夹呢?...; 如果某一天iOS机制的发生变化,或者你为其他平台编写app,但是其本身的App资源文件是可写的,那你也很可能是可以不用动态资源文件夹的; 从特定的缓存目录读取资源文件 从特定的缓存目录读取加载资源文件...3.从特定缓存目录加载文件 因为目录是特定的,我们只要每次App启动后,根据相对路径动态获取绝对路径,进而拿到 缓存目录中 main.bundle 资源包路径,然后就可以使用已有的方法,从 bundle... 里取图片即可: NSArray * LibraryPaths = NSSearchPathForDirectoriesInDomains(NSLibraryDirectory, NSUserDomainMask...这里,主要是和实现iOS图片等资源文件的热更新化(二):自定义的动态 imageNamed的类目方法结合扩展下,使原来的类目扩展支持从动态的缓存目录读取bundle,思路本身也很简单,只要更改下用于确定

    1.8K60
    领券