Js獲取圖片原始寬高的實(shí)現(xiàn)代碼

    下面小編就為大家?guī)硪黄狫s獲取圖片原始寬高的實(shí)現(xiàn)代碼。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考
    如果我們頁面看到的圖片都是縮略圖，那就需要做個圖片點(diǎn)擊放大效果，那么怎樣獲取圖片的原始寬高呢？方法如下：
    //獲取圖片原始寬度
    function getNaturalWidthAndHeight(img) {
    var image = new Image();
    image.src = img.src;
    return [image.width,image.height];
    }
    //點(diǎn)擊縮略圖彈出層，顯示原始圖片。
    //獲取class為tz_main_box下的所有p標(biāo)簽下的圖片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獲取圖片原始寬高的實(shí)現(xiàn)代碼就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考