javascript - 获取图像的宽度和高度而不将其保留在页面上

Question

我不需要 DOM 内的图像，但需要获取它的尺寸。

尝试以这种方式创建临时 img 元素:

let src = 'images/01.jpg';
let img = document.createElement('img');
img.src = src;
let w = img.naturalWidth;
let h = img.naturalHeight;
console.log(w); // 0
console.log(h); // 0
$(img).remove();

结果是0和0。实际尺寸为 1349 和 250。

如何在不影响现有页面布局的情况下获取它们？

Answer 1

您必须等待图像加载:

let src = 'http://www.fillmurray.com/g/200/300';
let img = document.createElement('img');
img.onload = () => {
  console.log(img.naturalWidth);
  console.log(img.naturalHeight);
}
img.src = src;

在加载之前，浏览器无法知道图像的尺寸。如果您需要另一个函数中的维度，则必须使用回调参数或返回 Promise:

let src = 'http://www.fillmurray.com/g/200/300';

// with a callback
const loadImgCallback = (url, callbackFn) => {
  let img = document.createElement('img');
  img.onload = () => { callbackFn(img); }
  img.src = src;
}

// with Promise
const loadImgPromise = url => new Promise((ok, fail) => {
  let img = document.createElement('img');
  img.onload = () => { ok(img); }
  img.onerror = fail;
  img.src = url;
});




/* === USAGE EXAMPLES === */
loadImgCallback(src, img => {
  console.log(`callback, naturalWidth: ${img.naturalWidth}`);
  console.log(`callback, naturalHeight: ${img.naturalHeight}`)
});

loadImgPromise(src).then(img => {
  console.log(`Promise, naturalWidth: ${img.naturalWidth}`);
  console.log(`Promise, naturalHeight: ${img.naturalHeight}`)
});

您可以自行决定选择哪种解决方案。