javascript - 编辑后将大 Canvas 保存为数据 URI

Question

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

编辑后，当我尝试获取图像的数据 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);
}