在react-konva上动态渲染数据库中的图像

import React, { Component } from 'react';
import { Stage, Layer, Image } from 'react-konva';

class ImageRenderer extends Component {
  state = {
    imageData: null
  };

  componentDidMount() {
    // 从数据库中获取图像数据，这里假设使用了axios库进行网络请求
    axios.get('/api/imageData')
      .then(response => {
        // 将获取到的图像数据保存到组件的状态中
        this.setState({ imageData: response.data });
      })
      .catch(error => {
        console.error('Error fetching image data:', error);
      });
  }

  render() {
    const { imageData } = this.state;

    return (
      <Stage width={window.innerWidth} height={window.innerHeight}>
        <Layer>
          {imageData && (
            <Image
              image={imageData}
              width={window.innerWidth}
              height={window.innerHeight}
            />
          )}
        </Layer>
      </Stage>
    );
  }
}

export default ImageRenderer;