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

JS获取图片原始

最近在给博客的相册模块做优化,需要知道图片的原始大小,我以前的做法是把图片的真实高分别放在data-width和data-height中,效果是达到了,但是总觉得扩展性很低,当不知道图片的大小时,还要一张一张图片的去查看图片信息手动输入图片大小...,很繁琐 获取图片大小: 1.使用innerWidth,innerHeight 使用HTMLImageElement.innerWidth 是可以拿到图片的宽度 但是需要注意的是这里拿到的宽度是图像在CSS...(“img”) var img = document.createElement("img") img.src = "1.jpg" var width = img.width 动态创建一个imgElement...,通过给src赋值,最终来获取img的宽和 需要注意的是在给img的src赋值时,这是一个异步过程,会存在获取img的宽度时值为0(图片还未加载完成),可以在给img赋值之前加上onload事件 var...= document.createElement("img") img.onload = function () { var width = img.width } img.src = "1.jpg

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

js图片监听onload事件,依然有获取不到的场景

背景 在实际开发中,移动端页面遇到的,采用正常写法,图片 src赋值写在 onload 事件监听 后面,依然会有拿不到 图片真实的场景,获得的图片都为0,真的是好坑啊。...var img_url = '.jpg' // 创建对象 var img = new Image() // 加载完成执行 img.onload = function(){ console.log...// 记录当前时间戳 var start_time = new Date().getTime() // 图片地址 后面加时间戳是为了避免缓存 var img_url = "xxx.jpg" // 创建对象...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

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

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

5K10

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

一.window相关 网页正文部分上:window.screenTop 网页正文部分左:window.screenLeft 屏幕分辨率的:window.screen.height 屏幕分辨率的:...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: 获取对象的滚动高度。...height是指可见内容的 clientWidth = width + padding clientHeight = height + padding offsetWidth = width + padding

6.7K20

图片不变形,不超出父元素的情况下旋转图片

做这样的效果的难点在于,计算没旋转前图片和旋转后的。 下面来看具体的实现。 实现步骤 让图片在父元素中水平居中,垂直居中显示。我用的是 flex。...我们知道图片在旋转 (2n * 90)度在父元素的是一样的,((2n + 1) * 90) 度在父元素的是一样的。...所以我们只需要两组图片的宽和高要满足 不超出父元素 图片不能变形 在上面的条件下,图片只有有限的值可以选。...在 旋转 (2n * 90) 度的情况下 图片为父元素的,高度自适应 图片为父元素的,宽度自适应 在 旋转((2n + 1) * 90) 度的情况下 图片为父元素的,高度自适应 图片为父元素的...旋转后,需要从新设置图片

2K30

js 获取屏幕各种的方法(浏览器兼容)

屏幕的有效: window.screen.availHeight window.screen.availWidth 网页可见区域:document.body.clientWidth  网页可见区域...:document.body.clientHeight  网页可见区域:document.body.offsetWidth (包括边线的)  网页可见区域:document.body.offsetHeight...(包括边线的)  网页正文全文:document.body.scrollWidth  网页正文全文:document.body.scrollHeight  网页被卷去的:document.body.scrollTop...  网页被卷去的左:document.body.scrollLeft  网页正文部分上:window.screenTop  网页正文部分左:window.screenLeft  屏幕分辨率的:window.screen.height...  屏幕分辨率的:window.screen.width  屏幕可用工作区高度:window.screen.availHeight  屏幕可用工作区宽度:window.screen.availWidth

3.5K100

html背景图片的设置_网页的背景图片怎么设置

1.背景图片的插入方法 行内样式插入背景图: 在css样式表中引入背景图 注意:设置背景图片的元素一定要有具体的宽度和高度,否则会导致背景图片无法显示 2.背景图相关属性的设置 2.1 background-size...background-size: contain; } 通过contain和cover的展示效果可以明显看出来两者的差距 (3)设置具体值:根据自己的需要设置具体的宽和的值...,我们可以看一下上图,设置具体值以后,会默认将图片重复平铺满整个盒子。...,背景图不会产生缩放,会被裁切 容器空间大于图片时,在不缩放的前提下尽可能多的重复图片 当容器空间大于图片时: div{ width: 1000px; height

4.9K10

服务器端的图像处理 | 请召唤ImageMagick助你解忧

900x600 的图片 goods.jpg 生成为 150x100 的缩略图 thumbnail.jpg: 解释: -resize 150x100:定义输出的缩略图尺寸为 150x100 -quality...:不管图片如何,都缩放成 150x100 这样的尺寸 >:只有均大于 150x100 的图片才缩放成该尺寸 ( 按比例取最大值 ),小于的图片不做处理 功能相反 提示:因为有些字符是...:设置画布大小的一种简写方式,方括号里写入画布,注意要加 !...通过换行符分割,简单封装一个 Node.js 函数获取页数: 5.5、图片转 GIF 将所有与 frame-*.jpg 模式匹配的图像转换成一张 GIF 图像,如 frame-0.jpg,frame...以 这个PDF 为例,把它转换成图片,有两种方式达到我们想要的结果: 解释: 当转换 PDF 成 JPG 格式图像时,某些情况得到JPG 图片会出现黑色背景(转换成 PNG 不会),所以可以使用

3.1K10

不用第三方解码库取得图片 附完整C++算法实现代码

在特定的应用场景下,有时候我们只是想获取图片, 但不想通过解码图片才取得这个信息。 预先知道图片信息,进而提速图片加载,预处理等相关操作以提升体验。...http://stackoverflow.com/questions/15800704/python-get-image-size-without-loading-image-into-memory/ 不加图片到内存...项目地址:https://github.com/cpuimage/image_size 实现了 常用图片格式(png,jpeg,ico,bmp,gif) 不采用第三方解码库,解析得到图像的函数get_image_size_without_decode_image...printf("file:%s\nfilesize:%d\nwidth:%d\nheight%d\n", pic_file, filesize, w, h); getchar(); } 传入图片的位置...,输出对应的 为-1时,就是解析失败了。

1.3K60
领券