我编写了一个使用 xsl 转换创建 html 报告的 c++/c# Windows 程序。 html 报告包括画布元素绘图。我为用户提供了将 html 报告转换为 Word 文档（如果已安装）的选项，但是，虽然转换工作正常，但它忽略了画布绘图。作为一种解决方法，我想将画布元素转换为 png 图像并将它们“导出”到客户端 PC（即使用我的程序创建报告）。我知道如何将画布转换为 dataURL，然后再转换为 blob，但我不知道如何将 blob 文件上传到客户端 PC，这当然不是网络服务器。 另外，一旦文件在客户端上，可以将 blob 视为 png 图像吗？
【问题讨论】：
data URI 转换为Blob。您可以在<a> 元素中使用download 属性，并将.href 属性设置为data URI 或Blob URL，以提供用户文件供下载。
标签： javascript html canvas blob
在这种情况下，这取决于您如何将 html 转换为 .doc。
要将所有画布转换为 dataURI，您可以使用以下内容：
document.querySelectorAll('canvas').forEach( canvas =>{
var img = new Image();
try{
img.src = canvas.toDataURL();
canvas.replaceWith(img);
}
catch(e){
handleTaintedCanvas(); // I let you decide what should happen here
}
});
所以一旦完成，你只需要调用这个库，它应该可以工作。
为了更好地跨设备兼容，请将您的画布转换为 dataURI png 图像。
如果您想采用 Blob 方式，则必须保存一个文件夹，其中包含您的 html 文件，并将所有图像保存为单独的文件，并在 HTML 标记中正确引用它们。
这也是可能的，例如，您可以生成一个结构正确的 zip 文件以及所有包含的文件，但某些浏览器不接受从 file:// 协议加载外部文件，您的用户必须保留该目录结构不变。
总之，
<canvas> 转dataURL要将您的画布转换为 dataURI，一个简单的函数是
[移至编辑]
从现在开始，您所有的 clean 画布都将转换为 dataURI 图像，您可以使用 html 文件导出这些图像，该文件将是独立的。
<script> 转dataURL请注意，还有第三种处理方法（实际上可能是最好的方法，具体取决于原始页面的性质）：
您可以将所有<script> 标签转换为dataURI，并将您的画布保留在文档中。这样，您仍然会有一个独立的工作 html 文件。但这意味着您不需要外部资源。
【讨论】：