How to Determine the Original Image Size After Client-Side Resizing Across Browsers?

Determining the Original Image Size Cross-Browser

Determining the original physical dimensions of an image that has been resized client-side can be a cross-browser challenge. However, there are reliable and framework-independent methods to achieve this:

Option 1: Dynamic Image Dimension Reading

Remove any predefined width and height attributes from the image HTML element. The system will automatically adjust the dimensions to fit display needs. Subsequently, utilize JavaScript to access the element's offsetWidth and offsetHeight properties, which represent the resized width and height.

Option 2: JavaScript Image Object

Create a JavaScript Image object and assign the resized image's source to its src property. Once the image has loaded, the object's width and height properties will hold the original dimensions. You can utilize the onload event to execute this operation asynchronously, ensuring that the image is fully loaded before retrieving the dimensions.

Code Example:

function getImgSize(imgSrc) {
  var newImg = new Image();

  newImg.onload = function() {
    var height = newImg.height;
    var width = newImg.width;
    alert('The image size is ' + width + '*' + height);
  };

  newImg.src = imgSrc; // Do this after setting `onload`
}

Note: If you encounter issues with large images not returning dimensions, consider using the onload event within the JavaScript object. This ensures that the image has fully loaded before accessing its properties.

The above is the detailed content of How to Determine the Original Image Size After Client-Side Resizing Across Browsers?. For more information, please follow other related articles on the PHP Chinese website!