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

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

第一次打印的結果為0是因為此時圖片還沒有被加載完成，在onload之后就可以正常獲取到圖片的寬高了。但是如果圖片資源比較大這個過程會稍微慢一些，我們可以做以下優化：

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

完！

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。