Getting drawing image from canvas to flask

Question

I'm writing a small Flask app to recognize handwritten digits (0-9). I wrote almost all the elements (machine learning model, web app, etc.) but I'm having a problem capturing an image (drawn using Canvas) like:

I would like to get the image and save it to a temp file. I know Python but I've never used JavaScript, which is necessary for using 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();

    }

Function drawDataURIOnCanvas() saves the image using browser save manager, but I would like to save it to temp files and use the image later.

Colt McCormack Colt McCormack · Accepted Answer · 2020-03-04T19:20:54

Unfortunately, the browser doesn't allow you to programmatically save files to a user's filesystem due to security concerns. Since this is going to a Flask application you should instead read the image information from the <canvas> tag and send the image information directly to the app via XHR/AJAX or a standard <form>. This is assuming that you are writing it temporarily so that Flask can read it from disk.

If you absolutely have to make this work with temp files then you can get around this limitation by writing browser plugins/extensions, though in the case of chrome you will likely need the combination of both an extension and an app to get the necessary file access.

Getting drawing image from canvas to flask

1 Answers