JavaScript获取图片宽度和高度

最新推荐文章于 2024-08-05 18:37:33 发布

原创最新推荐文章于 2024-08-05 18:37:33 发布 · 175 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ViewUI

JavaScript 专栏收录该内容

32 篇文章

订阅专栏

本文介绍了一种使用JavaScript来获取网页中图片实际尺寸的方法。通过定义一个名为getSize的函数，该函数接受一个图片元素作为参数，并利用DOM操作创建新的img元素加载相同的源文件来获取其宽度和高度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<script>
function getSize(img)
{
    if(typeof(img)!='object')
        img=document.getElementById(img);
    if(img==null)
        return;
    var image=document.createElement("img");
    image.onload=function (){
        var width=this.width;
        var height=this.height;
                alert("width:"+width+" height:"+height)
    };
    image.src=img.src;
}
</script>

<img src="http://profile.youkuaiyun.com/dh20156/picture/2.jpg" width="1" height="1" onload="getSize(this)">

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

zbzhangzi

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

JS获取图片高度宽度的方法分享

10-24

主要介绍了JS获取图片高度宽度的方法，开始的时候没能做到兼容chrome，在度娘和众网友的帮助下，最终完成了完美兼容，这里分享给大家，有需要的小伙伴可以参考下。

Javascript获取图片原始宽度和高度的方法详解

10-21

本文将深入探讨如何有效地获取图片的原始宽度和高度，同时提供兼容不同浏览器的解决方案。首先，我们通常会尝试使用HTML元素的内置属性来获取尺寸，例如`img`元素的`innerWidth`属性。然而，`innerWidth`并不总是...

参与评论您还未登录，请先登录后发表或查看评论

php 获取图片的宽高,js如何获取图片宽高

weixin_31212247的博客

03-10

346

js获取图片宽高的方法：1、onload后在打印；2、通过complete与onload一起混合使用；3、通过定时循环检测获取，代码为【from:check : width:'+img.width+',height:'+img.heig】。本教程操作环境：windows7系统、css3版，DELL G3电脑。js获取图片宽高的方法：一、简陋的获取图片方式// 图片地址后面加时间戳是为了避免缓存v...

用js能得到图片的高度和长度

Border's log

06-30

1630

图片： var imgwidth; var imgheight; var imgObj = new Image(); imgObj.src = "d:/photo_temp.gif" ; imgwidth = imgObj.width; imgheight = imgObj.height; alert(imgwidth); alert(imgheight);

js获取图片真实高度和宽度

qq_59562332的博客

07-04

809

小程序下获取网络图片信息需先配置download域名白名单才能生效。：后端处理，调用接口获取图片高度和宽度。

JS获取img图片的原始尺寸高度和宽度

热门推荐

彭世瑜的博客

05-18

2万+

目录方式一：obj.style.width方式二：width/height方式三：offsetWidth/clientWidth方法四： getComputedStyle和 currentStyle方式五：Image对象方法六：naturalWidth方式七：兼容写法方式一：obj.style.width 通过img对象的style属性获取，如果没有设置style，将返回空 <img class="image" style="width: 100px; height: 200px;

js和jquery如何获取图片真实的宽度和高度

12-03

为了克服上述问题，可以使用JavaScript或jQuery动态获取图片加载后的实际宽度和高度。以下为两种实现方式： **jQuery 方式**： ```javascript var _w = parseInt($(window).width()); // 获取浏览器宽度 $(".new_...

JavaScript获取图片的原始尺寸以宽度为例

10-25

- 当不涉及CSS或JavaScript设置宽度时，可以通过直接访问`img`元素的`width`和`height`属性来获取图片的尺寸。例如，`img.offsetWidth`和`img.offsetHeight`会返回元素的实际渲染宽度和高度，包括边框和内边距。 2...

html js获取图片高度,js获取Html元素的实际宽度高度

weixin_30792221的博客

06-07

578

情况一：宽高都写在样式表里，即外部样式或嵌入式样式，比如#div1{width:120px;}。这种情况通过#div1.style.width拿不到宽度，而通过#div1.offsetWidth才可以获取到宽度。情况二：宽和高是写在行内中，即内联式样式，比如style="width:120px;"，这中情况通过上述2个方法都能拿到宽度。因为id.offsetWidth和id.offsetHeigh...

js快速获取图片宽高

xy1580的博客

07-05

644

加载图片获取信息

js获取图片原始宽高

Hi_MrXiao的博客

03-03

1343

使用HTML5属性 (naturalWidth, naturalHeight）和Image对象获取图片原始宽高

javascript：检测图片的宽高

最新发布

u013938578的博客

08-05

1105

JavaScript提供了非常方便的FileReader和Image对象，可以帮助我们轻松实现这个功能。在FileReader读取完成后，通过new Image()创建一个图片对象，并将其src属性设置为读取到的文件内容。当图片加载完成后，通过image.onload事件获取图片的宽度和高度，并进行尺寸判断。通过new FileReader()创建了一个FileReader对象。读取用户选择的文件，并转换为Data URL格式。监听文件输入框的变化事件，当用户选择文件时触发。选择了页面上的文件输入框。

js获取图片原始宽高、获取图片的原始尺寸

林中明月间丶

07-04

785

提示：适用于Firefox/IE9/Safari/Chrome/Opera浏览器。原始宽高、不是缩放后的。

JS获得要上传的图片的长度和宽度

weixin_30696427的博客

01-18

104

<html> <head> <title>显示上传图像的大小</title> <metahttp-equiv="Content-Type"content="text/html;charset=gb2312"> </head> <body> <FORMname=formaction...

JS 获取图片的实际大小

记得抬头微笑

07-25

5897

根据图片链接获取图片大小,width/height let image = new Image() image.onload = function() { let width = image.width let height = image.height let fileSize = image.fileSize console.log(image)

在js中如何得到上传文件的大小。

weixin_30270561的博客

12-31

136

<html> <head><script language="javascript"> function getSize() { var file = document.getElementById("upload").value;alert(file);var fso = new ActiveXObject("Scripti...

js获取图片宽高等数据

六国破灭，非兵不利，战不善，弊在赂秦。赂秦而力亏，破灭之道也。或曰：六国互丧，率赂秦耶？曰：不赂者以赂者丧，盖失强援，不能独完。故曰：弊在赂秦也。秦以攻取之外，小则获邑，大则得城。较秦之所得，与战胜而得者，其实百倍；诸侯之所亡，与战败而亡者，其实亦百

05-07

4239

一、根据图片链接url 来获取图片宽高 getImageSize(url) { return new Promise((resolve) => { var img = document.createElement("img"); img.src = url; img.onload = () => { // 为什么要写 onload 是因为要等他加载完之后才能获

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

大葱敏的博客

11-15

4415

javascript 快速获取图片实际大小的宽高简陋的获取图片实际宽高的方式// 图片地址 var img_url = '13643608813441.jpg'// 创建对象 var img = new Image()// 改变图片的src img.src = img_url// 打印 alert('width:'+img.width+',height:'+img.height);结果如下：宽高

js获取隐藏元素宽高的方法

weixin_34194087的博客

05-18

240

网上有一些js获取隐藏元素宽高的方法，但是可能会存在某些情况获取不了。例如： <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> &

js获取base64图片的宽度和高度

10-10

要获取 base64 图片的宽度和高度，你可以使用以下方法： 1. 创建一个新的 Image 对象。 2. 将 base64 图片赋值给 Image 对象的 src 属性。 3. 在 Image 对象的 onload 事件中，可以获取到图片的宽度和高度。下面是一个示例代码： ```javascript function getBase64ImageSize(base64data) { return new Promise((resolve, reject) => { const img = new Image(); img.onload = function() { resolve({ width: this.width, height: this.height }); }; img.onerror = function() { reject(new Error('Failed to load image')); }; img.src = base64data; }); } // 使用示例 const base64data = 'data:image/png;base64,iVBORw0KG...'; getBase64ImageSize(base64data) .then(size => { console.log('Width:', size.width); console.log('Height:', size.height); }) .catch(error => { console.error(error); }); ```