Реагируйте: холст drawImage не обновляет холст - PullRequest
Новая
       30

Реагируйте: холст drawImage не обновляет холст

0 голосов
/ 24 февраля 2020

Я использую реагирующую конву для рисования изображений на холсте. У меня есть два разных слоя (холст в конве) внутри элемента сцены. Одна картинка предопределена, а другая обновляется вводом во время выполнения. Обе картинки отображаются нормально, но когда я пытаюсь сохранить их, изображение, поступающее со входа, представляет собой просто черный png, а не выбранное мной изображение.

Javascript:

imageUpload, когда нажата кнопка ввода. 

  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: 

<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>
  );

Цель приложения состоит в том, чтобы сохранить сцену с обеими картинками внутри нее, но, как я уже сказал , фон всегда черный, а индикатор показывает.

Заранее спасибо!

1 Ответ

1 голос
/ 26 февраля 2020

Не используйте context слоя напрямую. Konva может потерять ваши изменения при экспорте холста.

Чтобы решить эту проблему, просто нарисуйте свой ввод как <Image /> компонент: 

const newImage = new Image();
newImage.onload = () => {
  this.setState({ image: newImage })
};
newImage.crossOrigin = 'Anonymus';
newImage.src = e.target.result;


// in render:
<Layer
  ref={backgroundCanvas}
  onClick={() => {
    setSelected(false);
  }}
  onTap={() => {
    setSelected(false);
  }}
>
  <Image image={this.state.image} />
</Layer>
...