CODEWITHSUNDEEP
javascriptcssreactjs
A. L
A. L

Reputation: 12639

react - get width/height of image to process

I was wondering how to get the height and width of an image if I'm rendering it react style so I can process it to flip it to portrait mode if the width is larger than the height.

Example: https://codesandbox.io/s/k9kwv0kp93

Example code:

index.js

import React from 'react';
import { render } from 'react-dom';
import Hello from './Hello';

const styles = {
  fontFamily: 'sans-serif',
  textAlign: 'center',
};

const App = () => (
  <div style={styles}>
    <Hello name="CodeSandbox" />
    <h2>Start editing to see some magic happen {'\u2728'}</h2>
  </div>
);

render(<App />, document.getElementById('root'));

Hello.js

import React, {Component} from 'react';

export default class Hello extends Component
{
  constructor()
  {
    super();
    this.state = {img: null}

    this.get_image = this.get_image.bind(this);
  }

  get_image() 
  {
    let img = <img src="http://via.placeholder.com/350x150" alt="" />;
    //manipulate here maybe
    this.setState({
      img
    })
  }

  render()
  {
    return (
      <div>
        <button onClick={this.get_image}>Click me</button>
        test
        {this.state.img}
      </div>
    )
  }
}

Upvotes: 6

Views: 28952

Answers (2)

felixmosh
felixmosh

Reputation: 35473

React supports a special attribute that you can attach to any component. The ref attribute takes a callback function, and the callback will be executed immediately after the component is mounted or unmounted.

When the ref attribute is used on an HTML element, the ref callback receives the underlying DOM element as its argument

Taken from: https://facebook.github.io/react/docs/refs-and-the-dom.html

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
  }

  handleSize(image) {
    console.log(image.offsetWidth, image.offsetHeight)
  }

  render() {
    return React.createElement("img", {
      src: "http://cdn.collider.com/wp-content/uploads/2016/07/narcos-season-2-image-5.jpg",
      ref: image => {
        this.handleSize(image);
      },
      onLoad=(image)=>this.handleSize(image);
    });
  }
}

ReactDOM.render(React.createElement(MyComponent, null), document.getElementById('root'))
img {
  width: 200px;
  height: 133px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-with-addons.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root"></div>

Upvotes: 3

Pierre Ferry
Pierre Ferry

Reputation: 1427

I encountered the same issue, I was able to get the img height and width using ref and onLoad().

Class component version (with 'old' ref usage):


render() {
   return (
     <img
        src='https://via.placeholder.com/150'
        ref={el => this.imgEl = el}
        onLoad={() => console.log(this.imgEl.naturalHeight)} // print 150
     /> 
  )
}

Class component version (with 'new' ref):

import * as React from "react";
import ReactDOM from "react-dom";

class App extends React.Component {
  imgEl = React.createRef();

  render() {
    return (
      <img
        src="https://via.placeholder.com/150"
        ref={this.imgEl}
        onLoad={() => console.log(this.imgEl.current.naturalHeight)} // print 150
      />
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Functional component version:

import React from "react";
import ReactDOM from "react-dom";

function App() {
  const imgElement = React.useRef(null);

  return (
    <img
      src="https://via.placeholder.com/150"
      ref={imgElement}
      onLoad={() => console.log(imgElement.current.naturalHeight)} // print 150
    />
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Also you should use img.naturalHeight

Upvotes: 20

Related Questions