Inline IMG SRC data:image如何用JavaScript转PHP？答案

【问题标题】：How Can Inline IMG SRC data:image Be Transferred With JavaScript to PHP?Inline IMG SRC data:image如何用JavaScript转PHP？
【发布时间】：2015-07-21 10:11:12
【问题描述】：

下面是一个包含内联 base64 图像数据的元素（此处缩写为适合此处）。 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'];
  }
?>

缺少什么？

解决方案更新

根据@EhsanT，原始数据的 png 格式在 php 中不匹配，所以 php 中的这一行现在在 jpeg 曾经是 png 的位置：

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

【问题讨论】：

重复stackoverflow.com/questions/15709515/…

标签： javascript php jquery image html5-canvas

【解决方案1】：

在您提供的这个特定示例代码中，您做错的唯一一件事是您有一个PNG base64 图像数据，而在您的uploadPhoto.php 文件中您期望的是一个JPG 文件。

所以在uploadPhoto.php 文件中只需更改这一行：

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

到这里：

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

你很高兴

【讨论】：