Невозможно загрузить React Canvas Drawing

Question

Я хочу загрузить свой рисунок на холсте React в виде файла изображения 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);
  }

Эта функция просто очищает реагирующий холст без предварительной загрузки.

Answer 1

После прочтения вашего кода я не уверен, имеет ли он отношение к 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 = document.getElementById('canvas').toDataURL();
  link.click();
}

exampleDrawing();

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

Что мое download Функция do - создать URL-адрес, содержащий изображение холста, сгенерировать ссылку и затем щелкнуть по ней.

И, конечно, вам не нужно создавать кнопку и нажимать на нее. Просто позвони download функционировать всякий раз, когда вы хотите.

Answer 2

Скачать Canvas как изображение в React (только Js): (Компоненты класса React)

Загрузить как функцию изображения: chartRef.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>

График: (здесь Scatter — компонент ChartJsReact, используемый для построения графиков)

      <Scatter
        ref={(reference) => (this.chartRef = reference)}
        data={this.state.chartData}
        options={this.state.chartOptions}
 />