Question

所以我有一个用户签名的画布，而不是将其转换为基本的64字符串我只想将其保存为图像。什么是最简单的方法html5 ??

Answer 1

您可以轻松地这样做（在这种情况下将格式指定为 png ）：

var img = canvas.toDataURL("image/png");

您可以指定不同的图像格式。看一下这个answer。

Answer 2

我在这里回答了类似的问题：

Simulating user event

假设您正在本地保存

您可以从数据URL创建图像的路径，但是保存它是目前使用HTML5不太好的一个棘手的部分。如果浏览器包含download的{{1}}属性，那么很快就会好转。

显然，如果您拥有比标准网页更高的权限...即您正在设计浏览器插件 - 那么还有其他选项......

如果我自己实现这样的东西，那么我现在可以使用flash插件来处理保存到本地计算机。

假设您正在远程保存

听起来你没有保存到服务器，但如果是这样，只需将base64信息发布到用服务器端脚本语言编写的脚本（例如PHP）并将其转换为将数据直接作为二进制文件写入文件。显然，您必须确保安全地执行此操作，但是，您不希望将任何二进制数据写入服务器的文件系统。

两全其美

如果您有开发时间，那么在没有Flash的情况下获取画布图像的最佳方法是创建一个服务器端脚本，而不是将数据保存到服务器实际写入您发送的Base64信息它直接作为实现的二进制图像文件返回。这样您就可以创建一个将Base64数据发布到新选项卡的表单，此请求由服务器端评估，并返回二进制图像...此时浏览器会询问用户他们希望保存的位置图片。

您需要定义正确的标题以强制图像下载（而不是在浏览器中显示）。强制执行此操作的一个简单更改是将服务器端脚本的a tag标头设置为Content-type ...还有其他标头选项可供设置，哪些是最佳研究（即控制文件名等等）。

<强> reflect.php

'image/octect-stream'

和表格......

<?php

/// a simple example..

if ( array_key_exists('data', $_POST) && ($data = $_POST['data']) ) {

  header('Content-type: image/octet-stream');
  echo base64_decode( $data );
  exit;

}

（整个表单应动态创建并使用JavaScript自动提交）

改善用户体验

有一些方法可以避免创建新标签，但您必须进行研究以确保这些其他方法不会导致跨浏览器问题...例如，您可以将表单数据发布为iframe （会保持进程隐藏），或者直接在当前窗口上发布数据（..并希望所有浏览器都收到正确的请求并打开下载而不是替换您的页面内容 - 大多数现代浏览器都应该处理此问题）。

提高安全性

对于自动返回二进制数据的PHP脚本，您应该通过<form action="reflect.php" method="post" target="_blank"> <input name="data" type="hidden" value=" ... Base64 put here with JS ... "> </form> / one time use key或类似的东西保护对此脚本的访问，并限制您使用Base64数据的数量愿意接受。它似乎不会带来安全风险 - 因为您没有以任何方式修改服务器以及用户发送的内容 - 但是这个世界上狡猾的人可以使用您的脚本并使用它向其他用户发送下载请求。如果下载（并且原来是不需要的特洛伊木马或病毒）将使您的服务器隐含在提供狡猾的文件。

总而言之

由于需要付出一些简单的事情，例如将图像保存到桌面，我不会责怪你做以下事情：

将图片嵌入页面（从画布拍摄快照后）并要求用户右键单击另存为...

希望未来的事情会让这种情况变得更好......

画布图像到图像文件

2 个答案:

假设您正在本地保存

假设您正在远程保存

两全其美

总而言之