從畫布獲取繪圖圖像到燒瓶

Question

我正在編寫一個小型 Flask 應用程序來識別手寫數字 (0-9)。 我編寫了幾乎所有元素（機器學習模型、Web 應用程序等），但在捕獲圖像（使用 Canvas 繪制）時遇到問題，例如：

我想獲取圖像並將其保存到臨時文件中。 我知道 Python，但我從未使用過 JavaScript，而 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 的情況下，您可能需要擴展程序和應用程序的組合來獲得必要的文件訪問權限.