Member Avatar for Deepa

how to calculate the heigth,width and size of a image using javascript

  • 2 Contributors
  • 5 Replies
  • 292 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by js-x.com

Dani AI

Generated

Short summary and practical approach — historical note, modern solution.

As asked about height, width and size: was correct that early browsers did not let scripts inspect a selected file before upload. Modern browsers expose the File API so a chosen file is available to client JavaScript (name/type/size) and its bytes can be read in the page; that makes it possible to get the file size and the image's intrinsic dimensions before you send anything to the server. (developer.mozilla.org)

A minimal client‑side pattern (on the file input change event): read the File object, use its size for file size, create a blob URL for the File and load an Image from that URL; when the Image fires onload read naturalWidth/naturalHeight. Revoke the blob URL when done. Example:

// assumes an <input id="imgInput" type="file" accept="image/*">
const input = document.getElementById('imgInput');

input.addEventListener('change', () => {
  const file = input.files && input.files[0];
  if (!file) return;

  console.log('size bytes:', file.size);

  const img = new Image();
  img.onload = () => {
    console.log('intrinsic:', img.naturalWidth, 'x', img.naturalHeight);
    URL.revokeObjectURL(img.src);
  };
  img.src = URL.createObjectURL(file);
});

This uses blob/object URLs and the image element's natural size; you can also use FileReader.readAsDataURL if you prefer a data: URL approach. (developer.mozilla.org)

If you must support very old browsers that lack the File API, fall back to server-side inspection (for example PHP's getimagesize after upload). For production, always validate file type/size server-side as well. Browser support for the File API is widespread today but not universal on very old browsers. (caniuse.com)

Quick tips: verify file.type starts with "image/"; convert file.size to KB/MB for display; watch out for EXIF orientation (it can affect reported or rendered orientation — handle by reading EXIF or using canvas/CSS corrections); always revoke object URLs to avoid leaks. ()

Member Avatar for js-x.com

if:

<img src="abc.gif" name=myimg>

then:
* document.myimg.width
* document.myimg.src

same syntax for:
border, complete, height, vspace, lowsrc, name, src, vspace, width

methods:
handleEvent()

events:
onAbort, onError, onKeyDown, onKeyPress, onKeyUp, onLoad

1000s of Free Javascripts

Member Avatar for Deepa

if the image src is in a text box,then how to calculate width,height,Size of then image

Member Avatar for js-x.com

if the image src is in a text box,then how to calculate width,height,Size of then image

Post the code of your image.


www.js-x.com
www.js-x.com/forum/

Member Avatar for Deepa

this the code
from this path how to calculate the image height and width using javascript
Photo path:<input class="Message" id="filePicture" type="file" name="file" runat="server">

Member Avatar for js-x.com

you can not.

this code is going to accept an image file which has not been posted to the server yet, nor is it running inside of the DOM.

If you had the image in your page <img src="blah.gif" name="abc"> then it would be accessable inside of the DOM.

There are PHP and Perl [etc] programs that can accept the posted images and determine the sizes...

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.