如何将IMG SRC数据:图像通过JavaScript传输到PHP

Question

下面是一个包含内联碱基64图像数据的元素（缩写可在此处适合）。JavaScript如何获取直列数据并将其发送到PHP？如果可以避免中间画布，那将是很好的，因为原始数据已经可用。

页面：

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEU4Xoy9WY9k6" id="photo">

我目前使用的JavaScript单击该元素以触发传输到PHP，该元素将0字节.png文件保存到磁盘：

$("#photo").click(function() {
  var xhr = new XMLHttpRequest();
  xhr.open('POST', 'uploadPhoto.php', true);
  xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
  var data = 'image=' + this.src;
  xhr.send(data);
});

uploadphoto.php，它接收数据并将其写入磁盘：

<?php
  if ($_POST) {
    define('UPLOAD_DIR', '/photos/');
    $img = $_POST['image'];
    $img = str_replace('data:image/jpeg;base64,', '', $img);
    $img = str_replace(' ', '+', $img);
    $data = base64_decode($img);
    $file = UPLOAD_DIR . uniqid() . '.png';
    $success = file_put_contents($file, $data);
    print $success ? $file : 'Unable to save the file.';
  } else {
    print 'Unable to save ' . $_POST['image'];
  }
?>

缺少什么？

解决方案更新

per @ehsant，PHP中的原始数据的PNG格式不匹配，因此PHP中的这条线现在具有png，jpeg曾经是：

str_replace('data:image/png;base64,', '', $img);

Answer 1

您在提供的此特定示例代码中唯一错误的事情是您拥有PNG Base64映像数据，并且在您的uploadPhoto.php文件中，您期望JPG文件。p>因此，在uploadPhoto.php文件中只需更改以下行：

$img = str_replace('data:image/jpeg;base64,', '', $img);

：

$img = str_replace('data:image/png;base64,', '', $img);

你很高兴去