从画布到烧瓶获取绘图图像

Question

我正在编写一个小的Flask应用程序以识别手写数字（0-9）。我编写了几乎所有元素（机器学习模型，Web应用程序等），但是在捕获图像（使用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的情况下，您可能需要同时使用扩展和应用程序才能获得必要的文件访问。