Получение изображения от холста до flask

Question

Я пишу небольшое приложение Flask для распознавания рукописных цифр (0-9). Я написал почти все элементы (модель машинного обучения, веб-приложение и т. Д. c.), Но у меня проблема с захватом изображения (нарисованного с помощью Canvas), например:

Я хотел бы получить изображение и сохранить его во временном файле. Я знаю Python, но я никогда не использовал JavaScript, что необходимо для использования Canvas.

HTML:

<form method="post"  action="{{url_for('main.image')}}">
    <button name="img" onclick="drawDataURIOnCanvas();">Get png</button>
</form>

JS:

function InitThis() {
        ....
    }

 function Draw(x, y, isDown) {
        ....

 function drawDataURIOnCanvas() {

      var element = document.createElement('a');
      element.setAttribute('href',  document.getElementById('Canvas').toDataURL('image/jpeg'));
      element.setAttribute('download', 'chart.jpeg');
      element.style.display = 'none';
      document.body.appendChild(element);
      element.click();

    }

Функция drawDataURIOnCanvas() сохраняет изображение с помощью менеджер сохранения браузера , но я бы хотел сохранить его во временных файлах и использовать изображение позже.

Answer 1

К сожалению, браузер не позволяет программно сохранять файлы в файловой системе пользователя из-за проблем безопасности. Поскольку это относится к приложению Flask, вам следует вместо этого прочитать информацию об изображении из тега <canvas> и отправить информацию об изображении непосредственно в приложение через XHR / AJAX или стандартный <form>. Это предполагает, что вы пишете его временно, чтобы Flask мог прочитать его с диска.

Если вам абсолютно необходимо работать с временными файлами, то вы можете обойти это ограничение, написав плагины / расширения для браузера хотя в случае chrome вам, вероятно, понадобится сочетание расширения и приложения для получения необходимого доступа к файлу.