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

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，您可能需要同时使用扩展和应用程序来获得必要的文件访问权限。