IT技术 - 如何在 React 的画布上加载图像？ - 吾爱随笔录

如何在 React 中将图像上传到画布的整个宽度/高度？例如：

class PlanPage extends Component {
  constructor(props) {
    super(props);
  }

  componentWillMount() {
    this.setState({
      canvasA: {
        canvasWidth: 800,
        canvasHeight: 600
      }
    })
  }

  componentDidMount() {
    this.props.getDataMap(); //return object which has the fields e.g. id,... and field URL which specifies where image is  
    const { canvasWidth, canvasHeight } = this.state.canvasA;
    this.canvasA.width = canvasWidth;
    this.canvasA.height = canvasHeight;
  }
......
<canvas
  ref={canvasA => this.canvasA = canvasA} /> //canvas

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

将不胜感激任何帮助。

componentDidMount() { const context = this.canvasA.getContext('2d'); const image = new Image(); image.src = "whereever-you-image-url-live.jpg"; image.onload = () => { context.drawImage(image, 0, 0, this.canvasA.width, this.canvasA.height); }; }