1

我想将我在 React 画布上的绘图作为 jpeg 图像文件下载到我的桌​​面，然后将其传递给 python 文件进行分类。有人可以指定一个代码来下载 React 画布绘图，或者建议一种更好的方法来实现这个想法吗？

clearCanvas({nativeEvent}) {
  var image = this.canvas.toDataURL("image/jpeg");
  nativeEvent.href=image;
  this.ctx.save("C:/Users/PrishitaRay/Pictures/Myimage.jpeg");
  this.ctx = this.canvas.getContext('2d');
  this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
  }

这个函数只是清除反应画布而不先下载它。

4

2 回答 2

6

阅读您的代码后，我不确定它是否与 React 有关。因此，我将给出一个非反应解决方案。

如果你像我的exampleDrawing函数一样在画布上做了一些绘图，那么只需像这样调用download函数。

function exampleDrawing(){
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");
  ctx.fillStyle = "#FF0000";
  ctx.fillRect(0,0,150,75);
}

function download(){
  var canvas = document.getElementById("canvas");
  var url = canvas.toDataURL("image/png");
  var link = document.createElement('a');
  link.download = 'filename.png';
  link.href = url;
  link.click();
}

exampleDrawing();
<canvas id="canvas" width="200" height="100">
</canvas>
<button onclick="download();">Download!</button>

我的download功能是创建一个包含画布图像的 URL，生成一个链接，然后单击它。

当然，您不必生成按钮并单击它。只需随时调用该download函数。

于 2018-08-23T07:10:44.420 回答
1

在 React 中下载 Canvas 作为图像（仅限 Js）：（ React 类组件）

下载为图像功能：chartRef.canvas 给出了 canvas 元素，将其替换为您的 Canvas 元素。

handleChartDownload = (chartRef) => {
const chartCanvas = chartRef.canvas;
if (chartCanvas) {
  const url = chartCanvas.toDataURL("image/png");
  const link = document.createElement("a");
  link.download = "chart.png";
  link.href = url;
  link.click();
}
};

图形元素：这些元素属于 render() 函数。

下载按钮：

<button
        className="btn btn-light"
        onClick={() => this.handleChartDownload(this.chartRef)}
 >Download</button>

Graph：（这里 Scatter 是 ChartJsReact 组件，用于创建图表）

<Scatter
        ref={(reference) => (this.chartRef = reference)}
        data={this.state.chartData}
        options={this.state.chartOptions}
 />
于 2022-01-25T18:59:17.837 回答