react-konva：上传图片后如何更换画布显示的图片？

嘿，这个需求我之前做过类似的，咱们一步步拆解来实现，其实逻辑很清晰：核心就是让父组件DesignPage作为状态枢纽，把Tools组件上传的图片状态传递给Canvas组件，再借助react-konva的API完成渲染。

步骤1：在DesignPage中管理图片状态 #

首先，DesignPage作为容器组件，需要维护当前上传的图片URL状态，同时把「更新状态的方法」传给Tools组件，把「图片URL」传给Canvas组件：

// DesignPage.jsx
import { useState } from 'react';
import Tools from './Tools';
import Canvas from './Canvas';

export default function DesignPage() {
  // 存储上传后的图片可访问URL
  const [imageUrl, setImageUrl] = useState(null);

  return (
    <div style={{ display: 'flex', gap: '20px', padding: '20px' }}>
      {/* 把更新图片的方法和当前图片URL传给Tools */}
      <Tools onImageUpload={setImageUrl} currentImageUrl={imageUrl} />
      {/* 把图片URL传给Canvas用于渲染 */}
      <Canvas imageUrl={imageUrl} />
    </div>
  );
}

步骤2：Tools组件用react-dropzone处理上传 #

在Tools组件里，用react-dropzone的useDropzone钩子监听文件上传事件，把选中的图片转成浏览器能直接识别的Object URL，再调用父组件传过来的onImageUpload更新状态。一定要记得清理Object URL避免内存泄漏：

// Tools.jsx
import { useDropzone } from 'react-dropzone';
import { useEffect } from 'react';

export default function Tools({ onImageUpload, currentImageUrl }) {
  const { getRootProps, getInputProps } = useDropzone({
    accept: { 'image/*': [] }, // 仅接受图片类型文件
    maxFiles: 1, // 限制一次上传一张图片
    onDrop: (acceptedFiles) => {
      const targetFile = acceptedFiles[0];
      if (targetFile) {
        // 将文件转为浏览器可访问的临时URL
        const tempUrl = URL.createObjectURL(targetFile);
        onImageUpload(tempUrl);
      }
    }
  });

  // 清理旧的Object URL，防止内存泄漏
  useEffect(() => {
    return () => {
      if (currentImageUrl) {
        URL.revokeObjectURL(currentImageUrl);
      }
    };
  }, [currentImageUrl]);

  return (
    <div 
      {...getRootProps({ className: 'dropzone' })} 
      style={{ 
        border: '2px dashed #ccc', 
        padding: '20px', 
        cursor: 'pointer',
        borderRadius: '8px',
        width: '200px'
      }}
    >
      <input {...getInputProps()} />
      <p>拖拽图片到这里<br/>或点击选择文件</p>
    </div>
  );
}

步骤3：Canvas组件用react-konva渲染图片 #

react-konva的Image组件需要等待图片加载完成后才能正常显示，所以要用它提供的useImage钩子来处理图片加载逻辑，之后再渲染到画布上：

// Canvas.jsx
import { Stage, Layer, Image } from 'react-konva';
import { useImage } from 'react-konva';

export default function Canvas({ imageUrl }) {
  // useImage会自动处理图片加载，加载完成后返回可用的图片对象
  const [loadedImage] = useImage(imageUrl);

  return (
    <Stage width={800} height={600} style={{ border: '1px solid #333', borderRadius: '8px' }}>
      <Layer>
        {loadedImage && (
          <Image
            image={loadedImage}
            x={0}
            y={0}
            // 可选：如果需要图片适配画布大小，可以替换为Stage的尺寸
            // width={800}
            // height={600}
            width={loadedImage.width}
            height={loadedImage.height}
          />
        )}
      </Layer>
    </Stage>
  );
}

关键注意点 #

• Object URL的清理：务必调用URL.revokeObjectURL()，否则浏览器会一直占用内存，尤其在频繁上传图片时问题会更明显。
• 图片加载状态：useImage钩子已经封装了图片加载的逻辑，不需要手动监听onload事件，react-konva会自动处理加载完成后的渲染时机。
• 画布适配：如果需要让图片自适应画布大小，可以根据Stage的尺寸和图片原始尺寸计算缩放比例，动态调整Image组件的宽高。

这样一套流程走下来，用户上传图片后就能在Canvas组件里实时看到渲染效果啦～

内容的提问来源于stack exchange，提问作者0xh8h