解析canvas todataURL [英] Decoding a canvas todataURL

问题描述

我无法使用通过canvas的todataurl（）方法创建的数据。目前，我的代码将结果数据发送到我的php服务器，它使用file_put_contents（）方法创建一个文件来存储该数据。现在，如果我把从文件中得到的乱码粘贴到一个图像标签src它工作正常和正确显示，所以我认为到目前为止一切都是桃子。

I'm having difficulty using data created with canvas's todataurl() method. Currently my code sends the resulting data to my php server which uses the file_put_contents() method to create a file to store that data. Now if I cut and paste the resulting gibberish from the file into an image tag src it works fine and displays properly so I assume so far everything is peachy.

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

But I keep running into issues when I try to use the code in JS. I've tried php's base64_decode method but kept getting currupt files. I found this code:

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

，但仍有损坏的文件。理想情况下，我想创建一个.png文件，但我宁愿只是在JS中处理数据文件。任何帮助非常感谢。

and still got currupted files. Ideally I'd like to create a .png file with it but I'd settle for just processing the data file again in JS. Any help greatly appreciated.

推荐答案

看起来你必须摆脱由 toDataURL（）函数。
在客户端，你可以剥离头如下：

It seems you have to get rid of the header that is prepended to the image data by the toDataURL() function. On the client side you can strip off the header like this:

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

服务器端使用这个：

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

这篇关于解析canvas todataURL的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！