Question

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

如果您在Chrome 19上进行测试，则会出现以下错误：资源解释为Document但使用MIME类型image / octet-stream传输：“data：image / octet -

Answer 1

对于通过DATA URI提供的图片，Chrome 19似乎不允许“另存为”。在金丝雀上测试，它工作正常。

Answer 2

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

 header("Content-Disposition: attachment; filename=image".time().".png");
 header("Content-Type: image/png");
 header("Content-Transfer-Encoding: binary");

Answer 3

它不会在Chrome 19的客户端工作，我已经尝试了一切。我在PHP中整理了一个简单的服务器端解决方案，您可以看到它是如何完成的：https://github.com/coolbloke1324/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（）调用中的数据。

将HTML5 Canvas保存到Chrome中的PNG 19

3 个答案: