js獲取圖片寬高代碼片段如下：

// 獲取到url地址中帶的imgUrl參數(shù)(request是自定義方法) var imgUrl = request("imgUrl"); // 創(chuàng)建Image對(duì)象 var img = new Image(); // 改變圖片的src img.src = imgUrl; // 第一次打印圖片的寬高 console.log(img.width); // 結(jié)果為0 console.log(img.height); // 結(jié)果為0 // 圖片資源加載完成執(zhí)行 img.onload = function(){// 第二次打印圖片的寬高console.log(img.width); // 結(jié)果為320console.log(img.height); // 結(jié)果為180 };

第一次打印的結(jié)果為0是因?yàn)榇藭r(shí)圖片還沒(méi)有被加載完成，在onload之后就可以正常獲取到圖片的寬高了。但是如果圖片資源比較大這個(gè)過(guò)程會(huì)稍微慢一些，我們可以做以下優(yōu)化：

// 獲取到url地址中帶的imgUrl參數(shù)(request是自定義方法) var imgUrl = request("imgUrl"); // 創(chuàng)建Image對(duì)象 var img = new Image(); // 改變圖片的src img.src = imgUrl; // 判斷是否有緩存 if (img.complete) {// 刷新時(shí)通過(guò)complete從緩存快速獲取寬高console.log(img.width); // 結(jié)果為320console.log(img.height); // 結(jié)果為180 } else {// 圖片資源加載完成執(zhí)行img.onload = function(){// 第一次加載通過(guò)onload獲取寬高console.log(img.width); // 結(jié)果為320console.log(img.height); // 結(jié)果為180}; }

完！

總結(jié)

以上是生活随笔為你收集整理的js获取图片宽高的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。