Question

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

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

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

drawingCanvas.toDataURL("image/png");

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

Answer 1

此文件太大，无法通过数据URI处理。不同浏览器存在限制，请参阅Data protocol URL size limitations

您可以尝试将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);
}

Answer 2

不幸的是。 PNG编码本身就是一个相对较慢的过程（您可以在Photoshop等应用程序中保存大图像时看到这一点。）

加快速度的唯一有效方法是减少要编码的画布位图的大小 - 浏览器不是大数据处理的最佳工具，例如大型图像文件（尺寸方面），它们从不意思是做这些事情。

在切片中细分可以帮助您解锁UI。但是由于你不能并行编码它们，并且产生Base-64编码数据的开销很大，你需要使用异步setTimeout来给浏览器一些时间来解析每个切片之间的事件队列，当然，你必须在某个地方将它们拼凑在一起，所以这会使它变得更慢，更容易出错并且更加复杂（尽管在这些情况下，复杂并不是一件坏事）。如果不能减少位图大小，这可能是你最好的选择。正如Max指出的那样，数据存在大小限制。

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

共享Web工作者理论上可以并行执行编码，但很可能比让浏览器在编译代码中执行编码慢得多。你必须提供代码来进行编码......和许多新事物一样，它还没有完整或完整的支持。

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

2 个答案: