Javascript 如何在my Django'；你的观点是什么？

我正在制作一个应用程序，其中我的视图用信息呈现一个模板，然后在我的模板中用Javascript创建一个canvas元素，我的Javascript代码中有data:URI，但我想以Django的方式将该图像正确地保存在服务器上的MEDIA_ROOT（假定在/MEDIA/report目录中）中，就像我在另一个视图中使用表单一样，但这不是表单！是一个成功的页面，在这个页面中，我用信息呈现模板，在同一个视图中，我有一个需要该图像的函数，也许我的问题可能有点棘手，但我会将我的模板代码和视图代码放入其中，以显示我想要做的事情。 我不知道我的想法是否正确。我真的不需要保存该图像，只需要在函数

中使用\u image（）做一些事情

也许我需要做一个POST请求

下面是我的模板代码和javascript代码：

        <div id="report">
          {{data1}} info - info {{data2}}
        </div>
        <script>
        
        window.onload = function() {
            //dom not only ready, but everything is loaded
            html2canvas(document.getElementById("report")).then(canvas => {
                let image = canvas.toDataURL("image/png").replace("image/png","image/octet-stream");
                let link = document.getElementById('link');
                link.setAttribute('download', 'imageIWantToUse.png');
                link.setAttribute('href',image)
            });
        };
       </script>


{{data1}}info-info{{data2}
window.onload=函数（）{
//dom不仅准备就绪，而且所有内容都已加载
html2canvas（document.getElementById（“报告”））。然后（canvas=>{
让image=canvas.toDataURL（“image/png”）.replace（“image/png”、“image/octet-stream”）；
让link=document.getElementById（'link'）；
link.setAttribute（'download'，'imageIWantToUse.png'）；
link.setAttribute（'href'，image）
});
};
您需要将画布的内容发布到服务器，然后处理请求服务器端并保存文件。首先需要获取画布数据，为此应使用toBlob。一旦有了它，uou就可以使用浏览器的fetch方法来使用它，然后发布它。这看起来像：

window.onload = () => {
  const report = document.getElementById("report");
  html2canvas(report).then((canvas) => {
    // toBlob -- https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob
    return canvas.toBlob((blob) => {
      // FormData -- https://developer.mozilla.org/en-US/docs/Web/API/FormData
      const form = new FormData();
      form.append("report", blob);

      fetch("YOUR SERVER URL", {
        method: "POST",
        body: form
      })
        .then((res) => {
          // do something with the response
          console.log(res);
        })
        .catch((err) => {
          // error uploading the data
          console.error(err);
        });
    });
  });
};


请注意，我没有有效的URL，因此它总是会出错。你需要用你服务器的URL来填写它。
所以你想在你的服务器上保存
html2canvas（document.getElementById（“report”）
的结果，对吗？我需要在
let image=canvas.toDataURL（“image/png”）中生成的图像。替换（“image/png”，“image/octet stream”）
@kyleok感谢您的澄清，另一件事是，
image/octet-stream
不是有效的mime类型。不使用png的原因是什么？我忘记了原因，也许以后我会改为只使用
canvas.toDataURL（“image/png”）
window.onload = () => {
  const report = document.getElementById("report");
  html2canvas(report).then((canvas) => {
    // toBlob -- https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob
    return canvas.toBlob((blob) => {
      // FormData -- https://developer.mozilla.org/en-US/docs/Web/API/FormData
      const form = new FormData();
      form.append("report", blob);

      fetch("YOUR SERVER URL", {
        method: "POST",
        body: form
      })
        .then((res) => {
          // do something with the response
          console.log(res);
        })
        .catch((err) => {
          // error uploading the data
          console.error(err);
        });
    });
  });
};