代码之家 › 专栏 › 技术社区 › Matthew

使用React获取图像尺寸

reactjs javascript

Matthew · 技术社区 · 8 年前

我需要用React得到图像的尺寸。我找到了一个叫的图书馆 react-measure

我尝试使用 onLoad 图像事件检测图像加载时,但我没有得到满意的结果。基本上,我所做的是当图像加载时( handleImageLoaded() 已调用),更改 hasLoaded 将属性声明为 true .我知道一个事实 已加载 已更改为 真的 因为它这么说: Image Loaded: true .

我注意到的是,我只能计算缓存的图像的尺寸。。。

这是一个演示视频

使用React是否有更好、更简洁的方式正确检索维度?

代码如下:

import React, {Component} from 'react';
import Measure from '../src/react-measure';
class AtomicImage extends Component {

    constructor() {
        super();
        this.state = {
            hasLoaded: false,
            dimensions: {}
        };
        this.onMeasure = this.onMeasure.bind(this);
        this.handleImageLoaded = this.handleImageLoaded.bind(this);
    }

    onMeasure(dimensions) {
        this.setState({dimensions});
    }

    handleImageLoaded() {
        this.setState({hasLoaded: true});
    }

    render() {

        const {src} = this.props;
        const {hasLoaded, dimensions} = this.state;
        const {width, height} = dimensions;

        return(
            <div>
                <p>Dimensions: {width} x {height}</p>
                <p>Image Loaded: {hasLoaded ? 'true' : 'false'}</p>
                <Measure onMeasure={this.onMeasure} shouldMeasure={hasLoaded === true}>
                    <div style={{display: 'inline-block'}}>
                        <img src={src} onLoad={this.handleImageLoaded}/>
                    </div>
                </Measure>
            </div>
        );
    }
}

export default AtomicImage;

这是父代码。其实并不重要只是通过 src 到 AtomicImage 元素:

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import AtomicImage from './AtomicImage';

class App extends Component {

  constructor() {
    super();
    this.state = {src: ''}
    this.handleOnChange = this.handleOnChange.bind(this);
  }

  handleOnChange(e) {
    this.setState({src: e.target.value});
  }

  render() {

    const {src} = this.state;
    return (
      <div>
        <div>
          <input onChange={this.handleOnChange} type="text"/>
        </div>
        <AtomicImage src={src} />
      </div>
    )
  }

}

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

2 回复 | 直到 8 年前

Kokovin Vladislav 6 年前

检索维度的方法

您可以通过js实现您的目标:通过offsetHeight和offsetWidth。为了获得img的尺寸,img必须是可见的。无法从缓存的img中获取维度。

例子: https://jsbin.com/jibujocawi/1/edit?js,output

class AtomicImage  extends Component {
   constructor(props) {
        super(props);
        this.state = {dimensions: {}};
        this.onImgLoad = this.onImgLoad.bind(this);
    }
    onImgLoad({target:img}) {
        this.setState({dimensions:{height:img.offsetHeight,
                                   width:img.offsetWidth}});
    }
    render(){
        const {src} = this.props;
        const {width, height} = this.state.dimensions;

        return (<div>
                dimensions width{width}, height{height}
                <img onLoad={this.onImgLoad} src={src}/>
                </div>
               );
    }
}

Jason Henriksen 2 年前

      noteImgSize(img){
        this.imgOrigH=img.nativeEvent.srcElement.naturalHeight
        this.imgOrigW=img.nativeEvent.srcElement.naturalWidth
        this.imgOrigRatio=this.imgOrigH/this.imgOrigW
      }

旁注,与此无关: 使用Mobx,再也不用调用setState()了!