相关疑难解决方法(0)

我一直在尝试重新实现像Mozilla Hacks网站上的 HTML5图像上传器,但它适用于WebKit浏览器.部分任务是从canvas对象中提取图像文件并将其附加到FormData对象以进行上载.

问题是虽然canvas具有toDataURL返回图像文件表示的函数,但FormData对象仅接受来自File API的 File或Blob对象.

Mozilla解决方案使用以下仅限Firefox的功能canvas:

var file = canvas.mozGetAsFile("foo.png");

...在WebKit浏览器上不可用.我能想到的最好的解决方案是找到一种方法将数据URI转换为File对象,我认为它可能是File API的一部分,但我不能为我的生活找到一些东西.

可能吗？如果没有,任何替代方案？

谢谢.

我正在进行一个生成艺术项目,我希望允许用户从算法中保存生成的图像.一般的想法是:

• 使用生成算法在HTML5 Canvas上创建图像
• 图像完成后,允许用户将画布作为图像文件保存到服务器
• 允许用户下载图像或将其添加到使用算法生成的图片库中.

但是,我坚持第二步.在谷歌的一些帮助下,我找到了这篇博文,这似乎正是我想要的:

这导致了JavaScript代码:

function saveImage() {
  var canvasData = canvas.toDataURL("image/png");
  var ajax = new XMLHttpRequest();

  ajax.open("POST", "testSave.php", false);
  ajax.onreadystatechange = function() {
    console.log(ajax.responseText);
  }
  ajax.setRequestHeader("Content-Type", "application/upload");
  ajax.send("imgData=" + canvasData);
}

和相应的PHP(testSave.php):

<?php
if (isset($GLOBALS["HTTP_RAW_POST_DATA"])) {
  $imageData = $GLOBALS['HTTP_RAW_POST_DATA'];
  $filteredData = substr($imageData, strpos($imageData, ",") + 1);
  $unencodedData = base64_decode($filteredData);
  $fp = fopen('/path/to/file.png', 'wb');

  fwrite($fp, $unencodedData);
  fclose($fp);
}
?>

但这似乎根本没有做任何事情.

更多谷歌搜索出现了这篇基于上一个教程的博客文章.差别不大,但也许值得一试:

$data = $_POST['imgData'];
$file = "/path/to/file.png";
$uri = substr($data,strpos($data, ",") + 1);

file_put_contents($file, …

标准HTML文件上载的工作方式如下:

<g:form method="post" accept-charset="utf-8" enctype="multipart/form-data"  
     name="form" url="someurl">

    <input type="file" name="file" id="file" />

</form>

在我的情况下,我将图像加载到html5画布,并希望将其作为文件提交到服务器.我可以:

var canvas; // some canvas with an image
var url = canvas.toDataURL();

这给了我一个image/png作为base64.

如何将base64映像以与输入类型文件相同的方式发送到服务器？

问题是base64文件的类型与文件类型不同,后者位于input type ="file"中.

我可以以某种方式转换服务器类型相同的base64吗？