Как получить ответ изображения от рисования холста реакции?

Question

Я использовал рисование холста в React JS. Я получил ответ от функции getData, но хочу использовать ответ в формате изображения, но не могу получить изображение.

import CanvasDraw from "react-canvas-draw";

<div className="tools">
          <button
            onClick={() => {
              localStorage.setItem(
                "savedDrawing",
                this.saveableCanvas.getSaveData()
              );
            }}
          >
            Save
          </button>
          <button
            onClick={() => {
              this.saveableCanvas.clear();
            }}
          >
            Clear
          </button>
          <button
            onClick={() => {
              this.saveableCanvas.undo();
            }}
          >
            Undo
          </button>
          <div>
            <label>Width:</label>
            <input
              type="number"
              value={this.state.width}
              onChange={e =>
                this.setState({ width: parseInt(e.target.value, 10) })
              }
            />
          </div>
          <div>
            <label>Height:</label>
            <input
              type="number"
              value={this.state.height}
              onChange={e =>
                this.setState({ height: parseInt(e.target.value, 10) })
              }
            />
          </div>
          <div>
            <label>Brush-Radius:</label>
            <input
              type="number"
              value={this.state.brushRadius}
              onChange={e =>
                this.setState({ brushRadius: parseInt(e.target.value, 10) })
              }
            />
          </div>
          <div>
            <label>Lazy-Radius:</label>
            <input
              type="number"
              value={this.state.lazyRadius}
              onChange={e =>
                this.setState({ lazyRadius: parseInt(e.target.value, 10) })
              }
            />
          </div>
        </div>
        <CanvasDraw
          ref={canvasDraw => (this.saveableCanvas = canvasDraw)}
          brushColor={this.state.color}
          brushRadius={this.state.brushRadius}
          lazyRadius={this.state.lazyRadius}
          canvasWidth={this.state.width}
          canvasHeight={this.state.height}
        />

Вот ответ Canvas:

{"lines":[{"points":[{"x":106.38525113810485,"y":128.7116646293009},{"x":104.33783518839755,"y":138.17264931304558},{"x":104.33783518839755,"y":138.17264931304558},{"x":105.28841266564595,"y":138.38490495205284},{"x":105.53382940471376,"y":138.46065940042593},{"x":107.39417523114616,"y1782": 1384.949}: 111.81145744120575,"y":140.662199242698},{"x":121.10859880426884,"y":144.96240335143577},{"x":133.3789723776997,"y":151.4148614836932},{"x": 1410245488388},{"x":146.39113592005003,"y":158.39179146846809},{"x":148.37125720237177,"y":159.42955777860809}],"brushColor":"#c78c44","brushRadius":10}],"width":400,"height":400}.

Если у кого-то есть решение, поделитесь.

Answer 1

На эту проблему с git для библиотеки есть отличный ответ https://github.com/embiem/react-canvas-draw/issues/43, согласно этому обсуждению в основном вы можете сделать это:

const d = this.saveableCanvas.canvasContainer.children[1].toDataURL();
const w = window.open('about:blank', 'image from canvas');
const img = require("relativepath to background image");
w.document.write("<img src='"+d+"' style='background-image: url( " + img + "); background-size: contain' alt='Exporting'/>");