如何以用户友好的方式在计算机上保存从画布转换的图像？

Question

我正在使用Nihilogic的库 Canvas2Image 将画布图转换为PNG，并为我的应用程序的用户提供下载该图像的可能性。

我需要的是能够为可下载文件提供名称和 png 扩展名（例如“goalboard.png”），而不是将其作为没有可识别扩展名的八位字节流下载而名称“下载”，因为普通的乔不知道如何处理这样的文件。我需要在客户端执行此操作，因为根据其中的数据量将该字节流发送到服务器可能需要长达20秒（这是一个很大的画布！）。更不用说之后检索图像......

那么，我该怎么做？

Answer 1

其中一个应解决您的问题（使用画布，您可以以base64格式提取图像）：

• Using HTML5/Javascript to generate and save a file
• Reading a local file, encoding to base64, I would like to give the user an option to save the result to file

Answer 2

我也有一个很大的RaphaelJs画布，需要允许用户运行一个脚本，将大量画布保存为png图像。 我试图将我的raphael转换为svn，然后将我的svg转换为png，然后使用wget，但这当然不起作用，因为我的画布由javascript和wget生成无法处理。最后我意识到我可以让我的webapp只使用svg画布构建一个页面并使用phantomjs（一个无头浏览器）将其保存为png。它工作得很好。

就这么简单。 1.使用web应用程序仅使用svg画布构建页面。 2.使用以下代码创建svgToPgn.js文件：

  

var page = require（'webpage'）。create（）;   page.open（'URL_TO_YOUR_HTML_PAGE'，function（）{    page.render（ 'PATH_TO_PNG / example.png'）;    phantom.exit（）;   }）;   3.下载Phantom（http://phantomjs.org），将其解压缩，然后在bin目录中找到phantomjs可执行文件。跑 ：   ./phantomjs svgToPgn.js   您的png文件将保存在：PATH_TO_PNG / example.png

中

Answer 3

  

我需要在客户端

执行此操作

那种要求会杀死你的机会。遗憾。

您无法做您想做的事情，您所拥有的最好的就是显示图像并告诉用户右键单击另存为。