Get image size / dimensions via JS

Technical Questions
1

Hi,

i have a content input field of type image.
Is it possible to get the size (dimensions) of the image via javascript?

2

Hi @Detzler,

If you are required to get image dimensions client-side
You can try something like below

<script>
      let img = document.createElement('img');
      img.id = 'imgId';
      img.src = '/uploads/media/default/0001/05/e9f3899d915c17845be51e839d5ba238f0404b07.png';
      document.body.appendChild(img);
      img.addEventListener("click", imgSize);
      function imgSize() {
        let myImg = document.querySelector("#imgId");
        let realWidth = myImg.naturalWidth;
        let realHeight = myImg.naturalHeight;
        alert("Original width=" + realWidth + ", " + "Original height=" + realHeight);
      }
</script>

You may not be able to get the actual size but you can set height-width using our content API. You can now access your image URL programmatically using the Content API. The following example uses Builder’s JavaScript SDK:

// For a CMS Data model named 'user', querying a user profile
// with the username 'cparker'.
const content = await builder
  // Replace the model name and options object with your own
  // model name and query options.
  .get('user', { query: { 'data.username': 'cparker' } })
  .toPromise();

// Your uploaded image's URL is available on your File field.
const imageUrl = content.data.avatar;

// Create variants by adding Image API query parameters.
const variantUrl = `${imageUrl}?height=200`

For more info, you can refer to our doc Image API

Let us know if above doesn’t help. Thank you!