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

創(chuàng)新互聯(lián)公司堅持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：成都做網(wǎng)站、網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時代的懷遠網(wǎng)站設(shè)計、移動媒體設(shè)計的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

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

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

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

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

getClientRects 和 getBoundingClientRect 的區(qū)別

getClientRects 返回一個TextRectangle集合，就是TextRectangleList對象。

getBoundingClientRect 返回 一個TextRectangle對象，即使DOM里沒有文本也能返回TextRectangle對象.

瀏覽器差異:

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

firefox 3.1給TextRectangle增加了 width 和 height。

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

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

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

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

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