javascript 取得圖片尺寸及放大圖片_javascript技巧

1)取得圖片尺寸

複製碼 代碼如下:

<script> <BR>function getWH(t){ <BR>//DOM屬性</script>

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)取得圖片尺寸(不設定寬高)

複製程式碼


程式碼如下:



<script> <BR>function getWH(t){ <BR>//DOM屬性</script>

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的私有屬性防止圖片放大失真嚴重！

複製程式碼


程式碼如下:



<script> </script>

function getWH(t){
t.width *= 2; t.height *= 2; //每點一次，寬高放大一倍
}

4)在FF與谷歌中，我們還可以用naturalWidth與naturalHeight取得圖片的原大小！

複製程式碼


程式碼如下:



<script> <BR>function getWH(t){ </script>

console.log("width=" t.naturalWidth);
console.log("height=" t.naturalHeight );
t.width = t.naturalWidth * 2; t.height = t.naturalHeight * 2; } naturalWidth和naturalHeight只是只讀屬性，不能用來設定圖片的大小，不能持續放大。