An Image's sizes

README.md

An Image's sizes

view on jsgist

index.css

pre { margin: 0; }

index.html

/*bug-in-github-api-content-can-not-be-empty*/

index.js

async function main() {
  const img = new Image();
  document.body.appendChild(img);

  img.src = 'https://greggman.github.io/placeholders/images/200x100.jpg'
  await img.decode();
  logImageData(img, 'load a 200x100 image');

  img.src = 'https://greggman.github.io/placeholders/images/100x50.jpg'
  await img.decode();
  logImageData(img, 'load a 100x50 image');

  img.width = 250;
  img.height = 150;
  logImageData(img, 'set the width, height to 250x150');

  img.src = 'https://greggman.github.io/placeholders/images/300x200.jpg'
  await img.decode();

  logImageData(img, 'load a 300x200 image');
};

function logImageData(img, msg) {
  log('-----:', msg);
  log('img.src', img.src);
  log('img.width', img.width);
  log('img.height', img.height);
  log('img.naturalWidth', img.naturalWidth);
  log('img.naturalHeight', img.naturalHeight);
  log('img.clientWidth', img.clientWidth);
  log('img.clientHeight', img.clientHeight);
  log(' ');
}

function log(...args) {
  const elem = document.createElement('pre');
  elem.textContent = args.join(' ');
  document.body.appendChild(elem);
}

main();

jsGist.json

{"name":"An Image's sizes","settings":{},"filenames":["index.html","index.css","index.js"]}