使用React获取图像的尺寸

12 浏览
0 Comments

使用React获取图像的尺寸

我需要用React获取图像的尺寸。我找到了一个名为react-measure的库，用于计算React组件的尺寸。它能够工作，但是我无法在图像加载完成后触发它。我需要在图像加载完成时触发它，以便获取准确的尺寸，而不是0 x 157之类的尺寸。

我尝试使用onLoad图像事件来检测图像是否已加载，但是结果不尽人意。基本上，当图像加载完成（调用handleImageLoaded()）时，我会将hasLoaded状态属性更改为true。我确信hasLoaded已经被更改为true，因为它说明了如此：Image Loaded: true。

我注意到，我只能计算已被缓存的图像的尺寸...

这是一个演示视频：cl.ly/250M2g3X1k21

是否有更好、更简洁的方法来正确地使用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(
                尺寸：{width} x {height}
                图片已加载：{hasLoaded ? 'true' : 'false'}
                
                        
                
        );
    }
}
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 (
          
        
    )
  }
}
ReactDOM.render(, document.getElementById('app'));

0