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

如何快速获取一个网站的所有资源 如何快速获取一个网站的所有图片 如何快速获取一个网站的所有css

今天介绍一款软件,可以快速获取一个网站的所有资源,图片,html,css,js...... 以获取某车官网为例 我来展示一下这个软件的功能....输入网站地址和网站要保存的文件夹 如果网站名称后我们可以扫描一下网站, 以便我们更好的筛选资源,剔除不要的链接,添加爬取得链接 在这里也可以设置爬去的链接的深度和广度,相邻域名, 设置好了这些,就可以点击...再爬取的过程中 你可以再开启一个软件的窗口,进行另一个个爬取任务, 这个软件的其他菜单,这个工具还是很强大的,可以自定义正则表达式来过来url,资源,还可以把爬取任务保存起来,以便再次使用, 还可以设置代理,分析网站...爬取完成后,会有一个爬取统计 下载了多少文件,多少MB 进入文件夹查看下载的文件 直接打开首页 到此,爬取网站就结束了,有些网站的资源使用的是国外的js,css,速度会有些差异,但效果都是一样的.

4K10
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    前端如何获取当前时间_js 获取年份

    前端js获取当前时间的方法: var time = new Date(); time.getYear(); //获取当前年份 time.getFullYear(); //获取完整的年份(4位,1970...time.getMonth(); //获取当前月份(0-11,0代表1月) time.getDate(); //获取当前日(1-31) time.getDay(); //获取当前星期X(0-6,0代表星期天...) time.getTime(); //获取当前时间(从1970.1.1开始的毫秒数) time.getHours(); //获取当前小时数(0-23) time.getMinutes(); //...获取当前分钟数(0-59) time.getSeconds(); //获取当前秒数(0-59) time.getMilliseconds(); //获取当前毫秒数(0-999) time.toLocaleDateString...(); //获取当前日期 var mytime=time.toLocaleTimeString(); //获取当前时间 time.toLocaleString( ); //获取日期与时间 为了让大家有一个更感官的了解

    34K20

    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

    获取Bing图片作为WordPress等网站首页背景图

    必应搜索的图片是什么这里就不说了,昨天渣渣龙在群里艾特要我把Bing的每日一图作为网站背景图 我所使用的C7V5主题首页确实有一个大图,我经常换的图也是从Bing历史图中获取到好看的图片,保存得到的 这个功能还是很简单的...,看一下CSS,直接在header中增加行内样式就可以替换首页背景图 那就写一下吧,最近Bing又换了图片链接格式 作死获取 每次有请求,就去获取一下Bing的接口,直接引用Bing的图片地址 虽然我有使用方糖每天推送一次...format=js&idx=0&n=1'); // 转成数组 $bingArr = json_decode($res, true); $src = "https://cn.bing.com{$bingArr...['images'][0]['urlbase']}_1920x1080.jpg"; return $src; } 很简单就获取到了图片地址,想直接引用就这么干  素质获取 提高一下素质,不要写这种代码...$today.'.jpg'; } return $src; } 获取图片的任务完成了,怎么在页面获取呢 <?php if(!

    1.2K10

    网站线上优化,如何有效处理站内图片

    所以,在使用图片的时候,需要对图片进行优化。图片优化是指对图片进行相应的设置,让搜索引擎更加容易的收录和抓取。...2、属性 图片属性主要是指图片的Alt属性。图片的Alt属性是对图片所表达内容的说明。当图片不能显示的时候,就会用到Alt属性值来代替,这样用户就可以大概了解这个图片所要表达的信息。...图片标题、Alt属性、周边内容的文字最好有一定的区别,这样可以有效的承载更多的长尾关键词。 4、大小 图片大小是指图片占用存储空间的大小。图片越大越清晰,但打开网站的速度就会越慢,影响用户体验。...图片体积小虽然可以提升网站打开速度,但清晰度不高,影响页面的美观度。鱼与熊掌不可兼得,所以,我们需要根据网站的实际情况,来寻找清晰度和加载速度之间的平衡点,这样才会有视觉营销的效果。...影响图片大小的因素主要有两个方面:格式和像素。 5、链接 图片链接是指在图片中添加链接,链接内容可以是网站首页,也可以是相关文章。只要图片被收录,这些链接也就会被收录。

    46250
    领券