Vue 中要獲取圖片的原始尺寸,可以通過以下代碼實現(xiàn):
let img = new Image() img.onload = function() { console.log('圖片寬度:',this.width) console.log('圖片高度:',this.height) } img.src = '圖片鏈接'
以上代碼中,用 new Image() 創(chuàng)建了一個圖片對象,然后給該對象的 onload 事件綁定了一個回調函數(shù)。當圖片加載完成后,回調函數(shù)會被觸發(fā),此時就可以通過 this.width 和 this.height 獲取原始尺寸。
另外,如果要獲取某個具體元素內部圖片的尺寸,可以先獲取該元素的 DOM 對象,然后通過 getElementsByTagName 方法獲取該元素內部的所有圖片元素。接著遍歷每個圖片元素,將圖片鏈接傳入創(chuàng)建的 Image 對象中即可:
let elem = document.getElementById('某個元素id') let imgs = elem.getElementsByTagName('img') for(let i=0; i<imgs.length; i++) { let img = new Image() img.onload = function() { console.log('圖片寬度:',this.width) console.log('圖片高度:',this.height) } img.src = imgs[i].src }
通過上面的操作,就可以獲取到每個圖片元素的原始尺寸了。
上一篇vue獲取地址
下一篇ajax異步傳輸怎么回事