1

我正在尝试实现将 HTML5 画布的内容保存为 PNG 的功能，但它在 Chrome 19 上失败了。我正在使用类似于此的解决方案：http: //www.nihilogic.dk/labs/canvas2image/

如果您在 Chrome 19 上进行测试，则会出现以下错误：资源解释为文档但使用 MIME 类型图像/八位字节流传输：“数据：图像/八位字节-

4

3 回答 3

1

Chrome 19 似乎不允许通过 DATA URI 提供的图像“另存为”。在 Canary 上测试，它工作正常。

于 2012-05-31T19:43:34.890 回答
0

如果没有其他人回答，请将八位字节流发送到服务器端 PHP 处理并<iframe>使用这些标头附加一个不可见的

 header("Content-Disposition: attachment; filename=image".time().".png");
 header("Content-Type: image/png");
 header("Content-Transfer-Encoding: binary");
于 2012-05-30T23:14:05.273 回答
0

它只是在 Chrome 19 上无法在客户端运行，我已经尝试了所有方法。我用 PHP 编写了一个简单的服务器端解决方案，您可以看到它是如何完成的：https ://github.com/coolboke1324/FontSheetGenerator/blob/master/saver/savePng.php

该文件期望从表单中发布数据，并且将有两个变量：

imageFileName - 包含扩展名的文件名，例如“hello.png”。文件名转换为小写，所有空格都转换为下划线 - 如果您愿意，可以在脚本中轻松更改此行为。

formImageData - 调用 canvas.toDataURL("image/png") 的结果；

所以你的 HTML 表单可能看起来像这样：

<form action="saver/savePng.php" method="post">
    <input type="hidden" id="formImageFileName" name="imageFileName">
    <input type="hidden" id="formImageData" name="imageData" value="" />
    <input type="submit" class="btn btn-primary" id="saveImageButton" value="Save Image..." />
</form>

您可能希望在提交表单之前将元素“formImageData”的值更新为来自 toDataUrl() 调用的数据。

于 2012-06-22T20:38:30.640 回答