将画布解码为dataURL答案

【问题标题】：Decoding a canvas todataURL将画布解码为dataURL
【发布时间】：2011-11-09 14:37:21
【问题描述】：

我在使用通过 canvas 的 todataurl() 方法创建的数据时遇到了困难。目前，我的代码将结果数据发送到我的 php 服务器，该服务器使用 file_put_contents() 方法创建一个文件来存储该数据。现在，如果我将生成的乱码从文件中剪切并粘贴到图像标签 src 中，它可以正常工作并正确显示，所以我认为到目前为止一切都很好。

但是当我尝试在 JS 中使用代码时，我一直遇到问题。我已经尝试过 php 的 base64_decode 方法，但不断收到损坏的文件。我找到了这段代码：

<?php
  $encodedData = str_replace(' ','+',$encodedData);
  $decocedData = base64_decode($encodedData);

仍然有损坏的文件。理想情况下，我想用它创建一个 .png 文件，但我会满足于在 JS 中再次处理数据文件。非常感谢任何帮助。

【问题讨论】：

您只需读取 MIME 类型（可能是固定的/已知的）和编码（可能没有）来解释数据，这是标准 Base64。如果您之前对输入进行了 URL 编码，则不会有任何空格可以替换。 PHP-FileUpload 有一个 DataUriUpload 组件，它会自动完成所有这些工作。它记录在here。

标签： php javascript canvas

【解决方案1】：

看来您必须去掉 toDataURL() 函数附加到图像数据的标头。在客户端，您可以像这样剥离标题：

..
var data=canvas.toDataURL();
var output=data.replace(/^data:image\/(png|jpg);base64,/, "");
// now send "output" to the server
..

在服务器端使用这个：

<?php
    $decocedData = base64_decode($encodedData);
?>

【讨论】：

这很有帮助，如果将来有人需要这样做，我最终会这样做： $backGround = substr($backGround, 22); $backGround = str_replace(' ','+',$backGround); $backGround = base64_decode($backGround); file_put_contents("currentBG1.png", $backGround);
还需要在正则表达式中添加jpeg：var output=data.replace(/^data:image\/(png|jpg|jpeg);base64,/, "");

【解决方案2】：

在 java 脚本中，在那些浏览器上发送来自 canvas.toDataURL() 的结果，而不是使用默认类型“image/png”支持此方法。

var imageInfo = canvas.toDataURL();
// now send "imageInfo" to the server

直接创建png文件的方式：

<?php
$imageInfo = imageInfoFromBrowser(); // Your method to get the data
$image = fopen($imageInfo, 'r');
file_put_contents("fileName.png", $image);
fclose($image);
?>

我有这个在 PHP 5.3 / Windows 下工作，对于其他版本，请检查。

用于 PHP 测试的图像数据示例。

$imageInfo = "data:image/png;base64,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"

【讨论】：

如果这对您来说失败，请发布您的 PHP 环境。谢谢。
canvas.toDataUrl()... 这是什么？
canvas.toDataUrl() 用于例如fabric.js。您可以通过 JavaScript var imageInfo = document.getElementById("yourid").toDataURL(); 或 JQuery var imageInfo = $("#yourid").toDataURL(); 获取您的画布@DanielDeLeón 发布的这个解决方案就像一个魅力。谢谢，
我认为这个应该更高。似乎是正确的做法。

【解决方案3】：

另一个重要的注意事项是您必须将空白转换为加号。如果不这样做，解码的数据就会损坏：

$encodedData = str_replace(' ','+',$encodedData);
$decocedData = base64_decode($encodedData);

您可以在http://www.php.net/manual/en/function.base64-decode.php阅读更多内容

【讨论】：

【解决方案4】：

其他解决方案对我不起作用。

这行得通：

//image sample
$baseFromJavascript = "data:image/png;base64,BBBFBfj42Pj4";

// remove the part that we don't need from the provided image and decode it
$data = base64_decode(preg_replace('#^data:image/\w+;base64,#i', '', $baseFromJavascript));

【讨论】：