如何在React-Konva中从Redux Store读取并显示DataUrl图片

Alright, you’ve already nailed the first part: reading a local image into a DataUrl and saving it to your Redux store. Now let’s get that image showing up in React-Konva. Here’s how to do it smoothly:

1. Pull the DataUrl from Redux #

First, you need to access that DataUrl in your Konva component. You can use either Redux Hooks (modern approach) or connect for class components.

Using Hooks (Function Component) #

import { useSelector } from 'react-redux';

const KonvaImageCanvas = () => {
  // Adjust the selector to match your Redux store structure
  const imageDataUrl = useSelector(state => state.surfaceGridModal.inputImage);
  // ... rest of the component
};

Using connect (Class Component) #

import { connect } from 'react-redux';

class KonvaImageCanvas extends React.Component {
  render() {
    const { imageDataUrl } = this.props;
    // ... rest of the render logic
  }
}

const mapStateToProps = state => ({
  imageDataUrl: state.surfaceGridModal.inputImage
});

export default connect(mapStateToProps)(KonvaImageCanvas);

2. Render with React-Konva’s Image Component #

React-Konva’s Image needs a loaded HTMLImageElement to render properly. Since loading an image is asynchronous, we’ll handle that with state to avoid rendering before the image is ready.

Function Component Example (with Hooks) #

import React, { useState, useEffect } from 'react';
import { Stage, Layer, Image } from 'react-konva';
import { useSelector } from 'react-redux';

const KonvaImageCanvas = () => {
  const imageDataUrl = useSelector(state => state.surfaceGridModal.inputImage);
  const [loadedImage, setLoadedImage] = useState(null);

  useEffect(() => {
    if (!imageDataUrl) return;

    // Create a new image element
    const img = new window.Image();
    img.src = imageDataUrl;
    
    // Wait for the image to load before passing it to Konva
    img.onload = () => {
      setLoadedImage(img);
    };

    // Cleanup to prevent memory leaks
    return () => {
      img.src = '';
    };
  }, [imageDataUrl]);

  return (
    <Stage width={600} height={600}>
      <Layer>
        {loadedImage && (
          <Image
            image={loadedImage}
            x={0}
            y={0}
            // Adjust size or scale as needed
            width={600}
            height={600}
            scaleX={1}
            scaleY={1}
          />
        )}
      </Layer>
    </Stage>
  );
};

export default KonvaImageCanvas;

Class Component Example #

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

class KonvaImageCanvas extends React.Component {
  state = {
    loadedImage: null
  };

  componentDidUpdate(prevProps) {
    const { imageDataUrl } = this.props;
    // Only reload if the DataUrl changed
    if (imageDataUrl !== prevProps.imageDataUrl) {
      this.loadImage(imageDataUrl);
    }
  }

  loadImage = (dataUrl) => {
    if (!dataUrl) return;

    const img = new window.Image();
    img.src = dataUrl;
    img.onload = () => {
      this.setState({ loadedImage: img });
    };
  };

  componentWillUnmount() {
    // Cleanup to avoid memory leaks
    if (this.state.loadedImage) {
      this.state.loadedImage.src = '';
    }
  }

  render() {
    const { loadedImage } = this.state;
    return (
      <Stage width={600} height={600}>
        <Layer>
          {loadedImage && (
            <Image
              image={loadedImage}
              x={0}
              y={0}
              width={600}
              height={600}
            />
          )}
        </Layer>
      </Stage>
    );
  }
}

const mapStateToProps = state => ({
  imageDataUrl: state.surfaceGridModal.inputImage
});

export default connect(mapStateToProps)(KonvaImageCanvas);

Quick Notes to Avoid Headaches #

• Always wait for onload: If you pass the image to Konva before it’s loaded, it won’t render. The state check ensures we only render once the image is ready.
• Cleanup after yourself: Resetting the image’s src on unmount prevents memory leaks from orphaned image objects.
• Resize as needed: Use width/height or scaleX/scaleY to fit the image to your stage. You can even use the image’s natural dimensions to calculate a proper scale:

  // Inside the onload handler
  const scale = Math.min(600 / img.naturalWidth, 600 / img.naturalHeight);
  // Then pass scaleX={scale} scaleY={scale} to the Image component
  

Also, just to confirm—your existing code for reading the image into Redux is solid:

inputImageChanged = (e: React.ChangeEvent<HTMLInputElement>) => { 
  const file = e.currentTarget.files[0]; 
  const reader = new FileReader(); 
  reader.readAsDataURL(file); 
  reader.onload = evt => {
    this.props.dispatch( 
      surfaceGridModalActions.inputSurfaceGridImage(evt.target.result) 
    ); 
  }; 
};

This correctly converts the local file to a DataUrl and dispatches it to your store, which pairs perfectly with the Konva rendering logic above.

内容的提问来源于stack exchange，提问作者Igor Chernega