2

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

4

2 回答 2

2

您可以通过这种方式轻松做到这一点（在这种情况下将格式指定为png）：

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

您可以指定不同的图像格式。看看这个答案。

于 2012-08-30T11:02:46.037 回答
2

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

模拟用户事件

假设您在本地保存

您可以使用从数据 URL 创建图像的路线，但保存它是目前使用 HTML5 不是很好的棘手部分。如果浏览器download包含a tag.

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

如果我自己实现这样的东西，我会承认使用 Flash 插件来处理保存到本地计算机。

假设您正在远程保存

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

两全其美

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

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

反射.php

<?php

/// a simple example..

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

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

}

和形式...

<form action="reflect.php" method="post" target="_blank">
  <input name="data" type="hidden" value=" ... Base64 put here with JS ... ">
</form>

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

改善用户体验

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

提高安全性

对于自动返回二进制数据的 PHP 脚本，您应该保持对该脚本的访问由one time use key/authentication token或类似的东西保护，并限制您愿意接受多少 Base64 数据。它似乎不会造成安全风险 - 因为您不会以任何方式修改您的服务器与用户发送的内容 - 但是这个世界上狡猾的人可能会拿走您的脚本并使用它来向其他用户发送下载请求.. . 如果下载（并被证明是不需要的木马或病毒）将使您的服务器隐含提供狡猾的文件。

总而言之

由于将图像保存到桌面之类的简单事物需要付出努力，因此我不会责怪您执行以下操作：

  • 将图像嵌入页面（从画布获取快照后）并要求用户右键单击并另存为...

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

于 2012-08-30T11:06:40.440 回答