javascript 获取图片尺寸及放大图片

前端技术 2023/09/04 JavaScript
1)获取图片尺寸
复制代码 代码如下:

<img src=\"http://img.my.csdn.net/uploads/201309/03/1378223257_7957.jpg\" alt=\"MM\" title=\"MM(实际大小200*300)\" onclick=\"getWH(this)\" width=\"200\" height=\"300\"/>
<script>
function getWH(t){
//DOM属性
console.log(\"width=\"+t.width);//200
console.log(\"height=\"+t.height);//300
//操作样式
console.log(\"styleWidth=\"+t.style.width);//空
console.log(\"styleHeight=\"+t.style.height);//空
}

2)获取图片尺寸(不设置宽高)
复制代码 代码如下:

<img src=\"http://img.my.csdn.net/uploads/201309/03/1378223257_7957.jpg\" alt=\"MM\" title=\"MM(实际大小200*300)\" onclick=\"getWH(this)\"/>
<script>
function getWH(t){
//DOM属性
console.log(\"width=\"+t.width);//200
console.log(\"height=\"+t.height);//300
//操作样式
console.log(\"styleWidth=\"+t.style.width);//空
console.log(\"styleHeight=\"+t.style.height);//空
}

我们只要不在style中显式地设置它，宽高永远为空！

3)放大图片：

这里我们利用了IE的私有属性防止图片放大失真严重！
复制代码 代码如下:

<img src=\"http://img.my.csdn.net/uploads/201309/03/1378223257_7957.jpg\" alt=\"MM\" title=\"MM(实际大小200*300)\" onclick=\"getWH(this)\" width=\"200\" height=\"300\"/>
<script>
function getWH(t){
t.width *= 2;
t.height *= 2;
//每点击一次，宽高放大一倍
}
</script>

4)在FF与谷歌中，我们还可以用naturalWidth与naturalHeight取得图片的原大小！
复制代码 代码如下:

<img src=\"http://img.my.csdn.net/uploads/201309/03/1378223257_7957.jpg\" alt=\"MM\" title=\"MM(实际大小200*300)\" onclick=\"getWH(this)\" width=\"200\" height=\"300\"/>
<script>
function getWH(t){
console.log(\"width=\"+t.naturalWidth);
console.log(\"height=\"+t.naturalHeight);
t.width = t.naturalWidth * 2;
t.height = t.naturalHeight * 2;
}
</script>

naturalWidth和naturalHeight只是只读属性，不能用来设置图片的大小，不能持续放大。

本文地址：https://www.stayed.cn/item/10469

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案