2

我在 React JS 中使用了 React canvas draw。我从 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}
        />

这是画布的回应：

{"行":[{"点":[{"x":106.38525113810485,"y":128.7116646293009},{"x":104.33783518839755,"y":138.17264931304558},{"x":104.35783518839" :138.17264931304558},{"x":105.28841266564595,"y":138.38490495205284},{"x":105.53382940471376,"y":138.46065940042593},{"x":107.39417523114616,"y":138.9496178215412},{"x" :111.81145744120575,"y":140.662199242698},{"x":121.10859880426884,"y":144.96240335143577},{"x":133.3789723776997,"y":151.4148614836932},{"x":142.4388370090569,"y":156.30247103748178 },{"x":146.39113592005003,"y":158.39179146846809},{"x":148.37125720237177,"y":159.42955777860809}],"BrushColor":"#c78c44","brushRadius":10}],"width":400,"height":400}

如果有人有任何解决方案，请分享。

4

1 回答 1

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'/>");
于 2020-09-19T05:39:46.263 回答