编辑后将大画布保存为数据URI

Saving a large canvas as a data URI after editing

本文关键字：保存 数据 URI 布保存 编辑      更新时间：2024-01-18

我已经从服务器加载了一个47MB的图像文件，并将其呈现在画布上进行编辑。

编辑后，当我试图获取图像的数据URI时，浏览器会冻结，然后询问是否应该停止脚本。

我目前正在使用此代码获取数据URI:

drawingCanvas.toDataURL("image/png");

获取JPEG数据URI稍微快一些，但我只需要文件是PNG格式。有什么办法让这更快吗？

此文件太大，无法通过数据URI进行处理。不同浏览器都有限制，请参阅数据协议URL大小限制

您可以尝试将base64编码的数据发布到服务器，对其进行解码，然后获得普通图像。用PHP提供了简化的解决方案，但环境并不重要。

list($type, $data) = explode(';', $_POST['data']);
list(, $base64) = explode(',', $data);
unset($data);
$decoded = base64_decode($base64, true);
unset($base64);
if (false !== $decoded) {
  header('Content-type: ' . $type);
  header('Content-Disposition: attachment; filename="file.png"');
  header('Cache-Control: max-age=0');
  echo $decoded;
} else {
  header($_SERVER['SERVER_PROTOCOL'] . ' 500 Internal Server Error', true, 500);
}

没有。PNG编码本身是一个相对缓慢的过程（在Photoshop等应用程序中保存的大图像中也可以看到这一点）。

加快速度的唯一有效方法是减小要编码的画布位图的大小-浏览器不是处理大型数据的最佳工具，例如大型图像文件（按维度），它们从来都不打算做这类事情。

将其分解为多个部分可以帮助您解除对UI的锁定。但是，由于您不能并行编码它们，并且在生成Base-64编码的数据uri时会有开销，因此您需要使用async setTimeout给浏览器一些时间来解析每个切片之间的事件队列，当然，您必须在某个点、某个地方将它们拼凑在一起，因此这会使速度变慢，更容易出错，总体上更复杂（复杂并不一定是坏事，尽管在这种情况下）。如果不能选择缩小位图大小，这可能是您的最佳选择。正如Max所指出的，数据uri有大小限制。

您可以使用getImageData()转储原始缓冲区，但最终会得到一个原始大小的缓冲区，该缓冲区还有一系列其他含义。

理论上，共享网络工作者可以并行地进行编码，但很可能比让浏览器在编译后的代码中进行编码慢得多。你也必须提供代码来进行编码。。。与许多新事物一样，它还没有得到充分或完全的支持。

相关文章：