下面小編就為大家?guī)硪黄狫s獲取圖片原始寬高的實現(xiàn)代碼。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考

如果我們頁面看到的圖片都是縮略圖，那就需要做個圖片點擊放大效果，那么怎樣獲取圖片的原始寬高呢？方法如下：

//獲取圖片原始寬度

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, //顯示關(guān)閉按鈕

content: "<center><img src='" + $(this).attr("src") + "'></center>"

});

});

});

以上這篇Js獲取圖片原始寬高的實現(xiàn)代碼就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考