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

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

2 голосов
/ 21 апреля 2020

Я использовал ответный холст в реакции 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": [{ "точки": [{ "х": +106,38525113810485, "у": 128,7116646293009}, { "х": +104,33783518839755, "у": +138,17264931304558}, { "х": +104,33783518839755, "у": +138,17264931304558}, { "х": +105,28841266564595, "у": +138,38490495205284}, { "х": +105,53382940471376, "у": +138,46065940042593}, { "х": +107,39417523114616, "у": 138,9496178215412}, { "х": +111,81145744120575, "у ": 140,662199242698}, {" х ": 121.10859880426884," Y ": +144,96240335143577}, {" х ": 133.3789723776997," Y ": 151,4148614836932}, {" х ": 142.4388370090569," Y ": +156,30247103748178}, {" х ": +146,39113592005003," у ": +158,39179146846809}, {" х ": +148,37125720237177," у ": +159,42955777860809}]," brushColor ":" # c78c44" , "brushRadius": 10}], "ширина": 400,» height ": 400}

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

...