导航:首页 > 编程语言 > js获取本地图片的宽高

js获取本地图片的宽高

发布时间:2022-09-28 07:34:46

A. js获取图片大小(长宽)问题

可以配合JS来实现获到本地磁盘图片文件的相关属性,请参照天南(QQ:46926125)提供的DEMO: ##Code##
<script language="javascript">
function insertTitle(tValue){
var t1 = tValue.lastIndexOf("\\");
var t2 = tValue.lastIndexOf(".");
if(t1 >= 0 && t1 < t2 && t1 < tValue.length){
document.getElementById("pTitle").value = tValue;
document.getElementById("pTitlel").value = tValue.substring(t1 +1);
document.getElementById('guo').innerHTML="<img id='demo_img' src='"+tValue+"' />"
document.getElementById('imgc_width').value=document.getElementById('demo_img').width;
document.getElementById('imgc_height').value=document.getElementById('demo_img').height;
}
}
</script>
<form action="" method="get" onSubmit="return false;">
<input type="text" name="pTitle">
<input type="text" name="pTitlel">
<input type="file" name="pFile" onChange="if(this.value){insertTitle(this.value)};">
<input type="submit" value="submit">
</form>

图片宽:<input type="text" id="imgc_width" />px

图片高:<input type="text" id="imgc_height" />px

<hr />
<div id="guo"></div>

B. 怎么用js获取图片宽高并写入html代码

<!DOCTYPEhtml>
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metacharset="utf-8"/>
<title>获取Element中图片的属性</title>
</head>
<body>

<imgsrc="https://gss0.bdstatic.com/7051cy792sgCpNKfpU_Y_D3/static/common/widget/search-box-new/img/logo-new-101_bba4ab1.png"/>

<!--图片信息容器-->
<div></div>

<scripttype="text/javascript">
varimg=document.images[0];
vardiv=document.getElementsByTagName('div')[0];
//向div容器写入图片信息
div.innerHTML='图片的宽度是:'+img.width+'图片的高度是:'+img.height;
</script>
</body>
</html>

C. js能不能获取图片的大小

当然可以,假设网页上有这样一个图片

<imgid="myimg"src="1.jpg">

使用如下 JS 代码获取图片宽高

varmyimg=document.getElementById('myimg');
console.log(myimg.width+''+myimg.height);

但是如果图用CSS设置过尺寸,比如图片原尺寸是 256px * 256px,然后用 CSS 设置为 64px * 64px 上面的代码获得的尺寸就是 64px * 64px 。如果想获得图片原尺寸的话,可以使用如下代码

varmyimg=document.getElementById('myimg');
varnewimg=document.createElement('img');
newimg.src=myimg.src;
console.log(newimg.width+''+newimg.height);//这里就是图片原始宽高了。

D. js如何获取图片的高和宽根据我的部分代码添加完善,谢谢!

用我的这个代码你测试下!

<script>
var flag=false;
function DrawImage(ImgD,FitWidth,FitHeight){
var image=new Image();
image.src=ImgD.src;
if(image.width>0 && image.height>0){
flag=true;
if(image.width/image.height>= FitWidth/FitHeight){
if(image.width>FitWidth){
ImgD.width=FitWidth;
ImgD.height=(image.height*FitWidth)/image.width;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
}
else{
if(image.height>FitHeight){
ImgD.height=FitHeight;
ImgD.width=(image.width*FitHeight)/image.height;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
}
}
}
</script>
---------------------------------------------------------------
调用:
<img border=0 src=123.jpg onload="javascript:DrawImage(this,500,400);">
其中:宽=500,高=400 可以修改.

E. JS获取图片宽高,急急急~

var img = new Image();
img.onload = function(){
宽度=this.width
高度=this.height
}
img.src = 图片地址;

F. js 获取图片尺寸

img有onload属性,在图片加载完成时执行,这时候图片实际高度宽度可读取,从而实现自动获取宽高。

<imgid="img"src="1.jpg"onload="fn()"/>
<script>
varfn=function(){
//你的代码
}
</script>

G. Js获取图片原始宽高的实现代码

如果我们页面看到的图片都是缩略图,那就需要做个图片点击放大效果,那么怎样获取图片的原始宽高呢?方法如下:
//获取图片原始宽度
function
getNaturalWidthAndHeight(img)
{
var
image
=
new
Image();
image.src
=
img.src;
return
[image.width,image.height];
}
//点击缩略图弹出层,显示原始图片。
//获取class为tz_main_box下的所有p标签下的图片img
$(".tz_main_box
p>img").each(function
(k,
v)
{
$(this).unbind("click");
//解除绑定,防止弹出多次图片层。
$(this).click(function
()
{
var
img
=
v;
//图片对象
var
imgArea
=
getNaturalWidthAndHeight(img);
var
layerWidth
=
imgArea[0]+
5;
if
(layerWidth
>
1080)
{
layerWidth
=
1080;
}
var
layerHeight
=
imgArea[1]
+
5;
if
(layerHeight
>
600)
{
layerHeight
=
600;
}
//layer弹出层插件
layer.open({
type:
1,
title:
false,
closeBtn:
0,
area:
[''+layerWidth+'px',
''
+
layerHeight
+
'px'],
skin:
'layui-layer-nobg',
//没有背景色
shadeClose:
true,
closeBtn:
1,
//显示关闭按钮
content:
"<center><img
src='"
+
$(this).attr("src")
+
"'></center>"
});
});
});
以上这篇Js获取图片原始宽高的实现代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

H. js如何获取图片显示时的大小尺寸

给img添加加载事件,图像加载完成才能获取图片的尺寸。
html中添加回onload
function showSize(img){
alert(img.width);
alert(img.height);
}
<div style="width:100px;height:600px"><img src="1.jpg" onload="showSize(this)"></div>
或者答js代码中添加onload
let img=document.querySelector("div img");
img.onload = function() {
alert(img.height);
alert(img.width);
}

I. js怎么获取div中图片的宽高,例如

亲,直接获取该图片后style.width就可以了,获取图片img用getElementsByTagName或者给img加个id用getElementsById获取

J. js 检查图片尺寸

如何获取图片的原始尺寸大小?

如下,当给 img 设置一个固定的大小时,要怎样获取图片的原始尺寸呢?

#oImg{
width: 100px;
height: 100px;
}
<img src="images/test.jpg" id="oImg" alt="">

方法一:

HTML5提供了一个新属性 naturalWidth / naturalHeight 可以直接获取图片的原始宽高。这两个属性在Firefox/Chrome/Safari/Opera及IE9里已经实现。

w = document.getElementsByTagName("img")[0].naturalWidth;
h = document.getElementsByTagName("img")[0].naturalHeight;
console.log(w + ' ' + h);

打印出来的结果与原始尺寸相符。但有个前提是,必须在图片完全下载到客户端浏览器才能判断。

如果是不支持的版本浏览器,那可以用传统方法判断,如下:

var img = document.getElementById("oImg"),
w,h;if (oImg.naturalWidth) {// HTML5 browsersw = oImg.naturalWidth;
h = oImg.naturalHeight;
} else {// IE 6/7/8var nImg = new Image();// nImg.src = oImg.src;nImg.onload = function () {
w = nImg.width;
h = nImg.height;
console.log(w + " " + h)
}
nImg.src = oImg.src;}

此时为什么要加 onload 的原因是,图片可能没加载完成,导致图片的 width 、height 无法获取到。

这里还有有个点要注意,nImg.src = oImg.src 这段代码为什么要放在 nImg.onload 函数后面? 这样做是为了兼容 ie 。ie 除了第一次加载图片时候获取正常,之后再刷新就没有反应了。其他大部分浏览器获取正常。这是什么原因呢?

原因也挺简单的,就是因为浏览器的缓存了。当图片加载过一次以后,如果再有对该图片的请求时,由于浏览器已经缓存住这张图片了,不会再发起一次新的请求,而是直接从缓存中加载过来。对于大部分浏览器,它们视图使这两种加载方式对用户透明,同样会引起图片的onload事件,而 ie 则忽略了这种同一性,不会引起图片的onload事件。。。一般情况下,可以用 complete 来判断图片是否加载完毕。对于 complete 属性来讲,IE是根据图片是否显示过来判断,就是说当加载的图片显示出来后,complete 属性的值才为true ,否则一直是false ,和以前是否加载过该张图片没有关系,即和缓存没有关系!可以写如下的函数来做到各个浏览器中预加载图片的兼容性。如下:

var img = document.getElementById("oImg"),
w,h;if (oImg.naturalWidth) {
// HTML5 browsersw = oImg.naturalWidth;
h = oImg.naturalHeight;
} else {
// IE 6/7/8var nImg = new Image();
nImg.src = oImg.src;
if(nImg.complete) { // 图片已经存在于浏览器缓存console.log(nImg.width + " " + nImg.height);
}else{
nImg.onload = function () {
w = nImg.width;
h = nImg.height;
console.log(w + " " + h);
}
}
}

最后封装成函数,如下:

function getImgNaturalDimensions(oImg, callback) {var nWidth, nHeight;
if (!oImg.naturalWidth) { // 现代浏览器nWidth = oImg.naturalWidth;
nHeight = oImg.naturalHeight;
callback({w: nWidth, h:nHeight});

} else { // IE6/7/8var nImg = new Image();

nImg.onload = function() { var nWidth = nImg.width,
nHeight = nImg.height;
callback({w: nWidth, h:nHeight});
}
nImg.src = oImg.src;
}
}
var img = document.getElementById("oImg");getImgNaturalDimensions(img, function(dimensions){
console.log(dimensions.w);
});

方法二:(图片不需要再页面中展示)

将 img 放在页面中不可见的位置上,缺点是:这种方法需要浏览器加载这张图片

.imgbox{// img 盒子width: 0;
overflow: hidden;
}

然后在去取图片宽高等信息:

function getImgNaturalDimensions2(oImg) {var nWidth, nHeight;if (!oImg.naturalWidth) { // 现代浏览器nWidth = oImg.naturalWidth;
nHeight = oImg.naturalHeight;return ({w: nWidth, h:nHeight});
} else { // IE6/7/8nWidth = oImg.width;
nHeight = oImg.height;return ({w: nWidth, h:nHeight});
}
}var getImg = getImgNaturalDimensions2(img);
console.log(getImg)

然而,到这里,是不是万事大吉了呢?答案当然是否定的。

你用这种方法做后,会发现你有时可以取得 img 的 width、height ,但有时会是个 0。原因见下节分析。

我们先看如何正常去取吧!

var img = document.getElementById("oImg");
img.onload = function(){ //方法一 getImgNaturalDimensions(img, function(dimensions){
console.log(dimensions.w);
}); //方法二
var getImg = getImgNaturalDimensions2(img);
console.log(getImg);
}

只需在 img.onload 函数内去调用函数。

阅读全文

与js获取本地图片的宽高相关的资料

热点内容
彩票手机版本挂机软件 浏览:326
网上安装xp系统 浏览:965
codetank代码 浏览:737
企业网站推广的方法是什么 浏览:226
正常手机数据网络多少正常 浏览:76
怎么网络查询电费 浏览:638
数据库中的view 浏览:138
如何一次多选多行数据 浏览:140
苹果手机系统最安全吗 浏览:537
政企大数据 浏览:470
高光荣大数据技术 浏览:538
江苏美德好少年电子文件的内容 浏览:12
桌面文件夹显示四个 浏览:374
电脑重新系统后桌面文件恢复 浏览:831
哪个短视频app可以放大 浏览:770
刷宝app怎么上传作品 浏览:893
少儿编程需准备什么电脑 浏览:945
邻家女孩07版本下载 浏览:350
自学编程哪个程序好 浏览:253
不知道密码怎么撤销工作表保护 浏览:88