js怎么獲取圖像縮放后的實(shí)際位置

這篇文章主要介紹了js怎么獲取圖像縮放后的實(shí)際位置，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

項(xiàng)目中遇到圖片實(shí)際顯示尺寸的判定問(wèn)題,圖片可能被縮放過(guò),所以實(shí)際顯示的寬高無(wú)法通過(guò)常見(jiàn)的各種width,height拿到(都是得到圖像的自然寬度或者字面寬度,并非實(shí)際顯示結(jié)果)

在網(wǎng)上百度了一大圈也沒(méi)有找到,今天早上偶然找到2個(gè)很方便的方法:

object.getClientRects();和object.getBoundingClientRect();

可以輕易獲得當(dāng)前元素的絕對(duì)位置(不含scrollLeft和scrollTop,需要用的話(huà)單獨(dú)加上去)和顯示出來(lái)的實(shí)際寬高

getClientRects 和 getBoundingClientRect 的區(qū)別

getClientRects 返回一個(gè)TextRectangle集合，就是TextRectangleList對(duì)象。

getBoundingClientRect 返回 一個(gè)TextRectangle對(duì)象，即使DOM里沒(méi)有文本也能返回TextRectangle對(duì)象.

瀏覽器差異:

除了safari，firefox2.0外所有瀏覽器都支持getClientRects和getBoundingClientRect，

firefox 3.1給TextRectangle增加了 width 和 height。

ie 和非ie瀏覽器在使用getClientRects還是有些差別的，ie獲取TextRectangleList的范圍很大。而非ie獲取的范圍比較小， 只有display:inline的對(duì)象才能獲取到TextRectangleList，例如em i span 等標(biāo)簽。

通過(guò)測(cè)試，至少Chrome 2+\Safari 4\Firefox3.5\0pera 9.63+已經(jīng)支持getBoundingClientRect方法。

出于瀏覽器兼容的考慮，現(xiàn)在用得最多的是getBoundingClientRect，經(jīng)常用來(lái)獲取一個(gè)element元素的viewport坐標(biāo)。

MDN關(guān)于getBoundingClientRect的詳細(xì)介紹:https://developer.mozilla.org/zh-CN/docs/Web/API/Element/getBoundingClientRect

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“js怎么獲取圖像縮放后的實(shí)際位置”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!