解码画布todataURL

我很难用canvas的todataurl（）方法创建数据。目前我的代码将结果数据发送到我的php服务器，该服务器使用file_put_contents（）方法创建一个文件来存储该数据。现在，如果我从文件中剪切并粘贴得到的乱码到一个图像标签src中，它可以正常工作并正常显示，因此我认为一切都很好。解码画布todataURL

但是当我尝试在JS中使用代码时，我一直遇到问题。我试过php的base64_decode方法，但不断得到中断文件。我发现这个代码：

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

仍然有被破坏的文件。理想情况下，我想创建一个.png文件，但我会解决只是在JS中处理数据文件。任何帮助不胜感激。

来源

2011-09-03 joel

您只需读取MIME类型（可能是固定/已知的）和编码（可能没有）来解释数据，这是标准的Base64。如果您先前对URL进行了URL编码，则不会有任何空间被替换。 [PHP-FileUpload]（https://github.com/delight-im/PHP-FileUpload）有一个['DataUriUpload']（https://github.com/delight-im/PHP-FileUpload/blob/023f812226673ac9e0696d8a3579bb7380606dda/ src/DataUriUpload.php）组件，它自动完成所有这些。它记录在[这里]（https://github.com/delight-im/PHP-FileUpload/tree/023f812226673ac9e0696d8a3579bb7380606dda#data-uri-uploads）。 – caw

看来你必须摆脱由toDataURL()函数预先图像数据的头。在客户端就可以剥离这样的标题：）这些浏览器

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

来源

2011-09-03 04:58:37 stewe

这很有帮助，这是我最终做的事情，如果有人需要在将来也这样做：\t $ backGround = substr（$ backGround，22）; \t $ backGround = str_replace（''，'+'，$ backGround）; \t $ backGround = base64_decode（$ backGround）; \t file_put_contents（“currentBG1。png“，$ backGround）; – joel

需要将jpeg添加到正则表达式中：var output = data.replace（/^data：image \ /（png | jpg | jpeg）; base64，/，”“）; – dickyj

在Java脚本从canvas.toDataURL（发送结果：

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

在服务器端使用此比默认类型的“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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"

来源

2012-01-13 09:18:21

如果这样做失败，请发布你的PHP环境。谢谢。 –

canvas.toDataUrl（）...这是什么？ – realtebo

'canvas.toDataUrl（）'用于例如[fabric.js]（http：//您可以通过JavaScript获取画布var imageInfo = document.getElementById（“yourid”）。toDataURL（）;'或者通过JQuery' var imageInfo = $（“＃yourid”）。toDataURL（） ;' @DanielDeLeón发布的解决方案非常有用，谢谢 – ptCoder

另一个重要的注意事项是，你必须将空格转换为加号。如果你不这样做，解码后的数据被破坏：

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

你可以阅读更多的http://www.php.net/manual/en/function.base64-decode.php

来源

2012-04-09 15:18:35 hiddentstones

其他解决方案并没有为我工作。

这工作：

//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));

来源

2018-01-15 13:26:17

解码画布todataURL

回答

相关问题