資訊專欄INFORMATION COLUMN
摘要：簡(jiǎn)介和是新增的屬性，它們可以直接獲取圖片的原始寬高。結(jié)果可以使用和去獲取圖片的原始尺寸，考慮的兼容問題，可以采用去獲得圖片的原始尺寸代碼如下使用該方法可以獲取圖片的原始尺寸，通常在圖片放大縮小，動(dòng)態(tài)生成圖片處需要用到該方法
naturalWidth和naturalHeight是html5新增的屬性，它們可以直接獲取圖片的原始寬高。而且這在Fixefox/Chrome/Safari/Opera/IE9里已經(jīng)實(shí)現(xiàn)。
看看naturalWidth和naturalHeight在各大瀏覽器中兼容性如下：
圖片截取自：http://caniuse.com/#search=na...
頁面中的img元素想要獲取圖片的原始尺寸通常使用innerWidths屬性或者使用jQuery的width()方法，
但是如果給圖片添加了width樣式，那么用innerWidth或width()獲得寬度是不是你想要的，因?yàn)閕nnerWidth或width()獲取的是元素盒模型的實(shí)際渲染的寬度，而不是圖片的原始寬度。
可以使用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;
}
使用該方法可以獲取圖片的原始尺寸，通常在圖片放大縮小，動(dòng)態(tài)生成圖片處需要用到該方法！
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/91192.html
摘要：基本使用返回的是一個(gè)集合需要重新遍歷為了顯示的圖片引入了原尺寸為的圖片順序不能變啟動(dòng)打開監(jiān)聽事件跳轉(zhuǎn)頁面關(guān)閉順序改變監(jiān)聽事件將無法監(jiān)聽多個(gè)的使用方法爬取數(shù)組上的所有圖片，并返回其真實(shí)寬高此方法大致參考了上的答案 基本使用 use strict; const puppeteer = require(puppeteer); (async () => { const browser =...
摘要：但由于翻譯時(shí)草稿只發(fā)布了不到二十天，本文有很好的時(shí)效性。語法中同時(shí)定義了解析規(guī)則包括異常的處理方式。語法要求聲明，以確保瀏覽器以標(biāo)準(zhǔn)模式渲染頁面。語法中的聲明為，不區(qū)分大小寫。此外，僅允許一些標(biāo)簽上的屬性設(shè)置。 本文選譯自：W3C Working Group Note: HTML5 Differences from HTML4。 解釋一下W3C Working Group Note，...
摘要：移動(dòng)端報(bào)表使用方法安裝好插件后，在瀏覽器中調(diào)用時(shí)，需要在報(bào)表路徑后面加上參數(shù)。另外移動(dòng)端的插件，圖表是只支持顯示新圖表。 HTML5報(bào)表插件安裝及使用編輯 插件安裝插件網(wǎng)址以及設(shè)計(jì)器插件安裝方法和服務(wù)器安裝插件的方法可以官網(wǎng)上面搜索，這里就不做詳細(xì)介紹了。 移動(dòng)端HTML5報(bào)表使用方法安裝好插件后，在瀏覽器中調(diào)用時(shí)，需要在報(bào)表路徑后面加上參數(shù)op=h5。但是PC端不完全支持H5效果。移...
閱讀 3352·2021-11-22 15:22
閱讀 2877·2021-10-12 10:12
閱讀 2171·2021-08-21 14:10
閱讀 3837·2021-08-19 11:13
閱讀 2856·2019-08-30 15:43
閱讀 3238·2019-08-29 16:52
閱讀 456·2019-08-29 16:41
閱讀 1444·2019-08-29 12:53
