html5中新屬性naturalWidth/naturalHeight的用法

jiekechoo 發布于2019-08-22 10:45 / 1057人閱讀

摘要：簡介和是新增的屬性，它們可以直接獲取圖片的原始寬高。結果可以使用和去獲取圖片的原始尺寸，考慮的兼容問題，可以采用去獲得圖片的原始尺寸代碼如下使用該方法可以獲取圖片的原始尺寸，通常在圖片放大縮小，動態生成圖片處需要用到該方法

簡介

naturalWidth和naturalHeight是html5新增的屬性，它們可以直接獲取圖片的原始寬高。而且這在Fixefox/Chrome/Safari/Opera/IE9里已經實現。

看看naturalWidth和naturalHeight在各大瀏覽器中兼容性如下：

圖片截取自：http://caniuse.com/#search=na...

原因

頁面中的img元素想要獲取圖片的原始尺寸通常使用innerWidths屬性或者使用jQuery的width()方法，
但是如果給圖片添加了width樣式，那么用innerWidth或width()獲得寬度是不是你想要的，因為innerWidth或width()獲取的是元素盒模型的實際渲染的寬度，而不是圖片的原始寬度。

結果

可以使用naturalWidth和naturalHeight去獲取圖片的原始尺寸，考慮的兼容問題，可以采用new Image()去獲得圖片的原始尺寸：
代碼如下：

function  getNaturalSize(img){
        var naturalSize ={};
        if(window.naturalWidth && window.naturalHeight){
            naturalSize.width = img.width;
                naturalSize.height = img.height;
        }else{
            var image = new Image();
            image.src = img.src;
            naturalSize.width = image.width;
            naturalSize.height = image.height;
        }
        return naturalSize;
    }

使用該方法可以獲取圖片的原始尺寸，通常在圖片放大縮小，動態生成圖片處需要用到該方法！

云服務器 GPU云服務器 html5的屬性 html5的文字屬性 html5的一些屬性 html5 畫布用法

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/91192.html

puppeteer 多URL爬取

摘要：基本使用返回的是一個集合需要重新遍歷為了顯示的圖片引入了原尺寸為的圖片順序不能變啟動打開監聽事件跳轉頁面關閉順序改變監聽事件將無法監聽多個的使用方法爬取數組上的所有圖片，并返回其真實寬高此方法大致參考了上的答案基本使用 use strict; const puppeteer = require(puppeteer); (async () => { const browser =...

focusj 2019-08-23 17:06 評論0 收藏0
翻譯：HTML5與HTML4的區別

摘要：但由于翻譯時草稿只發布了不到二十天，本文有很好的時效性。語法中同時定義了解析規則包括異常的處理方式。語法要求聲明，以確保瀏覽器以標準模式渲染頁面。語法中的聲明為，不區分大小寫。此外，僅允許一些標簽上的屬性設置。本文選譯自：W3C Working Group Note: HTML5 Differences from HTML4。解釋一下W3C Working Group Note，...

Null 2019-08-01 14:44 評論0 收藏0
FineReport中如何安裝移動端H5插件

摘要：移動端報表使用方法安裝好插件后，在瀏覽器中調用時，需要在報表路徑后面加上參數。另外移動端的插件，圖表是只支持顯示新圖表。 HTML5報表插件安裝及使用編輯插件安裝插件網址以及設計器插件安裝方法和服務器安裝插件的方法可以官網上面搜索，這里就不做詳細介紹了。移動端HTML5報表使用方法安裝好插件后，在瀏覽器中調用時，需要在報表路徑后面加上參數op=h5。但是PC端不完全支持H5效果。移...

bovenson 2019-08-20 15:52 評論0 收藏0