JSFiddle - React, Tailwind, and code Playground

by brigand

HTML

<!DOCTYPE HTML>
<html>

  <head>
  </head>

  <body>
    <div id=dim>Dimensions</div>
    <script>
      var can_w = 100;
      var can_h = 100;

      var imageObj = new Image();
      imageObj.src = 'https://i.imgur.com/DnLvgux.png';
      imageObj.onload = function() {
        console.log("onload dimensions: " + imageObj.width + "x" + imageObj.height);

        can_w = imageObj.naturalWidth;
        can_h = imageObj.naturalHeight;


        console.log("can dimensions: " + can_w + "x" + can_h);

        var dim = document.getElementById('dim');
        dim.textContent = 'Dimensions are: ' + can_w + 'x' + can_h;
        dim.style.width = can_w + "px";
        dim.style.height = can_h + "px";

      };

    </script>
  </body>

</html>

CSS

#dim {                                 
border: 1px solid black;               
background-color: gray;                
width: 10px;                           
height: 50px;                          
}