Javascript 使用ajax发送base64图像后处理

我试图从画布中生成一个图像，并通过使用ajax发出的POST请求将其发送到服务器。 我使用html2canvas将div转换为canvas，并使用toDataURL（）将其转换为base64

以下是我的JS：

函数genImg（）{
html2canvas（document.querySelector（#ogImage”）。然后（canvas=>{
var renderidimg=canvas.toDataURL（）
$.ajax({
类型：“POST”，
url:“script.php”，
数据：{
base64Img：渲染
}
}).完成（功能（o）{
console.log（“已保存”）
控制台日志（renderimg）；
})
});
}

数据url的格式为

数据：[；base64]，

在解码之前，您必须去除

数据：[；base64]，

部分。

---

还可以使用

$\u POST['base64Img']

来访问数据，因为

base64Img

是您在ajax请求中使用的内容

数据url的格式为

数据：[；base64]，

在解码之前，您必须去除

数据：[；base64]，

部分。

---

还可以使用

$\u POST['base64Img']

访问数据，因为

base64Img

是您在ajax请求中使用的内容

我最终成功地做到了这一点，问题出在PHP文件中：

<?php
 define('UPLOAD_DIR', 'images/');
 // previously it was $img = $_POST['data']
 $img = $_POST['imgBase64'];
 $img = str_replace('data:image/png;base64,', '', $img);
 $img = str_replace(' ', '+', $img);
 $data = base64_decode($img);
 $file = UPLOAD_DIR . 'test.png';
 $success = file_put_contents($file, $data);
 //send request to ocr
 print $success ? $file : 'Unable to save the file.';
?>

---

从现在起，我保存的图像正是所需的图像

我终于设法做到了，问题出在PHP文件中：

<?php
 define('UPLOAD_DIR', 'images/');
 // previously it was $img = $_POST['data']
 $img = $_POST['imgBase64'];
 $img = str_replace('data:image/png;base64,', '', $img);
 $img = str_replace(' ', '+', $img);
 $data = base64_decode($img);
 $file = UPLOAD_DIR . 'test.png';
 $success = file_put_contents($file, $data);
 //send request to ocr
 print $success ? $file : 'Unable to save the file.';
?>

---

---

从现在起，我保存的图像正是所需的图像

在您的PHP服务器中可能存在某种最大请求正文大小，它会切断数据URL，因为它太长了（不确定PHP是否会这样做，但这在许多服务器端语言中肯定是可配置的）。这是我唯一的结论，因为您100%发送了正确的数据URL，并且已经验证了这一点。

toDataURL

不仅返回base64数据，它在开始时还包含一些元数据。@Keith我尝试在开始时使用以下方法删除元数据：.replace（/^data:image\/（png | jpg）；base64，/，“”）我不是PHP用户，但是->

$\u POST['data'];看起来不像是你得到一个POST请求的全部内容。。你试过->
文件获取内容吗php://input');
如果以二进制方式发送，则会减小请求大小。PHP服务器中可能存在某种最大请求正文大小，这会切断数据URL，因为它太长（不确定PHP是否会这样做，但在许多服务器端语言中这肯定是可配置的）。这是我唯一的结论，因为您100%发送了正确的数据URL，并且已经验证了这一点。
toDataURL
不仅返回base64数据，它在开始时还包含一些元数据。@Keith我尝试在开始时使用以下方法删除元数据：.replace（/^data:image\/（png | jpg）；base64，/，“”）我不是PHP用户，但是->
$\u POST['data'];看起来不像是你得到一个POST请求的全部内容。。你试过->
文件获取内容吗php://input');如果以二进制方式发送，则会减少请求大小。是这样吗？Just
$img=str_replace（'data:image/png；base64'，''，''$img）$img=str_replace（'data:image/png；base64'，''，''$img）画布没有src属性，那行代码没有任何作用。是的，你是对的，我删除了它，所以我不知道为什么，但它工作了…它工作了，因为你剥离了
数据：image/png；base64，
从数据中删除。@Musa是的，但我试图删除
数据：image/png；base64，
但它不起作用，因为我没有发送正确的数据，现在我用
$img=$\u POST['data']
替换了
$img=$\u POST['imgBase64']
它起作用了，我得到了预期的结果，谢谢你的帮助：）Canvas没有src属性，那行代码什么都没有。是的，我删除了它，所以我不知道为什么，但它工作了…它工作了，因为你剥离了
data:image/png；base64，
从数据中删除。@Musa是的，但我试图删除
数据：image/png；base64，
但它不起作用，因为我没有发送正确的数据，现在我将
$img=$\u POST['data']
替换为
$img=$\u POST['imgBase64']
它起作用了，我得到了预期的结果，感谢您尝试帮助我：）