JavaScript获取图片尺寸

最新推荐文章于 2024-08-05 18:37:33 发布
最新推荐文章于 2024-08-05 18:37:33 发布
阅读量427 收藏
点赞数
分类专栏： JavaScript 文章标签： javascript image function xhtml html button

方法一:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>分享javascript-sharejs.com</title>
</head>
<body>

<script>
var img=null;
function s()
{
if(img)img.removeNode(true);
img=document．createElement("img");
img.style.position="absolute";
img.style.visibility="hidden";
img.attachEvent("onreadystatechange",orsc);
img.attachEvent("onerror",oe);
document．body.insertAdjacentElement("beforeend",img);
img.src=inp.value;
}
function oe()
{
alert("cant load img");
}
function orsc()
{
if(img.readyState!="complete")return false;
alert("高:"+img.offsetHeight+"\n宽:"+img.offsetWidth);
}
</script>
<input type="file" Name="file" id="inp" value="默认值"><br><input οnclick="s()" type="button" value="点我一下给出要上传图片的大小及长、宽" name="button">

<br><br>
</body>
</html>

方法二:
<html>  
<head>  
    <script >
 <!--  
    function QFord_getImageSize(FilePath)  
    {  
        var imgSize={  
        width:0,  
        height:0  
        };  
         image=new Image();  
        image.src=FilePath;  
        imgSize.width =image .width;  
        imgSize .height=image .height;  
        return imgSize;  
    }  
 // -->
 </script>  
</head>  
 
<body bgcolor="#ffffff">  
JS获取图片尺寸函数测试：</br>  
<img src="test.jpg" mce_src="test.jpg" />  
<script type="text/javascript">
<!--  
var a=QFord_getImageSize("test.jpg");  
alert('宽：'+a.width +'  高：'+a.height);  
// -->
</script>  
</body>  
</html> 
jqrsdsy
关注
专栏目录
JavaScript图片尺寸处理小结
BorisHuai前端修炼
10-26 2097
如何给图片设置宽高 1. 不作任何设置 如果不对图片设置宽高，则图片的显示的宽高就是图片的真实宽高。 2. 通过图片的宽高属性设置 可以通过img标签或者Image对象的width和height属性来设置宽高，比如： 或者 var image = new Image(); imag
JS上传图片时获取图片的尺寸
qq_38656496的博客
05-28 3307
上传图片时获取图片的尺寸 图片上传 目前主流的第三方插件都会提供Upload组件，也就是我们常说的文件上传插件，例如Element antd 等，他们都提供了beforeUpload ，用于做文件上传前的文件检查，比如说文件大小是否合适、图片的尺寸是否合适、文件类型是否符合要求 beforeUpload =(file) =>{ //首先判断是否是图片格式， const isImg ...
JavaScript获取图片的原始尺寸
冷江
03-25 573
原文地址 页面里的img元素，想要获取它的原始尺寸，以宽度为例可能首先想到的就是width，如下 1 2 3 4 5 <img src="http://img11.360buyimg.com/da/g14/M07/01/0E/rBEhVlNhh8wIAAAAAADmFBLo1twAAM26gOmCgYAAOYs7
用JavaScript获取原始图片尺寸
u014351353的专栏
05-28 537
在项目开发中，经常会遇到要出来图片的问题，图片大小？图片自适应页面，保证图片不变形，按比例缩放等等，所以获取图片的原始大小是一个非常重要的参考要诀。   页面里的img元素，想要获取它的原始尺寸，以宽度为例可能首先想到的就是width，如下：      var img = document.getElementsByTagName('img')[0]
javascript：检测图片的宽高
最新发布
u013938578的博客
08-05 583
JavaScript提供了非常方便的FileReader和Image对象，可以帮助我们轻松实现这个功能。在FileReader读取完成后，通过new Image()创建一个图片对象，并将其src属性设置为读取到的文件内容。当图片加载完成后，通过image.onload事件获取图片的宽度和高度，并进行尺寸判断。通过new FileReader()创建了一个FileReader对象。读取用户选择的文件，并转换为Data URL格式。监听文件输入框的变化事件，当用户选择文件时触发。选择了页面上的文件输入框。
js获取图片真实高度和宽度
qq_59562332的博客
07-04 330
小程序下获取网络图片信息需先配置download域名白名单才能生效。：后端处理，调用接口获取图片高度和宽度。
javascript图片大小图片尺寸代码
chengyue2007的专栏
10-11 293
&lt;title&gt;JS实现单击图片获取图片的原始尺寸代码 - www.webdm.cn&lt;/title&gt; &lt;img src="http://www.webdm.cn/themes/pic/webdm_logo.gif" onclick=alert('图片原始宽度为：'+GetImageWidth(this)+'\n图片原始高度为:'+GetImageHeight(thi...
javascript 获取图片尺寸及放大图片
10-26
本文将详细介绍如何在不设置图片宽高的情况下获取图片尺寸，并探讨一种利用IE私有属性防止图片放大失真的方法，以及Firefox和Chrome浏览器中可用的`naturalWidth`和`naturalHeight`属性来获取图片原始尺寸。...
JavaScript获取图片的原始尺寸以宽度为例
10-25
在JavaScript中，获取图片的原始尺寸，特别是宽度，是一个常见的需求。这主要涉及到网页中`<img>`元素的尺寸属性和HTML5中的新特性。原始尺寸指的是图片在未经任何CSS或JavaScript修改时的自然大小。以下是一些关于...
JavaScript简单获取页面图片原始尺寸的方法
10-22
总的来说，JavaScript通过`Image`对象获取图片原始尺寸是一种实用的技巧，它可以帮助开发者更好地控制页面布局，特别是在处理动态加载或响应式设计时。理解并掌握这种技术，能提升网页开发的效率和用户体验。
JavaScript获取图片真实大小代码实例
10-25
在图片未完全加载之前，浏览器并不知道其真实尺寸，因此`onload`是获取图片尺寸的正确时机。 接着，内容部分展示了具体的代码示例。这段代码首先使用jQuery选择器`$("#img_id")`获取页面上的图片元素。之后，通过...
原生js 保存图片到本地
u011250186的博客
07-05 745
<template> <div> <!--创建一个cavas 用来存放图片--> <canvas id="cavasimg" width="607" height="367" ></canvas> <!-- 声明一个按钮 用来触发下载图片到本地--> <input type="button" id="btnsavaImg" val...
学习DOM
m0_74217314的博客
10-11 340
DOM的学习
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;
insertAdjacentElement方法
百川异源，终归于海
05-07 745
<!-- alimama_pid="mm_11307516_1146824_2589042"; alimama_titlecolor="0000FF"; alimama_descolor ="000000"; alimama_bgcolor="FFFFFF"; alimama_bordercolor="E6E6E6"; alimama_linkcolor="0080
JS 获取图片的实际大小
记得抬头微笑
07-25 5561
根据图片链接获取图片大小,width/height let image = new Image() image.onload = function() { let width = image.width let height = image.height let fileSize = image.fileSize console.log(image)
使用JavaScript获取图像大小（高度和宽度）
qq_43067585的博客
06-19 2983
为了使用JavaScript获取图像大小（高度和宽度），可使用Element.clientHeight和Element.clientWidth属性。下面本篇文章就来给大家介绍一下，希望对大家有所帮助。 Element.clientHeight：我们可以使用此属性访问元素的内部高度。此高度包括填充，但不包括边距和边框。 Element.clientWidth：我们可以使用此属性访问元素的内部宽度。此宽度包括填充，但不包括边距和边框。 注意：这里的元素是image，所以image.clientheig
html 获取图片原始尺寸,JavaScript获取图片的原始尺寸以宽度为例
06-08
可以使用JavaScript来获取图片的原始尺寸，...注意：为了避免在获取图片尺寸时出现跨域问题，需要确保图片地址与当前页面的域名相同。如果图片地址与当前页面的域名不同，需要使用后端接口或者CORS技术来解决跨域问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值