Javascript 反应：Canvas drawImage未更新画布

我正在使用react konva在画布上绘制图像。 我在舞台元素中有两个不同的层（konva中的画布）。 一张图片是预先确定的，一张在运行时由输入更新。 两张图片都显示得很好，但当我试图保存它们时，输入的图片只是一个黑色png，而不是我选择的图片

Javascript:

单击输入时上载图像

  const handleImageUpload = e => {
    setSelected(false);
    let canvas = backgroundCanvas.current;
    let ctx = canvas.getContext('2d');
    newImage.onload = function() {
      newImage.crossOrigin = 'Anonymus';
      ctx.drawImage(newImage, 0, 0);
    };

    const [file] = e.target.files;
    if (file) {
      const reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = e => {
        ctx.clearRect(0, 0, canvas.canvas.width, canvas.canvas.height);
        newImage.src = e.target.result;
      };
    }
  };

它在屏幕上显示了我想要的图像，看起来很有效，但是，如果我想将画布保存为png文件，它就不再存在了

保存功能：

  const saveImage = () => {
    let backgroundCanvasSave = backgroundCanvas.current;
    const backgroundCanvasData = backgroundCanvasSave.toDataURL({
      mimeType: 'image/png',
    });
    downloadURI(backgroundCanvasData, 'stage.png');
  };

JSX:

{
已选择（假）；
}}
onTap={（）=>{
已选择（假）；
}}
/>
{
已选择（正确）；
}}
onChange={setShape}
/>
图片画廊
图片画廊
);

该应用程序的目标是保存两张图片都在里面的舞台，但正如我所说的，当灯光显示时，背景总是黑色的

---

提前谢谢

不要直接使用层的

上下文。Konva在导出画布时可能会丢失所做的更改

要解决此问题，只需将输入绘制为
组件：

const newImage=newImage（）；
newImage.onload=（）=>{
this.setState（{image:newImage}）
};
newImage.crossOrigin='Anonymus'；
newImage.src=e.target.result；
//在渲染中：
{
已选择（假）；
}}
onTap={（）=>{
已选择（假）；
}}
>

<div>
      <Stage
        ref={canvasStage}
        width={window.innerWidth}
        height={window.innerHeight}
      >
        <Layer
          ref={backgroundCanvas}
          onClick={() => {
            setSelected(false);
          }}
          onTap={() => {
            setSelected(false);
          }}
        />
        <Layer ref={lampCanvas}>
          <Lamp
            shapeProps={shape}
            isSelected={selected}
            onSelect={() => {
              setSelected(true);
            }}
            onChange={setShape}
          />
        </Layer>
      </Stage>
      <label
        for="files"
        class="btn"
        style={{
          border: '1px solid',
          display: 'inline block',
          padding: '6px 12px',
          cursor: 'pointer',
        }}
      >
        Bild hochladen
        <input
          id="files"
          visibility="hidden"
          type="file"
          accept="image/*"
          style={{ display: 'none' }}
          onChange={handleImageUpload}
          ref={imageUploader}
        />
      </label>
      <label
        class="btn"
        style={{
          border: '1px solid',
          display: 'inline block',
          padding: '6px 12px',
          cursor: 'pointer',
        }}
        onClick={saveImage}
      >
        Bild speichern
      </label>
    </div>
  );