无法下载 React Canvas 绘图

Question

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

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

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

Answer 1

看了你的代码后，我不确定它是否与 React 相关。因此，我将给出一个非反应性解决方案。

如果你像我的 exampleDrawing 函数一样在 canvas 上做了一些绘制，那么只需像这样调用 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 函数所做的是创建一个包含 canvas 图像的 URL，生成一个 link，然后单击它。

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

Answer 2

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

下载为图像功能：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}
 />

无法下载 React Canvas 绘图

Unable to download React Canvas Drawing

react-native

react-canvas